MzTEK Programming - Part 2

Think of idea

Break down problem
into tiny steps

Write code for
one step

Run
program

Interactive
Development
Environment (IDE)

Code You’ve Instructions for
Written ? Computer

Compiler Executable Program
+ (e.g. .exe or .app)
Linker
+
Loader

int x;
int y;
int width;
int height;

size(200, 200);

x = 150;
y = 100;
width = 90;
height = 80;

ellipse(x, y, width, height);

int x;
int y;
int width;
ingredients or variables
int height;

size(200, 200);

x = 150;
y = 100;
width = 90;
height = 80;


int x;
int y;
int width;
int height;

size(200, 200);

x = 150;
y = 100; directions or algorithm
width = 90;
height = 80;


data type

int x;
int y;
int width;
int height;

size(200, 200);

x = 150;
width = 90;
height = 80;


data type variable name
int x;
int y;
int width;
int height;

size(200, 200);

x = 150;
width = 90;
height = 80;


DECLARATION VS INITIALISATION
As in a recipe, ingredients
need to be listed at the top
so you know what to buy.

In code, it’s so the compiler
knows how much memory
to reserve. This is called
declaring.

As in a recipe, ingredients
need to be listed at the top
so you know what to buy.

In code, it’s so the compiler
to reserve. This is called
declaring.

int myInt;

Reserve space for
an int

As in a recipe, ingredients We don’t have to know
need to be listed at the top what value will be stored in
so you know what to buy. myInt right away.
In code, it’s so the compiler We can choose a value
to reserve. This is called later. This is called initialising.
declaring.

int myInt;

Reserve space for
an int

As in a recipe, ingredients We don’t have to know
need to be listed at the top what value will be stored in
so you know what to buy. myInt right away.
In code, it’s so the compiler We can choose a value
to reserve. This is called later. This is called initialising.
declaring.

int myInt; myInt = 15;

Reserve space for Store the value 15 in the
an int space reserved for myInt

15

Need to declare before or at the same
time as initialisation.

myInt = 3;
int myInt;

myInt = 3; int myInt;


Can’t use a variable before it is initialised.



int myInt;
myInt = myInt + 7;



int myInt; int myInt = 3;
myInt = myInt + 7; myInt = myInt + 7;

TO CREATE A VARIABLE
1. Decide what the data type should be. Usually the main
decisions are between int, float and char.
float
int
char

to create a float type
float
int
char

float
to create an int type int
char

float
to create a char type char

float
2. Decide on a name for your variable. Remember the rules.

float
float scale;
int redValue;
char finalMark;

float
float scale; you get to choose
int redValue; the name
char finalMark;

float
char finalMark;

3. If you already know what the value of that variable is, then go
ahead and set the value.

float
char finalMark;

ahead and set the value.
float scale = 0.5;
int redValue = 199;
char finalMark = ‘B’;

float
char finalMark;

ahead and set the value. if you don’t know the
float scale = 0.5; value yet, stop at step 2.
int redValue = 199; but remember to end
char finalMark = ‘B’; each line with a ;

EXERCISE
In Processing, draw a purple quadrilateral using the
quad( ) function.

quad(int x1, int y1, int x2, int y2,
int x3, int y3, int x4, int y4)

Use variables to represent corner of the quadrilateral.

int x0 = 20;
int y0 = 20;
int x1 = 30;
int y1 = 50;
int x2 = 150;
int y2 = 50;
int x3 = 160;
int y3 = 20;

size(200, 200);
quad(x0, y0, x1, y1, x2, y2, x3, y3);

int x0 = 20;
int y0 = 20;
int x1 = 30;
int y1 = 50; this is a pain to keep track of
int x2 = 150;
int y2 = 50;
int x3 = 160;
int y3 = 20;

size(200, 200);
quad(x0, y0, x1, y1, x2, y2, x3, y3);

