Author: Remy Janabi

“Controlled randomness” is, and I think most people would agree, an oxymoron. I agree that art is at its best when there’s a healthy mix of chaos and order, but is true randomness even possible? I think randomness is something that is inherently controlled to some extent, since there will always be certain parameters for everything we can conceive of. We are a species that operates on frameworks and pattern recognition, after all. I think we’ve coined the term “random” to describe outcomes for which we can’t see a clear logical process, and naturally, as the finer workings of the universe remain far out of our reach, most things in the world make little sense to us.

Talk to a quantum physics enthusiast and they might tell you that, on a quantum level, there exists some randomness in the way particles interact with one another. Likely, this is just a placeholder theory to explain away our confusion, but regardless, the universe seems to operate both on processes we can follow logically and processes that we can’t. In other words: chaos and order. Maybe that’s why people find so much beauty in “controlled randomness” – it mirrors the way we understand the world: nature, humanity, time, etc. Art mirrors life, after all.

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.

For my self portrait I decided to draw a zombie because I like zombies. I wanted it to look like something I might’ve drawn in MS Paint, so I played around with shapes and colors until it felt and looked right.

The part I’m most proud of is the hair and bangs, since I had to align the points and angles perfectly to the pixel to make it one big coherent shape and honestly it was incredibly painful to do.

 //bangs
strokeWeight(0)
fill('black')
arc(300,225,320,200,PI,0)
triangle(300,220,100,350,150,200)
triangle(280,220,270,400,350,200)
triangle(340,220,500,400,460,220)
triangle(200,220,100,500,150,240)
triangle(80,100,500,300,300,105)
triangle(380,126,550,245,460,240)

I didn’t have any help with this aside from a few tips from the p5 reference page. I just kinda figured things out as I went along. Because of this, there are some aspects of the code that probably could’ve been done more efficiently, so I’ll carry what I learned through trial and error here and apply it to my next project. I’m also thinking of having the colors in her eyes shift so that it looks like it’s spiraling. That’d be pretty cool I think.