animation

For the animation I decided to create something new. Starting with the image of a flower loosing its petals I drafted a simple image of a flower.

I ended up working with the “If” and “Else” commands.

I initially tried experimenting with function mousePressed, but while I did create motion, I had continuously press the mouse to move the petals down.

VIDEO-2024-09-12-20-24-18.mov

After switch back to function draw, I eventually ended up with this.

(1)

(1)

While it “worked,” there were still things I was not fully happy with. When the mouse is not pressed, the flower reverse back to the original staring image. However when it is pressed again, due to the code used, it does not restart, but instade it continues from when it was left off.

if (mouseIsPressed === true) {
  //petals
  fill(245, 209, 66);
  ellipse(150, petal1 + 50, size);
  petal1 = petal1 + 0.6;
  ellipse(150, petal2 - 50, size);
  petal2 = petal2 + 1.3;
  ellipse(250, petal3 + 50, size);
  petal3 = petal3 + 1.5;
  ellipse(250, petal4 - 50, size);
  petal4 = petal4 + 0.8;
} else {
  // When false.
  stroke(80, 60, 50);
  strokeWeight(2.5);
  fill(245, 209, 66);

  //petals
  fill(245, 209, 66);
  fill(245, 209, 66);
  ellipse(150, 250, size);
  ellipse(150, 150, size);
  ellipse(250, 250, size);
  ellipse(250, 150, size);
}

Since the imagery between both commands felt too jarring for me, I tried adding motion commands into the “Else” code by essentially reversing what happened in “If.” This created a push and pull effect in the image, commanded by the mouse. Essentially, inviting whoever is using the code to participate, like a game.

To present this idea to participants, I added a log for instructions.

Keep the petals within the box by clicking on the image!

final version

full code and animation: https://editor.p5js.org/spss-ssps/sketches/NEM-gRk1H

full code and animation: https://editor.p5js.org/spss-ssps/sketches/NEM-gRk1H

if (mouseIsPressed === true) {
  //petals
  fill(245, 209, 66);
  ellipse(150, petal1 + 50, size);
  petal1 = petal1 + 0.6;
  ellipse(150, petal2 - 50, size);
  petal2 = petal2 + 1.3;
  ellipse(250, petal3 + 50, size);
  petal3 = petal3 + 1.5;
  ellipse(250, petal4 - 50, size);
  petal4 = petal4 + 0.8;
} else {
  // When false.
  stroke(80, 60, 50);
  strokeWeight(2.5);
  fill(245, 209, 66);

  //petals
  fill(245, 209, 66);
  ellipse(150, petal1 + 50, size);
  petal1 = petal1 - 0.6;
  ellipse(150, petal2 - 50, size);
  petal2 = petal2 - 1.3;
  ellipse(250, petal3 + 50, size);
  petal3 = petal3 - 1.5;
  ellipse(250, petal4 - 50, size);
  petal4 = petal4 - 0.8;
}