Skip to content

Scroll-to-rotate, 2D

This sketch was my contribution to a Mastodon discussion on the many different ways creative tools understand scroll wheels, along with Scroll-to-rotate, 3D.

Scroll to find the hidden message. (Does not work on mobile.)

An unassuming rectangle that says "this is a test, try scrolling"

function setup() {
  createCanvas(400, 400);
  angleMode(DEGREES)
}

let storedMatrix = [1, 0, 0, 1, 0, 0]

function saveMatrix() {
  let om = _renderer.drawingContext.getTransform()
  let pd = pixelDensity()
  return [om.a / pd, om.b / pd, om.c / pd, om.d / pd, om.e / pd, om.f / pd]
}

let timesScrolled = 0

function draw() {
  background(220);
  applyMatrix(storedMatrix)
  rect(10, 10, 380, 380)
  textAlign(CENTER, CENTER)
  text("This is a test\nTry scrolling", 200, 200)
  if (timesScrolled > 100) {
    push()
    translate(360, 360)
    rotate(45)
    text("Hint: Go ->", 0, 0)
    pop()
  }
  rect(600, 600, 100, 100)
  text("You found me! :o", 650, 650)
  resetMatrix()
  push()
  stroke("red")
  strokeWeight(3)
  point(mouseX, mouseY)
  pop()
}
function mouseWheel(e) {
  timesScrolled++
  let a = constrain(e.delta, -100, 100)
  resetMatrix()
  translate(mouseX, mouseY)
  rotate(a / 30)
  translate(-mouseX, -mouseY)
  applyMatrix(storedMatrix)
  storedMatrix = saveMatrix()
}

(Originally seen at https://editor.p5js.org/bojidar-bg/sketches/FUbJem2vI)

Experiments tagged p5 (35/85)

Experiments tagged interactive (13/26)

Experiments on this site (35/85)