Computation as an Expressive

Medium

Lab 3: Shapes, Rockets, Mice,

Mice,
Cookies and Random Stuff

Joshua Cuneo
 Agenda
g Time

„ Project 1
„ Array Loops, PImage, Fonts
„ D
Drawing
i polygons
l
„ Trigonometry review
„ random()
„ Methods and objects
„ Mouse functions (again)
„ Assignment 2!
 Project 1

From the central heartbeat of the central

processor, to the obsessive timestamping of files
andd bl
blog entries, to ever present clock
l k displays,
d 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. seasons), but smaller temporal scales
should also be displayed (or be available to be
displayed, perhaps as a function of user input).
You may make use of mouse input if you wish.
wish
 Debugging
gg g Tips
p
„ Commenting
„ println()
„ Tracingg
„ Common errors
„ Semicolons
„ Parentheses and braces
„ Speling erorz
„ Program arrangement
„ Variable declaration
„ setup()
t ()
„ draw()
 Array Loops

90 150 30
0 1 2

for(int i = 0; i < numbers.length; i++)

{
numbers[i] = 3;
}
 Array Loops

90 150 30
0 1 2

for(int i = 0; i < numbers.length; i++)

{
numbers[i] = 3;
}
 Array Loops

3 150 30
0 1 2

for(int i = 0; i < numbers.length; i++)

{
numbers[i] = 3;
}
 Array Loops

3 150 30
0 1 2

for(int i = 0; i < numbers.length; i++)

{
numbers[i] = 3;
}
 Array Loops

3 3 30
0 1 2

for(int i = 0; i < numbers.length; i++)

{
numbers[i] = 3;
}
 Array Loops

3 3 30
0 1 2

for(int i = 0; i < numbers.length; i++)

{
numbers[i] = 3;
}
 Array Loops

3 3 3
0 1 2

for(int i = 0; i < numbers.length; i++)

{
numbers[i] = 3;
}
 PImage

1. Bring the image into Processing

PI
PImage startrek
t t k = loadImage("startrek.jpg");
l dI (" t t k j ")

2. Load the image to our canvas

image(startrek, 0, 0);
 Fonts
