Sketches

At the move of the cursor/mouse the photograph/image enlarges/zoom out and leaves a mirror-like image of the square/rectangular shape of the zoom out movement track. 

Simultaneously, a yellow small round shape becomes the center of a larger circle that is formed by the movement of yellow square shapes. This becomes a continuous loop circle around the center, that it is modified as the cursor/mouse is moved to other location.

Problems : How to make the loop to become intermittent or pause for a period of time to make the circle loop in another location?

                How to make the zoom in and zoom out of the image/photograph a separate animation than the previous mentioned animation of shapes: circle movement?

                What other static or animated features can be included in the final artwork?

https://editor.p5js.org/carmeli2024/sketches/fee1nh-D_

let angle=5;

let img;

let diameter;

function preload(){

  img=loadImage("images/blog.png");

}

function setup() {

  createCanvas(1280,720);

  imageMode(CENTER);

}

function draw() {

  background(255,0,245,1);//purple color

  diameter=map(mouseX,0,width,10,700);

  image(img,width/2,height/2,diameter,diameter);

  line(200,700,200,5);

  line(1060,700,1050,5);

  strokeWeight(1);

  stroke(0);

  if(mouseIsPressed){

    stroke(0);

  }else{

    stroke(255,255,0,1);

}

fill(255,255,1,255);//yellow color

  stroke(5);

ellipse(mouseX, mouseY,10,10);//moving round shape yellow color

ellipse(130,130,250,250);//static round shape upperleft yellow

fill(255,1,0,255);

ellipse(1150,498,250,255);//static lowerright corner color red

  translate(mouseX,mouseY);

  rotate(angle);

  fill(255,255,0,500);

  strokeWeight(1);

  rect(100,100,10,10); //square shape moving in circle around ellipse shape yellow color

  angle+=0.1;

}

The following is a sketch modified from Sylvester2: (https://editor.p5js.org/Sylvesterd2/sketches/B1kLLJ82b)

https://editor.p5js.org/carmeli2024/sketches/W54Kh1xrG