P5.js with variables

Hey Fellas!

At our second ICM class where we’ve learned about VARIABLES.

If you see my drawing from the 1st class you may find it a bit boring. Well, you may tell me it is a nice horse but it is just a static image. Now, with variables, we are able to create much more interesting, ANIMATED and even INTERACTIVE things. The variables we learned this week are:

  • mousePressed (something happens once you click)
  • mouseX, MouseY (action happens according to the mouse movement)
  • Var (lets you create your own variable)
  • Js Objects (variables inside variables)
  • random () (randomize the behavior of something)
  • map () (still fighting with this one)

I must confess. It was hard. I struggled. I’ve spent hours on it. And when I made this:

i-QQQ2

I was like…

HELL-YEAH

But then, after admiring my beautiful creation for a few minutes, I thought…well, it is a bit too circular. So, I tried to make something a little bit nicer to the eyes, making use of all the variables I could. This is a quick sketch of my idea:

sketch rabbit

And this is what I got:

Crazy_for_Carrots

Variables and tools I made use of:

  • var: (moving carrots and also conditioning the use of other variables)
  • mouseX, mouseY (eyes)
  • random (background color changing, and jiggling)
  • if (carrots change directions once they reach the edge of the canvas)
  • mousePressed (background color)
  • map (delimitate the movement of the eyes)

A few things I had problems with:

  • tilting shapes
  • Using the mousePressed function to make the text twinkle
  • making the text pop in and out automatically

Here is the link to access and play with the rabbit

And just in case you are wondering, this is the code:

var x;
var y;
var x2;
var speed = 5;
var jiggle = 0;
var backr = 220;
var backg = 240;
var backb = 230;
var myMessage = “crazy for carrots”;
var myFont;

function preload() {
myFont = loadFont (‘DKPetitFour.otf’);
}

var eyeball_left = {
x:130,
y:280,
}

var eyeball_right = {
x:270,
y:280,
}

eyecircle1_left = {
x:130,
y:280,
diameter:80,
}

eyecircle1_right = {
x:270,
y:280,
diameter:80
}
function setup() {
createCanvas (400, 500);
y = height/2;
x = width;
x2 = 0;

}

function draw() {
background (mouseX, backg, mouseY);
//carrot right to left1
fill (180, 245, 100);
rect (x-45, jiggle+10, 10, 20);
rect (x-55, jiggle+15, 7, 20);
rect (x-35, jiggle+15, 7, 20);
fill (255, 140, 0);
triangle (x, jiggle+30, x-80, jiggle+30, x-40, jiggle+180);
//carrot left to right1
fill (180, 245, 100);
rect (x2+30, jiggle+150, 10, 20);
rect (x2+37, jiggle+155, 7, 20);
rect (x2+23, jiggle+155, 7, 20);
fill (255, 140, 0);
triangle (x2, jiggle+170, x2+70, jiggle+170, x2+35, jiggle+320);

//carrot right to left2
fill (180, 245, 100);
rect (x-45, jiggle+320, 10, 20);
rect (x-55, jiggle+325, 7, 20);
rect (x-35, jiggle+325, 7, 20);
fill (255, 140, 0);
triangle (x, jiggle+340, x-80, jiggle+340, x-40, jiggle+490);

//BODY
fill (255, 255, 230);
noStroke ();
triangle (40, 600, 360, 600, 200, 370);

//EAR LEFT
fill (255, 255, 230);
noStroke ();
ellipse (100, 140, 100, 230);
fill (255, 220, 200);
ellipse (102, 150, 70, 200);

//EAR RIGHT
fill (255, 255, 230);
noStroke ();
ellipse (300, 140, 100, 230);
fill (255, 220, 200);
ellipse (301, 150, 70, 200);

//HEAD
fill (255, 255, 230);
noStroke ();
ellipse (200, 310, 280, 260);

//MOUTH
noFill ();
stroke (0);
strokeWeight (2);
arc(200, 395, 50, 30, PI, TWO_PI);

//EYE LEFT
fill (255, 255, 255);
stroke (0);
ellipse (130, 280, 120, 120);
noFill
stroke (0)
ellipse (130, 280, 100, 100);
ellipse (eyecircle1_left.x, eyecircle1_left.y, eyecircle1_left.diameter, eyecircle1_left.diameter);
fill(0);
ellipse (eyeball_left.x, eyeball_left.y, map(mouseX, 0, 400, 0, 55), map(mouseY, 0, 600, 0,80));

//EYE RIGHT
fill (255, 255, 255);
stroke (0);
ellipse (270, 280, 120, 120);
noFill
stroke (0)
ellipse (270, 280, 100, 100);
ellipse (eyecircle1_right.x, eyecircle1_right.y, eyecircle1_right.diameter, eyecircle1_right.diameter);
fill (0);
ellipse (eyeball_right.x, eyeball_right.y, map(mouseX, 0, 400, 0, 55), map(mouseY, 0, 600, 0,80));

//LINES
stroke (0)
strokeWeight (2)
line(199, 347, 200, 380)
strokeWeight (1)
line (210, 330, 280, 325);
line (205, 333, 290, 340);
line (203, 337, 280, 350);
line (110, 325, 180, 330);
line (105, 338, 185, 335);
line (113, 350, 190, 338);

//NOSE
fill (255, 0, 20);
noStroke ();
triangle (180, 330, 220, 330, 200, 350);

x = x – speed;
x2 = x2 + speed;
jiggle = jiggle + random(-3, 3);

if (x > width || x < 0) {
speed = speed * -1;
}
fill (0);
textFont (myFont);
textSize (60);
text (myMessage, -7, 240);
}

 

Leave a Reply

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