# [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”.

```
var ellipseX = 0;
var r = 0;
var g = 0;
var b = 0;

//not using this yet... trying to experiment with the map fuction but don't know how

var pupilL = {
x: 147,
y: 180,
diameter: 20
};

function setup() {
createCanvas(400, 400);
}

function draw() {
r1 = map(mouseX, 0, 400, 100, 200)
g1 = map(mouseY, 0, 400, 100, 255);
b1 = map(mouseX, 0, 400, 180, 80);
background(r1, g1, b1);
//face
noStroke();
fill(255, 210, 230);
ellipse(200, 200, 160, 190);
//hat
fill(100, 120, 250);
quad(175, 110, 254, 125, 245, 108, 190, 98);
quad(195, 73, 190, 99, 245, 109, 250, 87);
//bowtie
quad(160, 280, 160, 310, 240, 280, 240, 310);
//nose
fill(255, 100, 130);
quad(200, 190, 180, 230, 200, 240, 220, 230);
//eyes
fill(250);
ellipse(160, 180, 46, 30);
ellipse(240, 180, 46, 30);
//pupils
r2 = map(mouseY, 0, 400, 200, 100)
g2 = map(mouseX, 0, 400, 100, 150);
b2 = map(mouseY, 0, 400, 0, 255);
fill(r2,g2,b2);
ellipse(147 + ellipseX / 18, 175 + mouseY / 40, 20,20);
ellipse(227 + ellipseX / 18, 175 + mouseY / 40, 20,20);
//circle
fill(255, 250, 180);
ellipse(ellipseX, mouseY, 30,30);
if (ellipseX <= 430) {
ellipseX = ellipseX + 2;
} else {
ellipseX = ellipseX = 0;
}
}

```

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:

```
var circleX = 0;
var r = 0;
var g = 0;
var b = 0;

function setup() {
createCanvas(300, 400);
}
function draw() {
r1 = map(mouseX, 0, 400, 100, 200)
g1 = map(mouseY, 0, 400, 100, 255);
b1 = map(mouseX, 0, 400, 180, 80);
background(r1, g1, b1);
//ball
noStroke();
fill(255, 250, 180);
if (mouseIsPressed == true) {
fill(random(150,255), random(150,255), random(150,255));
ellipse(circleX, mouseY, random(60,1000), random(60,1000));
}
else{
ellipse(circleX, mouseY, 25,25);
}
if (circleX <= 430) {
circleX = circleX + 2;
} else {
circleX = 0;
}
}

```

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.

``````textSize(25);
fill(250, 250, 20);
if (mouseIsPressed)
{
textSize(40);
fill(random(150,255), random(150,255), random(150,255));
text('triggered',mouseX-70, mouseY);
}
else
{
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!

1. • 