https://editor.p5js.org/Beeper/sketches/GYMccMQ2p

https://editor.p5js.org/codingtrain/sketches/Ya1K1ngtFk

https://editor.p5js.org/icm/sketches/BJKWv5Tn

https://editor.p5js.org/usr_pyth/sketches/VP6jitcIs

https://www.youtube.com/watch?v=LO3Awjn_gyU

https://editor.p5js.org/aryan.chharia@gmail.com/sketches/4nGa6gfyr

https://p5js.org/examples/motion-bouncy-bubbles.html

https://medium.com/spidernitt/introduction-to-digital-art-with-p5-js-d8ba63080b77

*/

​

let colors = ["oldlace", "lightskyblue", "plum", "powderblue", "pink"];

let speedX;

let speedY;

​

function setup() {

  createCanvas(windowWidth, windowHeight, WEBGL);

  x = random(width);

  y = random(height);

  speedX = 10;

  speedY = 10;

}

​

function draw() {

  background(random(colors));

  petals();

  noLoop();

  x = x + speedX;

  y = y + speedY;

    if (x + petals.width >= width) {

    speedX = -speedX;

    x = width - dvd.width;

  } else if (x <= 0) {

    speedX = -speedX;

    x = 0;

    }

    if (y + petals.height >= height) {

    speedY = -speedY;

    y = height - dvd.height;

  } else if (y <= 0) {

    speedY = -speedY;

    y = 0;

  }

}

​

  function petals() {

    rotateZ(frameCount * 0.008);

    push();

    fill(random(colors));

    translate(200, 200);

    rotate(radians(90));

    noStroke();

    rotate(radians(45));

    ellipse(100, 0, 250, 150);

    rotate(radians(45));

    ellipse(100, 0, 250, 150);

    rotate(radians(45));

    ellipse(100, 0, 250, 150);

    rotate(radians(45));

    ellipse(100, 0, 250, 150);

    rotate(radians(45));

    ellipse(100, 0, 250, 150);

    rotate(radians(45));

    ellipse(100, 0, 250, 150);

    rotate(radians(45));

    ellipse(100, 0, 250, 150);

    rotate(radians(45));

    ellipse(100, 0, 250, 150);

    pop();

  }

​

​