Computation as an Expressive

Medium
Lab 2: Kindergarten Cubbies,
Back to the Future and Lego
Mania

Joshua Cuneo
 This Week

„ Assignment 1
„ Arrays
„ Time
„ C ti
Casting
„ Reading code
„ Project 1
 Assignment 1
A1-01:
01: Draw three lines.
A1-02:
02: Draw five lines.
A1-03
03:: Draw three ellipses
ellipses.
A1-04:
04: Control the position of two lines with one variable.
A1-05:
05: Control the position and size of two lines with two variables.
A1-06:
06: Control the properties of two shapes with two variables.
A1-07
07:: Create a simple, regular pattern with six lines.
A1-08:
08: Program your pattern from Assignment 1-07 using while().
A1-09:
09: Draw a layered form with two new loops.
A1-10:
10: Redo Assignment 1-05 using mouseX and mouseY as the variables.
A1-11:
11: Draw two visual elements that each move in relation to the mouse in a
different way.
A1-12:
12: Draw three visual elements that each move in relation to the mouse in a
different way.
A1-13:
13: Move a visual element across the screen. When it disappears off the edge,
move it back into the frame.
A1-14:
14: Draw a visual element that moves in relation to the mouse but with a
different relation when the mouse is pressed.
A1-15:
15: Using if and else, make the mouse perform different actions when in different
parts of the window.
A1-16:
16: Develop a kinetic image which responds to the mouse.
 A Few Reminders

„ We know you are not programmers

„ Don’t get too caught up in syntax
„ The API is your friend
„ Have fun with yyour assignments
g
 Brian Joshua

„ Class format „ Lab format

„ Class grades „ Assignment grades
„ Reading/presentations „ Programming
„ Due dates assignments
„ I love my TA „ I llove my professor
f
Arrays
A a s
 Arrays

Clark Bruce Diana Peter

cubbies
 Arrays

Clark Bruce Diana Peter

cubbies[Bruce]
 Arrays
int[] numbers = new int[3];

0 1 2
OR int[] numbers = {90, 150, 30};
numbers[0] = 90;
numbers[1] = 150;
numbers[2] = 30;

90 150 30
0 1 2
 Arrays
y

Clark Bruce Diana Peter

Clark Bruce Diana Peter

 Arrays

Clark Bruce Diana Peter

*Some exceptions apply

 Why Do We Care?

„ Concise
„ Efficient
„ Loop--able
Loop
 Bubblesort