„ Create a font on the fly
PFont verdana = createFont("Verdana”, 32);

„ OR Import a .vlw file

Pfont tng = loadFont("tng-32.vlw");

„ Use the font

textFont(tng);
text("To Boldly Go", 10, 30);
Getting Ready for Assignment 2
 Building
B ilding Polygons
Pol gons
„ beginShape(POLYGON);
„ Start the polygon
„ vertex(x, y);
„ One per vertex point
„ endShape();
„ Finish the polygon

…
 Building
B ilding Polygons
Pol gons

„ beginShape(POLYGON);
„ vertex(10
vertex( 10, 50
10, 50);
);
 Building
B ilding Polygons
Pol gons

„ vertex(20,,
vertex(20 10);
10);
„ vertex(30
vertex( 30,
30, 40);
40 );
„ vertex(80
vertex( 80,, 60);
60);
„ vertex(40
vertex(
t (40
(40,
40, 80));
80);
80 )
 Building
B ilding Polygons
Pol gons

„ endShape();
 Let’s Use A
Arrays
a s
int[] xvals = {10, 20, 30, 80, 40};
int[] yvals = {50, 10, 40, 60, 80};

beginShape(POLYGON);

for(int i = 0; i < xvals.length;

xvals length; i++)
{
vertex(xvals[i], yvals[i]);
}

endShape();
WTF?
 Trig 101

sin(Θ) = opp
h
hyp h
hyp
opp cos(Θ) = adj
hyp
Θ
tan(Θ) = opp
adj
adj
dj
So What?
So What?
 Working Example
cos(Θ) = adj
hyp
5 feet
cos(60°) = adj
5

60°
60 5*cos(60°)
5 cos(60 ) = adj

adj = 2.5
25
???
 Working Example

int x = 0;
Int y = 0;
5 feet
void draw()
()
{
x = x + 5*cos(60);
y = y + 5
5*sin(60);
sin(60);
60° }
 A Pox on Radians

int x = 0;
Int y = 0;

void draw()
()
{
x = x + 5*cos(radians(60));
y = y + 5
5*sin(radians(60));
sin(radians(60));
}
 random()
float r = random(0
random(0, 5);

0
0.5
2.3
2.776
3.7543929
4.99999999999999
99999999999999…
…
 random()
int r = int(random(
int(random(0
0, 5));

0
3
2
5
4
5
 random()

Name some uses

 Methods,
Methods aka Functions
F nctions
„ M th d declaration
Method d l ti parameter

void vendingMachine( int coinCents )

void means
doesn't return {
anything println("You inserted "+coinCents+" cents.");
}

„ Method call
argument
int quarter = 25;
g (q );
vendingMachine(quarter);
Classes
Classes aka Blueprints
Classes, Bl ep ints

class MyToy
{
// fields
fi ld (class
( l variables)
i bl )
// methods (class functions)
}
 Fields and Methods
class Cookie numberChips
fields
{
int numberChips; drawCookie()

Cookie(int chips) constructor

{
((one kind
ki d
numberChips = chips; of method)
}

void drawCookie()
{
methods
ellipse(numberChips, numberChips, 10, 10);
}
}
 Objects: Blueprint Instances
class Cookie
{ numberChips
int numberChips;

drawCookie()
Cookie(int chips)
{
numberChips = chips;
}

void
id drawCookie()
d C ki ()
20 40
{
ellipse(numberChips, numberChips, 10, 10); drawCookie() drawCookie()
}
}
chocChip
h Chi d bl Ch Chi
doubleChocChip

Cookie chocChip = new Cookie(20);

Cookie doubleChocChip = new Cookie(40);
 Objects
numberChips

class Cookie ()
drawCookie()
{
int numberChips;

Cookie(int chips)
{ 20 40
numberChips = chips;
} drawCookie() drawCookie()
void
id drawCookie()
d C ki ()
{ chocChip doubleChocChip
ellipse(numberChips, numberChips, 10, 10);
}
}

void draw()
{
chocChip drawCookie();
chocChip.drawCookie();
doubleChocChip.drawCookie();
}
Subclasses
S bclasses
 Subclasses
class ChocolateCookie extends Cookie
{ numberChips
int amtChocolate;
drawCookie()

ChocolateCookie(int amt)
{
super(amt);
amtChocolate = amt; amtChocolate
}
drawCookie()
void drawCookie()
{
fill(188, 143, 143);
super.drawCookie();
}
}
 OOP
OOP, we
we'llll do it again.
again
The more the
merrier!
„ Programming MUHAHAHA!
practices
„ Methods
„ Classes
 Mice
„ mouseButton „ mouseX
„ mouseClicked() „ mouseY
„ mouseDragged() „ pmouseX
„ mouseMoved()() „ pMouseY
p
„ mousePressed()
„ mousePressed
„ mouseReleased()
 Assignment 2!
„ A2-01
01:: Using beginShape() and endShape(),
endShape() create a composition with five or more
vertices.
„ A2-02
02:: Using beginShape() and endShape(), create a composition with ten or more vertices.
„ A2-03
03:: Create an image different from A2A2-02,
02, but using the same vertex data.
„ A2-04
04:: Write a function with one parameter and demonstrate it visually.
visually
„ A2-05
05:: Write a function for drawing triangles and visually demonstrate its flexibility.
„ A2-06
06:: Write a function with three or more parameters and visually demonstrate its
flexibility.
„ A2-07
07:: Create a dynamic animation using the cos() function as a generator for motion.
motion
„ A2-08
08:: Create a dynamic animation using the cos() and sin() function as a generator for
motion.
„ A2-09
09:: Move two visual elements across the screen using the random() function as a
generator of movement. Give each element a unique nonlinear motion.
„ A2-10
10:: Create an event that begins when the mouse is pressed and ends when the mouse
is released.
„ A2-11
11:: Create a responsive image that behaves differently when the mouse is moving and
the mouse is dragging.
„ A2-12
12:: Create a button that changes the color of the background when it is clicked.
„ A2-13
13:: Program your moving elements from A2 A2-09 but use classes to represent the two
visual elements.
„ A2-14
14:: Create a subclass of one of the asteroids classes that adds a new capability. Some
examples of what you could do: create a subclass of Rocket (or ArmedRocket) that shoots
flame when the thrusters are fired and/or plays a sound when thrusters are fired, create a
subclass of Asteroid that know when it's been hit (instead of doing this test in draw()),
create a subclass of Asteroid that splits into two smaller Asteroids when it's hit.