Week 2 Animation, Conditionals, Loops

For this assignment I wanted to do something spiraley and trippy. Honestly, I didn’t have a particular vision for this one and figured it out as I went along.

First thing I did was the background. At first I had it be a bunch of overlapping shapes moving randomly accross the screen, but it was too jarring. I ended up simplifying it to what you can see above: an animated perpetual wave of thin white concentric circles over a black background.

if (frameCount % 8 > 6) {
  cc = 29;
} else if (frameCount % 8 > 4) {
  cc = 24;
} else if (frameCount % 8 > 2) {
  cc = 19;
} else {
  cc = 17;
}
while (cc > 1 && cc < 1000) {
  strokeWeight(0.5);
  circle(200, 200, cc);
  cc += 14;
}

As you can see, I used a boolean and frameCount to animate the circles, and a while() loop to draw them. I used the p5 reference library to remind me of how they work and get the finer details right, and I learned about frameCount by watching several youtube videos on animation.

Next I added the eye in the middle using a text box and orienting it so that it aligns with the centermost circle. Pretty simple and straightforward.

  strokeWeight(0);
  textSize(90);
  fill(250);
  textAlign(CENTER, CENTER);
  text("", 210.5, 174.5);

Finally (somehow this was the hardest part), I added the text in the middle and animated it to fade in and out.

 stroke(t);
 if (frameCount % 30 < 15) {
 t = t + 15;
} else if (frameCount % 30 < 30) {
 t = t - 15;
}

for (let x = 200; x < 400; x += 600) {
  for (let y = 20; y < 460; y += 30) {
    textSize(10);
    textFont("Courier New");
    strokeWeight(0.5);
    noFill();
    text(
      "it is only by dying to ourselves that we find life",
      x,
      y,
      [500],
      [10]
    );
  }
}

I used a for() loop to duplicate the text accross the y axis, and a boolean and frameCount to animate the fading. This one was a pain in the ass because I kept messing up the text’s orientation and it took a few tries to get the frame remainders right. I also think the first for() function where I duplicate it accross the x axis is extraneous, but the code messed up when I tried to get rid of it so I just left it in there.

One thing I could potentially add to this is a sound effect or some music to add to the aesthetic. I also feel like I should’ve added an interactive aspect to it; that completely skipped my mind. Otherwise, I’m happy with the final product. It’s nothing too impressive but I think it fits together nicely.