void bubblesort(int[] input)
{
int temp = -1;
1
for(int i = 0; i < input.length; i++)
{
f (i t j = 0;
for(int 0 j < i
input.length
t l th - 1;
1 j++)
{
if(input[j] > input[j+1])
{
temp = input[j+1];
input[j+1] = input[j];
input[j] = temp;
} //end if
} //end for(j)
} //end for(i)
}
 Processing API

„ append() „ shorten()
„ arrayCopy() „ sort()
„ concat() „ splice()
„ expand() „ subset()
„ reverse()
 Arrays
//Retrieving array values

int a = numbers[0] + numbers[1]; // Sets variable a to 240

int b = numbers[1] + numbers[2]; // Sets variable b to 180

//Changing array size at runtime

String[] sa1 = { "OH ", "NY ", "CA "};

String[] sa2 = append(sa1, "MA ");

println(sa2); // Prints OH, NY, CA, MA

 Time

„ int hour()
„ int minute()
„ int second()
„ int day()
y()
„ int month()
„ int year()
„ long millis()
Time
 Casting

int x = 3;

int y = x/2; //y = 1?????

int x = 3;

float y = (float)x/2; //y = 1.5

void setup()
{

Reading Code
size(400,400);
}

int ellipseSize = 1;

void draw()
{
smooth();
background(0);
stroke(234,98,71);
strokeWeight(10); fill(0); ellipse(200,200,ellipseSize,ellipseSize);

if ((
((mouseXX > 0) && (
(mouseX
X < 400) && (
(mouseY
Y > 0) && (
(mouseY
Y < 200))
{
ellipseSize = ellipseSize + 1;
}
else
{
ellipseSize = ellipseSize - 1;
}

if (ellipseSize < 1)
{
ellipseSize = 1;
}

if (ellipseSize > 400)

{
ellipseSize = 400;
}

}
void setup()
{

Reading Code
size(400,400);
}

int ellipseSize = 1;

void draw()
{
smooth();
background(0);
stroke(234,98,71);
strokeWeight(10); fill(0); ellipse(200,200,ellipseSize,ellipseSize);

if ((
((mouseXX > 0) && (
(mouseX
X < 400) && (
(mouseY
Y > 0) && (
(mouseY
Y < 200))
{
ellipseSize = ellipseSize + 1;
}
else
{
ellipseSize = ellipseSize - 1;
}

if (ellipseSize < 1)
{
ellipseSize = 1;
}

if (ellipseSize > 400)

{
ellipseSize = 400;
}

}
void setup()
{

Reading Code
size(400,400);
}

int ellipseSize = 1;

void draw()
{
smooth();
background(0);
stroke(234,98,71);
strokeWeight(10); fill(0); ellipse(200,200,ellipseSize,ellipseSize);

if ((
((mouseXX > 0) && (
(mouseX
X < 400) && (
(mouseY
Y > 0) && (
(mouseY
Y < 200))
{
ellipseSize = ellipseSize + 1;
}
else
{
ellipseSize = ellipseSize - 1;
}

if (ellipseSize < 1)
{
ellipseSize = 1;
}

if (ellipseSize > 400)

{
ellipseSize = 400;
}

}
void setup()
{

Reading Code
size(400,400);
}

int ellipseSize = 1;

void draw()
{
smooth();
background(0);
stroke(234,98,71);
strokeWeight(10); fill(0); ellipse(200,200,ellipseSize,ellipseSize);

if ((
((mouseXX > 0) && (
(mouseX
X < 400) && (
(mouseY
Y > 0) && (
(mouseY
Y < 200))
{
ellipseSize = ellipseSize + 1;
}
else
{
ellipseSize = ellipseSize - 1;
}

if (ellipseSize < 1)
{
ellipseSize = 1;
}

if (ellipseSize > 400)

{
ellipseSize = 400;
}

}
void setup()
{

Reading Code
size(400,400);
}

int ellipseSize = 1;

void draw()
{
smooth();
background(0);
stroke(234,98,71);
strokeWeight(10); fill(0); ellipse(200,200,ellipseSize,ellipseSize);

if ((
((mouseXX > 0) && (
(mouseX
X < 400) && (
(mouseY
Y > 0) && (
(mouseY
Y < 200))
{
ellipseSize = ellipseSize + 1;
}
else
{
ellipseSize = ellipseSize - 1;
}

if (ellipseSize < 1)
{
ellipseSize = 1;
}

if (ellipseSize > 400)

{
ellipseSize = 400;
}

}
 Reading Code

„ One line at a time

„ Read comments
„ Draw pictures
„ Run pieces of code
„ Go screaming to your TA
 Project 1
From the central heartbeat of the central
processor, to the obsessive timestamping of files
and d blog
bl entries,
i to ever present clock
l k displays,
di l
time is a fundamental feature of computation.
Display the progress of time in a non-
non-traditional
way. It is OK to consider large temporal scales
((e.g.
g seasons),), but smaller temporal
p scales
should also be displayed (or be available to be
displayed, perhaps as a function of user input).
Y may make
You k use off mouse iinputt if you wish.
i h
From Idea to Computation
From Idea to Computation
From Idea to Computation
 From Idea to Computation

1. Create your design

2
2. Break it down into functional components
3. Code each component
4. Fit the
h components together h as you go
5. Modify your idea if it becomes too
difficult
6. Consult yyour friendlyy neighborhood
g TA
 More Useful Tools

„ Pimage
„ beginShape()
b i Sh ()
„ endShape()
„ vertex()
„ stroke()
„ fill()