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.)
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)
Browse more articles?
← Pushy universe Experiments tagged p5 (35/85) Scroll-to-rotate, 3D →
← Pushy universe Experiments tagged interactive (13/26) Scroll-to-rotate, 3D →
← Pushy universe Experiments on this site (35/85) Scroll-to-rotate, 3D →