Introduction to programming - class 3

Introduction to Programming
Class 3
Paul Brebner

Revision
• How far did you get last time?
• Processing “Exhibition” examples
– Yellowtail
• http://processing.org/exhibition/works/yellowtail/inde
x_link.html

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 over
from the left and 50 pixels down from the top, with a width and height of
80 pixels.” Click the Run button.
If you’ve typed everything correctly, you’ll see the ellipse image above. If
you didn’t type it correctly, the Message Area will turn red and complain
about an error. If this happens, make sure that you’ve copied the example
code exactly: the numbers should be contained within parentheses
and have commas between each of them, and the line should end with a
semicolon.
One of the most difficult things about getting started with programming
is that you have to be very specific about the syntax. The Processing
software isn’t always smart enough to know what you mean, and can be
quite fussy about the placement of punctuation. You’ll get used to it with a
little 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 pos
int positionDown = 50; // y pos
int 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() function
And for your next trick... (Next slide)

Custom shapes Ex 3.18 p.30
beginShape() endShape()
Example 3-18: Draw an Arrow
The 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();
Or
endShape(CLOSE); // automatically joins the dots

Processing variables Ex 4.3 p.40
Processing has a series of special variables to store information about the
program while it runs. For instance, the width and height of the window
are stored in variables called width and height. These values are set by the
size() function. They can be used to draw elements relative to the size of
the window, even if the size() line changes.
Example 4-3: Adjust the Size, See What Follows
In 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 keyboard
values and much more. These are discussed in Chapter 5.

Maths operators p.41
In code, symbols like +, –, and * are called operators. When placed between
two values, they create an expression. For instance, 5 + 9 and 1024 – 512
are 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 precedence
over others, meaning which calculations are made first, second, third,
and so on. These rules define the order in which the code is run. A little
knowledge about this goes a long way toward understanding how a short
line 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 the
highest priority. Second, 4 is added to the product of 4 * 5 to yield 24.
Last, because the assignment operator (the equal symbol) has the lowest
precedence, the value 24 is assigned to the variable x. This is clarified with
parentheses, 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, the
order 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 subtraction
the lowest.

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

Repetition 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 ;)

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.185
Relational 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) { ... }

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
}

for 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 loop
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
}

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 fruit
size(1000,500);
int xCent = width/2; // start drawing in the middle of the screen
int yCent = height/2; // start drawing in the middle of the screen
// watermelon in the middle
fill(watermelon);
ellipse(xCent,yCent, 200,200);
// Orange - in the middle as well - but in front of watermelon
fill(orange);
ellipse(xCent,yCent,120,120);
// red apple on the right side
fill(redApple);
ellipse(xCent+100,yCent,100,100);
// green apple on the left side
fill(greenApple);
ellipse(xCent-120,yCent,100,100);

// I used beginShape() for banana
// my "abstract" banana
fill(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 Split
vertex(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 grape
fill(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 direction
int 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;
}

// 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 grape
float 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 grapes
Whoops, 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.

Exercises 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.

Introduction to programming - class 3

Introduction to programming - class 3

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Introduction to programming - class 3

Similar to Introduction to programming - class 3 (20)

More from Paul Brebner

More from Paul Brebner (20)

Recently uploaded

Recently uploaded (20)

Introduction to programming - class 3