Computer Science

Functions Parameters Variables Value Translate P M D A S Fill Stroke Rotate Animation loop. Inside and outside the variable.

(0, 0)

. (200, 200)

400

Coloring

background(red, green, blue) Set the background color color(red, green, blue) Store all three color components in one variable fill(red, green, blue) Set the fill color for shapes noFill() Turn off fill for shapes. noStroke() Turn off outlines for shapes stroke(red, green, blue) Set the outline color for shapes strokeWeight(size) Change the thickness of lines and outlines

400

400, 400

Text

text(text, x, y) Draw some text textFont(font, size) Changes the font of text textSize(size) Change the size of text

Math

abs(num) Take the absolute value of a number cos(deg) Take the cosine of an angle log(num) Take the logarithm of a number pow(num, exponent) Raise a number to an exponent

random(low, high) Generate a random number sin(deg) Take the sin of an angle tan(deg) Take the tangent of an angle

Keyboard

keyCode Number representing which key is pressed keyIsPressed True if a key is being pressed, false otherwise bezier(x1, y1, cx1, cy1, cx2, cy2, x2, y2) Draw a bezier curve ellipse(x, y, width, height) Draw an ellipse line(x1, y1, x2, y2) Draw a line point(x, y) Draw a point rect(x, y, width, height) Draw a rectangle triangle(x1, y1, x2, y2, x3, y3) Draw a triangle

Images

image(image, x, y) Display an image

Programming Basics

debug(arg1, arg2, ...) Print to your browser's developer console for (var i = 0; i < 8; i += 1) { } Repeat code a fixed number of times if (x < 20) { ... } Only run code if a certain condition is true var array = [0, 1, 2, 3, 4]; Make an array of 5 numbers var drawWinston = function() { }; Define a new function

Mouse

mouseIsPressed True if the mouse is being pressed, false otherwise

Intro to Animation
Background(214, 252, 255); // position of the car var x = 11; var draw = function() { background(252, 255, 214); // draw the car body fill(255, 0, 115); rect(x, 200, 100, 20); rect(x + 15, 178, 70, 40); // draw the wheels fill(77, 66, 66); ellipse(x + 25, 221, 24, 24); ellipse(x + 75, 221, 24, 24); x = x + 10; }; noStroke();

Incrementing Shortcuts
noStroke();
var x = 200; var y = 350; var ballWidth = 300; var ballHeight = 200; var draw = function() { background(255, 206, 71); fill(191, 0, 255); x = x + 1; or x += 1;

ellipse(x, y, ballWidth, ballHeight); y = y - 2; or y -= 2

ballWidth *= 0.99; or ballwidth = ballwidth * 0.99; ballHeight /= 1.01; or ballheight = ballheight / 1.01; };

Mouse Interaction
Var mouse x; Var mouse y; strokeWeight(3); stroke(57, 0, 214); fill(0, 210, 247);

var draw = function() { background(255, 255, 255); ellipse(mouseX, mouseY, 15, 15); };

200, 200

If Statements
// position of the ball var x = 20; // how far the ball moves every time var speed = 5;

var draw = function() { background(202, 255, 97);

If (x < 0) {speed = 5;}

375

fill(66, 66, 66);

25
ellipse(x, 200, 50, 50);

If statement
if (condition) {code to run}

(x > 400)
// move the ball x = x + speed; };

{speed = -5;}

Booleans
background(66, 17, 143);

// top left fill(255, 255, 0); ellipse(100, 100, 100, 100);

// top right fill(0, 225, 255); ellipse(300, 100, 100, 100);

// bottom left fill(255, 25, 117); ellipse(100, 300, 100, 100);

// bottom right fill(0, 255, 68); ellipse(300, 300, 100, 100);