int x0 = 20;
int y0 = 20;
int x1 = 30;
int y1 = 50; this is a pain to keep track of
int x2 = 150;
int y2 = 50;
int x3 = 160; Wouldn’t it be easier to just
int y3 = 20; have two lists, so only two
variable names: “x” and “y”?
size(200, 200);
quad(x0, y0, x1, y1, x2, y2, x3, y3);

What if had a list And a list
called X called Y
X Y

0.) 20 0.) 20

1.) 30 1.) 50

2.)150 2.) 50

3.)160 3.) 20

called X called Y
X Y

0.) 20 0.) 20

1.) 30 1.) 50

2.)150 2.) 50

3.)160 3.) 20
So if we just want the number at
2.) in the X list, we’d type
x[2]

called X called Y
X Y

0.) 20 0.) 20
That’s all an array is:
1.) 30 1.) 50
a list of things, where we don’t have to
name each thing, just the list.
2.)150 2.) 50

3.)160 3.) 20
So if we just want the number at
2.) in the X list, we’d type
x[2]

To create a new list (to declare it):

int[] x = new int[4];

what kind of things are in the list?
i.e. how much space needs to be
reserved for each item




[ ] means the data
type is an array



[ ] means the data
type is an array
what is the name of the list?

reserved for each item how long will the list be?


[ ] means the data
type is an array

To initialise a new list :

x[0] = 20;
x[1] = 30;
x[2] = 150;
x[3] = 160;


what list are you referring to?

x[0] = 20;
x[1] = 30;
x[2] = 150;
x[3] = 160;



x[0] = 20;
x[1] = 30;
x[2] = 150;
x[3] = 160;

which item from the list?


what is the value
x[0] = 20; of that item?
x[1] = 30;
x[2] = 150;
x[3] = 160;

which item from the list?

x[0]

x[1]

x[2]

x[3]


x[0]

x[1] the length of the array and
the data type determine
x[2] how much memory is used

x[3]

You can declare and initialise a new list
at the same time :

int[] x = {20, 30, 150, 160};

at the same time :

int[] x = {20, 30, 150, 160};

at the same time :

int[] x = {20, 30, 150, 160};

[ ] means the data
type is an array

at the same time :
i.e. how much space needs to be what is the value
reserved for each item of each item?

int[] x = {20, 30, 150, 160};

[ ] means the data
type is an array


EXERCISE
In Processing, rewrite this code so that it uses two arrays.

int x0 = 20;
int y0 = 20;
int x1 = 30;
int y1 = 50;
int x2 = 150;
int y2 = 50;
int x3 = 160;
int y3 = 20;

size(200, 200);
quad(x0, y0, x1, y1, x2, y2, x3, y3);

2 tbsp olive oil or sun-dried tomato oil
from the jar 1 tsp dried oregano or a small handful of
fresh leaves, chopped
6 rashers of smoked streaky bacon,
chopped 1 tsp dried thyme or a small handful of
2 large onions, chopped
Drizzle balsamic vinegar
3 garlic cloves, crushed
12-14 sun-dried tomato halves, in oil
1kg/2¼lb lean minced beef
Salt and freshly ground black pepper
2 large glasses of red wine
A good handful of fresh basil leaves, torn
2x400g cans chopped tomatoes into small pieces
1x290g jar antipasti marinated 800g-1kg/1¾-2¼lb dried spaghetti
mushrooms, drained
Lots of freshly grated parmesan, to serve
2 fresh or dried bay leaves

1. Heat the oil in a large, heavy-based saucepan and fry the bacon until golden over a medium heat. Add
the onions and garlic, frying until softened. Increase the heat and add the minced beef. Fry it until it
has browned, breaking down any chunks of meat with a wooden spoon. Pour in the wine and boil until
it has reduced in volume by about a third. Reduce the temperature and stir in the tomatoes, drained
mushrooms, bay leaves, oregano, thyme and balsamic vinegar.
2. Either blitz the sun-dried tomatoes in a small blender with a little of the oil to loosen, or just ﬁnely chop
before adding to the pan. Season well with salt and pepper. Cover with a lid and simmer the
Bolognese sauce over a gentle heat for 1-1½ hours until it's rich and thickened, stirring occasionally.
At the end of the cooking time, stir in the basil and add any extra seasoning if necessary.
3. Remove from the heat to 'settle' while you cook the spaghetti in plenty of boiling salted water (for the
time stated on the packet). Drain and divide between warmed plates. Scatter a little parmesan over the
spaghetti before adding a good ladleful of the Bolognese sauce, ﬁnishing with a scattering of more
cheese and a twist of black
http://www.bbc.co.uk/food/recipes/spaghettibolognese_67868

