Parallax

They're glow bracelets, or something...

Do you see the "tube" rotate when you move your mouse close to the center point?

Source Code for this Sketch

let rings = []

class Ring{
	static _order = 0

	constructor(){
		this.size = Math.random() * 80 + 20
		this.hue = Math.random() * 360

		Ring._order++
		this.order = Ring._order
	}

	draw() {
		let xpos = lerp(width/2, mouseX, this.order/20)
		let ypos = lerp(height/3, mouseY, this.order/20)

		stroke(this.hue, 100, 50, .2)
		circle(width-xpos, height/1.5-ypos, this.size)

		stroke(this.hue, 100, 50)
		circle(xpos, ypos, this.size)
	}
}

function setup() {
	createCanvas(800, 400, P2D, canvas)
	chrisDefaults()

	for(let i = 0; i < 20; i++) {
		rings.push(new Ring())
	}

	strokeWeight(3)
	noFill()
}


function draw() {
	background(0)

	rings.forEach(ring => {ring.draw()})
}

You may use all or part of the p5 code seen on this page for your own creations, without restriction. Attribution is appreciated but not required.

This sketch also includes the following sources: p5common.js . Sources are available under their respective licenses.

See all p5.js sketches