ICM Week 2 - Making Things Move!

This week we learned about my arch nemesis - variables. During our in-class demo, wherein we drew a spinning rectangle rotating around a defined center axis, my mind decided to travel elsewhere. I was outside, sitting on a park bench staring at the many multi-colored pinwheels hanging on a fence of a nearby public school. I thought a spinning pinwheel would make a good drawing for this week's assignment. Not only would it require the use of functions that we learned this week, it would also make me happy when I look at it. And so it has. The code is here.

What Worked

The pinwheel rotation worked really well, and I was able to draw it very quickly using push(), pop() and translate() to temporarily change the drawing's origin point. This was especially helpful because I wanted to make the drawing asymmetrical. This also provided the central axis with which the rotation would occur.

Everything came together rather well, and much faster- and shorter- than the first drawing. I did want to add more details/elements but since they wouldn't be animated or interactive, I decided to keep the visual elements rather simple. I was quite happy I was able to make this drawing more efficient in terms of line count.

What Didn't Work

Ah yes. That's is THE questions.

The answer is mostly everything...for a long time. And "compromise" was the name of the game this week , as it tends to be every week.

I knew I wanted the sky to change from black to blue as the sun came up. I had no idea what I wanted the sun to do honestly, but the sky had to change color over time. I was able to create the variables necessary, but I ran into trouble figuring out exactly which argument (r, g, b) needed to change at what speed in order to get the colors to shift from black, to red/orange, to blue. I spent about 45 minutes manipulating the changing speed of each color channel to land at something kind-of remotely similar to what I wanted.

Being able to shift from 1 preset RGB value to another, rather than manipulating individual color channels would have been easier for my brain to comprehend. I hope there's a way to do it. I was still satisfied with the results, although next time I would have the color values reset and loop automatically once the background reached a certain color value. But for now I settled with a mouse click to reset everything - although it doesn't change the pinwheel colors. You'll have to reload the page for that.

The other issue I ran into was the sun/moon (smoon) movement. I managed to get it to arc across the screen, but I couldn't get the mouse to control the location of the smoon on it's predefined arc path. Instead, it was changing the smoon's location relative to its central axis - thereby causing it to fly all over the place. "That's no smoon!", I thought.

What I Learned

I learned a hellovalot this week. Specifically, I learned how to finally use random and the mousePressed() function The examples on the p5.js website weren't helpful because the variables were defined using "let". I wanted the pinwheel colors to change randomly each time the sketch was run, but I kept getting an error stating that my variables weren't defined. I was typing:

function setup() {
  createCanvas(400, 400);
 
  let r1 = random(255);
  let g1 = random(255);
  let b1 = random(255);
}
function draw() {
  background(255);

  strokeWeight(2);
  noStroke();
  fill(r1, g1, b1, 127);
  circle(200,200,300);
}

I obviously had a syntax error but I couldn't figure out what was wrong. Finally after browsing other people's code, I realized that I was declaring my variables (is that even the word?) incorrectly. I wasn't supposed to use "var" or "let" for some reason. Here's the corrected example:

function setup() {
  createCanvas(400, 400);
 
 r1 = random(255);
 g1 = random(255);
 b1 = random(255);
}

function draw() {
  background(255);

  strokeWeight(2);
  noStroke();
  fill(r1, g1, b1, 127);
  circle(200,200,300);
}

function mousePressed() {
    r1 = random(255);
    g1 = random(255);
    b1 = random(255);
  }

Which now does this:

click on the drawing to change the color

Oh and I also learned how to embed the code properly on this site so it works! Which means I'll leave you with this.