6 rashers of smoked streaky bacon, We’ve covered how to create
1 tsp dried thyme or a small handful of
chopped
2 large onions, chopped ingredients or variables.
mushrooms, drained


6 rashers of smoked streaky bacon, We’ve covered how to create
1 tsp dried thyme or a small handful of
chopped
2 large onions, chopped ingredients or variables.
mushrooms, drained

Now onto the basics of
how to use those variables.

HOW TO MAKE A DECISION
Once we have some variables, we want to do things with those
variables.

The most basic step is to compare those variables to something
else.

This is done with comparators - questions that can be answered
yes or no (or true or false).

variables.

else.


<

variables.

else.


less than
<

variables.

else.


less than
7 < 4

variables.

else.


less than
7 < 4
FALSE

variables.

else.


>

variables.

else.


greater than
>

variables.

else.


greater than
7 > 4

variables.

else.


greater than
7 > 4
TRUE

OTHER COMPARISONS

greater than or equal to equal to
>= ==
less than or equal to not equal to

<= All of these result
!=
in true or false.

put in a comparison
statement (like < or >)

if ( )
{

}
else {

}

put in a comparison

if ( )
what to do if our comparison
{ statement is true

}
else {

}

put in a comparison

if ( )
{ statement is true

}
else {

}
statement is false

put in a comparison

if ( )
{ statement is true

}
we don’t have to
always have an else
else {
statement, sometimes
you only care if the }
statement is true
statement is false

If something is true, do an action.


If something isn’t true, instead do a
different action.


If the potatoes are too lumpy,
keep mashing.

different action.


keep mashing.

different action.

If the potatoes are not too
lumpy, stop mashing.


keep mashing. We don’t have to test
this twice. We know if
If something isn’t true, instead do a the potatoes are either
different action. too lumpy or not too
lumpy.
If the potatoes are not too
lumpy, stop mashing.

A NOTE ON AXES

When graphing information,
we are used to numbers

A NOTE ON AXES


increasing as we move right

A NOTE ON AXES

and increasing as
we move up

increasing as we move right

A NOTE ON AXES

This is different to how numbers
work with programming graphics.

A NOTE ON AXES
Numbers start in the
upper left corner at the
origin (0, 0)


A NOTE ON AXES
origin (0, 0)


and increase as we move right

A NOTE ON AXES
origin (0, 0)

and increase as we
move down

and increase as we move right

EXERCISE
Create a Processing sketch which draws a green circle if the
mouse is in the top half of the window and changes the circle’s
colour to red if the mouse in the bottom half of the window.
Start with the code below.
void setup() {
// create the window
size(400, 400);
}

void draw() {
// set the colour
fill(10, 10, 255);

// draw the circle
ellipse(mouseX, mouseY, 100, 100);
}

What if we want to use multiple if statements?

int counter;
// some other code...
if (counter < 10) {
if (counter > 0 ) {
counter++;
}
}


If counter is less than 10
and greater than 0, then
int counter; increase counter by 1.
if (counter < 10) {
if (counter > 0 ) {
counter++;
}
}


if (counter < 10) {
if (counter > 0 ) {
counter++;
}
} counter is only increased if
both if statements are true.


if (counter < 10) {
if (counter > 0 ) {
counter++;
}
} counter is only increased if
These are called nested if both if statements are true.
statements, because one is
inside the { } of the other.


