Introduction to ProgrammingClass 3

Paul Brebner

Revision

• How far did you get last time?

• Processing “Exhibition” examples

– Yellowtail

• http://processing.org/exhibition/works/yellowtail/index_link.html

PAGE 9

Example 2-1: Draw an Ellipse

In the editor, type the following:

ellipse(50, 50, 80, 80);

This line of code means “draw an ellipse, with the center 50 pixels overfrom the left and 50 pixels down from the top, with a width and height of80 pixels.” Click the Run button.

If you’ve typed everything correctly, you’ll see the ellipse image above. Ifyou didn’t type it correctly, the Message Area will turn red and complainabout an error. If this happens, make sure that you’ve copied the examplecode exactly: the numbers should be contained within parenthesesand have commas between each of them, and the line should end with asemicolon.

One of the most difficult things about getting started with programmingis that you have to be very specific about the syntax. The Processingsoftware isn’t always smart enough to know what you mean, and can bequite fussy about the placement of punctuation. You’ll get used to it with alittle practice.

ellipse(50, 50, 80, 80);

This line of code means ... Oh, I’ve forgotten already.

Remembering what the parameters mean and the order may be hard?

Easier to declare some variables and use them?

int positionAcross = 50; // x posint positionDown = 50; // y posint ellipseWidth = 80;int ellipseHeight = 80;

ellipse(positionCenter, positionDown, ellipseWidth, ellipseHeight);

More programming examples

• PAGE 10 Ex 2.2– Add 2 variables for white (255) and black (0).– Where do mouseX and mouseY come from?– You can make special variables called CONSTANTS than can only be assigned to once and never

change their value• final int WHITE = 255;• final int BLACK = 0;• final int GREY = WHITE/2;• Try changing their value after first assignment...?• E.g. WHITE = BLACK; // ???

• PAGE 14 top, right-click on orange text in editor and get help!• Chapter 3 Draw

– X and y coordinates– Functions and parameters

• Page 16 Ex 3.1– size()

• Page 16 Ex 3.2– point()– Use the height and width system variables if you like

More programming examples

• Basic shapes– Do up to Ex 3.7

• Drawing order Page 22 Ex 3.9-3.13– Processing programs executed in order– Shapes drawn later are drawn over the top of earlier shapes

• Colour (Page 26)– Gray scales (white = 255, black = 0)– Ex 3.14, Ex 3.15– Page 28 Ex 3.16 Colour (RGB) Additive colour model see next slide

• What’s the difference between fill(255) and fill(255, 255, 255)?

– Try the colour selector• What’s pure red? Pure green? Pure blue? How do you get orange? Yellow? Purple?• Color is a Type in Processing (remember it was invented by Americans so NOT COLOUR)

– color orange = color(255, 132, 0);– fill(orange);

• Try making some fruit and vegetable color variables and displaying them all on the screen• E.g. Orange, tomato, apple, watermelon, grape, banana, etc.

– Ex 3.17 transparency

Can you draw a bowl? Hint: P. 20 arc() functionAnd for your next trick... (Next slide)

Custom shapes Ex 3.18 p.30beginShape() endShape()

Example 3-18: Draw an ArrowThe beginShape() function signals the start of a new shape. The vertex()function is used to define each pair of x- and y-coordinates for the shape.Finally, endShape() is called to signal that the shape is finished.size(480, 120);beginShape();vertex(180, 82);vertex(207, 36);vertex(214, 63);vertex(407, 11);vertex(412, 30);vertex(219, 82);vertex(226, 109);endShape();

OrendShape(CLOSE); // automatically joins the dots

Processing variables Ex 4.3 p.40Processing has a series of special variables to store information about theprogram while it runs. For instance, the width and height of the windoware stored in variables called width and height. These values are set by thesize() function. They can be used to draw elements relative to the size ofthe window, even if the size() line changes.

Example 4-3: Adjust the Size, See What FollowsIn this example, change the parameters to size() to see how it works:

size(480, 120);smooth();line(0, 0, width, height); // Line from (0,0) to (480, 120)line(width, 0, 0, height); // Line from (480, 0) to (0, 120)ellipse(width/2, height/2, 60, 60);

Other special variables keep track of the status of the mouse and keyboardvalues and much more. These are discussed in Chapter 5.

Maths operators p.41In code, symbols like +, –, and * are called operators. When placed betweentwo values, they create an expression. For instance, 5 + 9 and 1024 – 512are both expressions. The operators for the basic math operations are:

+ Addition– Subtraction* Multiplication/ Division= Assignment

Processing has a set of rules to define which operators take precedenceover others, meaning which calculations are made first, second, third,and so on. These rules define the order in which the code is run. A littleknowledge about this goes a long way toward understanding how a shortline of code like this works:

int x = 4 + 4 * 5; // Assign 24 to x

Order of operators

The expression 4 * 5 is evaluated first because multiplication has thehighest priority. Second, 4 is added to the product of 4 * 5 to yield 24.Last, because the assignment operator (the equal symbol) has the lowestprecedence, the value 24 is assigned to the variable x. This is clarified withparentheses, but the result is the same:

int x = 4 + (4 * 5); // Assign 24 to x

If you want to force the addition to happen first, just move the parentheses.Because parentheses have a higher precedence than multiplication, theorder is changed and the calculation is affected:

int x = (4 + 4) * 5; // Assign 40 to x

