Actually, with hindsight, I am more than disappointed with the concept of mouse interactivity. It doesn’t really work very well in on mobile and yet most people seem to be opening new websites on their mobile phones these days, not on a fancy shiny big laptop or desktop computer. However, p5.js definitely does not disappoint me as far as animations such as the one below is concerned. It is just a question of playing with the random values of variables a bit and, consequently, creating a bit of magic, like this:
Random stuff
var col = {
r: 255,
g: 0,
b: 120
}
var points = {
x: 100,
y: 0
}
var col = {
r: 255,
g: 0,
b: 120
}
function setup() {
createCanvas(windowWidth, windowHeight);
background(220)
}
function draw() {
//background(220);
points.x = random(0, width/2)
points.y = random(0, height)
col.r = random(0, 50)
col.g = random(50, 200)
col.b = random(200, 255)
fill(col.r, col.g, col.b, 100)
noStroke()
//rectMode(CENTER)
rect(points.x, points.y, 50, 50)
points.x = random(width/2, width)
points.y = random(0, height/2)
col.r = random(50, 150)
col.g = random(0, 200)
col.b = random(240, 255)
fill(col.r, col.g, col.b, 75)
rect(points.x, points.y, 30, 30)
}
function windowResized() {
resizeCanvas(windowWidth, windowHeight);
}