int counter;
if (counter > 10) {
counter = 0;
}
if (counter < 0 ) {
}
counter = 0;
}

If counter is greater than 10 or less
than 0, then reset counter to 0.
int counter;
if (counter > 10) {
counter = 0;
}
if (counter < 0 ) {
}
counter = 0;
}

If counter is greater than 10 or less
than 0, then reset counter to 0.
int counter;
if (counter > 10) {
counter = 0;
}
if (counter < 0 ) {
}
counter = 0;
} counter is reset
if either if
statements are true.

BOOLEAN OPERATOR OR

True OR False is

False OR True is

True OR True is

False OR False is

BOOLEAN OPERATOR OR

True OR False is True

False OR True is

True OR True is

False OR False is

BOOLEAN OPERATOR OR


False OR True is True

True OR True is

False OR False is

BOOLEAN OPERATOR OR



True OR True is True

False OR False is

BOOLEAN OPERATOR OR




False OR False is False

BOOLEAN OPERATOR OR


When using OR in
code, type ||

False OR False is False

BOOLEAN OPERATOR AND

True AND False is

False AND True is

True AND True is

False AND False is


True AND False is False

False AND True is

True AND True is

False AND False is



False AND True is False

True AND True is

False AND False is




True AND True is True

False AND False is





False AND False is False



When using OR in
code, type &&

False AND False is False

BOOLEAN OPERATOR NOT

NOT True is

NOT False is


NOT True is False

NOT False is


NOT True is False

NOT False is True


NOT True is False

NOT False is True

When using NOT in
code, type !

EXERCISE
Modify your Processing sketch which draws a green circle if the
mouse is in the top half of the window and changes the circle’s
colour to red if the mouse in the bottom half of the window.

Now using the AND statement, draw
• a green circle in the upper left quadrant of the window,
• a blue circle in the upper right quadrant,
• a red circle in the lower left quadrant,
• and a yellow circle in the lower right quadrant.

LOOPS
There are two ways to
repeat something:
1. Do this N number of
times.
2. Keep doing this until
something else happens.

LOOPS
repeat something:
Repeat this event in
1. Do this N the calendar of
number this
times. many times.

2. Keep doing this until
something else happens.

LOOPS
repeat something:
Repeat this event in
1. Do this N the calendar of
number this
times. many times.

2. Keep doing this event in the
Repeat this until
calendar until a certain
something else occurs.
date happens.

DO THIS N TIMES

int i;
for(i=0; i<4; i++) {

}

DO THIS N TIMES
start with a number, in
this case 0
int i;
for(i=0; i<4; i++) {

}

DO THIS N TIMES
start with a number, in if this statement is
this case 0 true

int i;
for(i=0; i<4; i++) {

}

DO THIS N TIMES
this case 0 true

int i;
for(i=0; i<4; i++) {

}
then do whatever is
written here

DO THIS N TIMES
this case 0 true

int i;
for(i=0; i<4; i++) {

}
when you’ve done what’s
then do whatever is in the { } once, do this, in
written here this case add make i equal
to its current value plus 1

DO THIS N TIMES
true go back to see if the
this case 0 middle statement is still
int i; true
for(i=0; i<4; i++) {

}
when you’ve done what’s
then do whatever is in the { } once, do this, in
written here this case add make i equal
to its current value plus 1

KEEP DOING THIS UNTIL
SOMETHING ELSE HAPPENS

while ( ) {

}

if the statement here is true

while ( ) {

}


while ( ) {

}
then do what is between { } once


while ( ) {
then repeat by checking
the statement again
}
then do what is between { } once

EXERCISE
Write out each iteration of these loops and what the variables
equal at the end of each loop.

int i;
int j = 15; int k = 100;

for (i=0; i<12; i++) while ( k > 0 ) {
{ k = k -10;
j = j * 2 - i; }
}

MzTEK Programming - Part 2

More Related Content

Similar to MzTEK Programming - Part 2

Recently uploaded

MzTEK Programming - Part 2