[icm wk 2] Variables

New week, new sketch! After learning about variables in the precious class, we were asked to create a sketch that includes:

  • One element controlled by the mouse.
  • One element that changes over time, independently of the mouse.
  • One element that is different every time you run the sketch.

I’m revisiting the first sketch I’ve ever made using p5, when I first started watching Coding Train videos back in February 2020 (not too long ago really), “the eggperson sketch”.

In this sketch, I used map function to control the r, g and b values separately for the background and its eyes. The vertical movement of the ball (and the eyeballs) is controlled by mouseY, and the horizontal movement is created by a simple if / else statement.

Variable comes into play when I wanted the eyes to follow the ball position. At the top of the code, I called an ellipseX variable to use as the ball's X position. When I'm writing the X position for the eyeballs, I used ellipseX with some math (through lots of trials and errors), to constrain them within the eyes.

Approaching it once again, 7 months later, with new knowledge and standards, I decided to make some changes:

  • When clicking with mouse, the ball changes color and size
  • Every time the sketch runs, the ball has a different color and size.
  • Visual aid telling other people to click on it

I first experimented with the mouse click function. The logic seems to be:

if I press the mouse, a random number will be selected.

if (mouseIsPressed == true) {
    fill(random(150,255), random(150,255), random(150,255));
    circle(circleX, mouseY, random(60,1000));

But I didn't know how to write:

if I release the mouse, the randomly selected number stays the same.

As an experiment, I made the else {} return the ball into a fixed size, which resulted in this "click and party" aesthetics:

Sidetrack: this WordPress plugin I'm using for p5 is preventing me from setting only one radius parameter for an ellipse (it also doesn't support "circle"); therefore the random radius numbers change the shape of the ball into different ovals. In my original code it remains a circle.

That... actually looked cool, but not what I wanted. I realized two things. First, mouseIsPressed itself is a function, and I don't have to write mouseIsPressed == true . Second, when mouse is pressed, it's picking up a random number every single frame, which resulted in that constant change of color / radius.

Instead of the if / else statement, I should've just used mouseClicked .

// more variables!
let ballColor = color(random(180,255), random(180,255), random(180,255));
let ballSize = random(3,200);

function mouseClicked()
  ballColor = color(random(150,255), random(150,255), random(150,255));
  ballSize = random(20,400);  

Now, combining both code, it's starting to look decent. One last thing was to use a text function to write a line of instruction. I also added in an if / else statement for extra mouse pressing fun.

  fill(250, 250, 20);
  if (mouseIsPressed)
  fill(random(150,255), random(150,255), random(150,255));
  text('triggered',mouseX-70, mouseY);
  text('click anywhere', 120, 350);

Voila! The final sketch is at the top of this blog post. Since the p5 plug-in can't handle my circles, full code is available here.

Thanks for reading my blog. Till next time!


Leave a Reply

Your email address will not be published. Required fields are marked *