Interactivity with the mouse p5.js

What makes p5.js so delightful to work with is that you can create instant interactivity with some sort of mouse event that creates very nice looking patterns on the “canvas”, if you like. For people like myself that are really interested in shapes and animation, this is really motivating. Move your mouse over the square shape below. If you cannot see the effect on your phone click on this link. It will open in a new tab (just place a finger anywhere on the small rectangular canvas and you will see the effect instantly)..

I mean the first time I saw this I was so excited. I just think that there are so many possibilities here. This is the code for the sketch.js file by the way:

function setup() {
  createCanvas(1500, 1500);
  background(0, 255, 255);
}

function draw() {
  //background(220);
  
  fill(255,0,255, 25)
  //noStroke()
  stroke('red')
  ellipse(mouseX,mouseY,50,25)
  //rect(mouseX,mouseY,50,25)
  //point(mouseX,mouseY)
}

function mousePressed(){
  background(250, 250, 20);
}

Leave a Reply