The order is: Parentheses, Exponents, Multiplication, Division, Addition,Subtraction, where parentheses have the highest priority and subtractionthe lowest.

shortcuts

x++; // This is the same as x = x + 1y--; // This is the same as y = y - 1

x += 10; // This is the same as x = x + 10y -= 15; // This is the same as y = y - 15

Repetition Repetition RepetitionRepetition Repetition Repetition

if p42

If (logical condition){

statement 1;statement 2;etc;

}

If (true) // if true then do everything between the { and } once{

println(“hello”);println(“goodbye”);

}

// { ... } is called a “block” – it’s a bit like a paragraph and contains multiple statements, but is not itself a statement (no ;)

Repetition Repetition RepetitionRepetition Repetition Repetition

while loop

while (logical condition){

statement 1;statement 2;etc;

}

while (true) // if true then keep doing everything between the { and } forever{

println(“hello”);println(“goodbye”);

}

Logical conditions p.44, p.185Relational operators

> Greater than< Less than>= Greater than or equal to<= Less than or equal to== Equal to!= Not equal to

Logical operators

&& Logical AND|| Logical OR! NOT

Examples

if (a >= b && !(c != d)) { ... }while (a == b || b <= c) { ... }

Repetition Repetition RepetitionRepetition Repetition Repetition

for loop p. 43, 44

for (init; logical condition; update){

statement 1;statement 2;etc;

}

for (int i = 0; i < 10; i++) // repeat 10 times (0, 1, 2, 3, 4, 5, 6, 7, 8, 9){

ellipse(10,10,i,i); // the circle gets larger}

Repetition Repetition RepetitionRepetition Repetition Repetitionfor loop c.f. While loop p. 43, 44

// this while loop is...int i = 0;while (i < 10){

ellipse(10,10,i,i);i++;

}

// the same as this for loopfor (int i = 0; i < 10; i++) // repeat 10 times (0, 1, 2, 3, 4, 5, 6, 7, 8, 9){

ellipse(10,10,i,i); // the circle gets larger}

Back to the fruit – here’s my attempt

// First define some color variables

color orange = color(255, 132, 0);color redApple = color(255,43, 0);color greenApple = color(45, 211, 34);color grape = color(156,0,255);color watermelon = color(255, 0, 153);color banana = color(255, 247,0);color bowl = color(34,112,211);

// draw some simple fruitsize(1000,500);int xCent = width/2; // start drawing in the middle of the screenint yCent = height/2; // start drawing in the middle of the screen

// watermelon in the middlefill(watermelon);ellipse(xCent,yCent, 200,200);

// Orange - in the middle as well - but in front of watermelonfill(orange);ellipse(xCent,yCent,120,120);

// red apple on the right sidefill(redApple);ellipse(xCent+100,yCent,100,100);

// green apple on the left sidefill(greenApple);ellipse(xCent-120,yCent,100,100);

// I used beginShape() for banana// my "abstract" bananafill(banana);beginShape();int x = xCent;int y = yCent;vertex(x,y);vertex(x+15,y-10);vertex(x-10,y-80);vertex(x-10,y-120);vertex(x,y-170);vertex(x+20,y-190);vertex(x+10,y-200);vertex(x-10,y-190);// vertex(x,y+200); // surreal version with Banana Splitvertex(x-45,y-170);vertex(x-60,y-130);vertex(x-60,y-80);vertex(x-40,y-20);

endShape(CLOSE); // CLOSE the shape so it's connected

// a grape

// a single grapefill(grape);int grapeLoc = xCent-80;

ellipse(grapeLoc,yCent,30,30);

// a bowl

// bowl - draw last to cover fruit

fill(bowl);arc(xCent,yCent,400,400,0,PI);

// arc is tricky as needs start and end angles in RADIANS!// start “starts” at 0 degrees = “3” o’clock and is measured clockwise// The values PI, QUARTER_PI, HALF_PI, and TWO_PI can be used to replace the radian// values for 180º, 45º, 90º, and 360º. See p.21// Just remember that “A Pizza (full circle) is worth TWO PIs”

// a bunch of grapes// now draw a few more grapes to make a bunch all around the same location as the 1st grape// note this goes before drawing the bowl

boolean grapesEverywhere = false; // if false then grapes stay in bowl, else if false they spread

int xRange = 25; // how far from centre of bunch in x directionint yRange = 50; // how far from centre of bunch in y direction

// surreal version with grapes everywhere! Actually not everywhere, due to offset of initial graph position, whoops.if (grapesEverywhere){

xRange = xCent;yRange = yCent;

}

// a bunch of grapes// How many grapes would fill the screen if drawn everywhere? 10,000 seems to do the trick.

for (int j=0; j < 100; j++){

float rx = random(-xRange,xRange);float ry = random(-yRange,yRange);// change colour of each grapefloat rRed = random(50,255);float rGreen = 0;float rBlue = random(50,255);

fill(rRed, rGreen, rBlue);ellipse(grapeLoc+rx,yCent+ry,30,30);

}

boolean grapesEverywhere = true; // if false then grapes stay in bowl, else if false they spread

10,000 grapesWhoops, grey on the right – calculation for spread of grapes not exactly correct as the middle of the bunch was not in the centre of the screen.

// a bunch of grapesExercises for next week will cover what we did today in more detail

And if you like, try out my (or your) bowl of fruit and make a surreal version – use different colours and shapes and positions etc.