Computation as an Expressive
Medium
Lab 4: Pretty, Pretty
Pictures
Joshua Cuneo
Fo toda
For today
¼ Checkpoint
Building Blocks
Assignment 2
I
Images +M More Images
I
Accessing Pixels
2D Arrays
Project 2
Checkpoint
Organizing these manipulations
Manipulating stored data Hard-coded
Hard coded
Storing the categorized data
User input
Categorizing the data
Data mouseX
mouseY
Letters: a, B, c, &, (, ! Text boxes
Numbers: 1, 2, 3
Processing
int, float, char
Variables width
Arrays g
height
second()
if random()
for
Arithmetic
Files
Parsing
Drawing
Image files
Text files
Functions Web files
Methods
Classes
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.
In fewer
fe e words...
o ds
<sketchbook
directory>
sketch_name sketch_name.pde
data
some.jpg
PImage
1. Bring the image into Processing
PI
PImage startrek
t t k = l
loadImage("startrek.jpg");
dI (" t t k j ")
2. Load the image to our canvas
image(startrek, 0, 0);
Accessing Pi
Pixels
els
loadPixels();
loadPixels();
pixels[];
updatePixels();
updatePixels ();
Accessing Pixels
0 1 2 3 4
3
Accessing Pixels
0 1 2 3 4
0
0 1 2 3 4
Accessing Pixels
0 1 2 3 4
0 1
0 1 2 3 4 5 6 7 8 9
Accessing Pixels
0 1 2 3 4
0 1 2 3
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
Accessing Pixels
0 1 2 3 4
0 (4, 0) = 4 + 0*5 = 4
(3, 2) = 3 + 2*5 = 13
1
0 1 2 3
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
Accessing Pixels
A
Array Index
I d off pixel
i l (x,
( y))
= x + yy*width
width
Where width = pixel width of the image
Accessing Pi
Pixels
els
PImage
age im = loadImage(“test1.jpg”);
oad age( test .jpg );
// gets color at (3, 2)
color c1 = im.pixels[3 + 2*im.width];
// set our line color so we can draw with this color.
stroke(c1);
Windo vs.
Window s Image
// gives us the color at (3, 2) in the window.
color c2 = pixels[3 + 2*width];
vs
PImage im = loadImage(“test1.jpg”);
// gets color at (3, 2)
color c1 = im.pixels[3 + 2*im.width];
Windo vs.
Window s Image
Window’s pixels: manipulate the canvas
Image’s pixels: manipulate the image
before placement
2D A
Arrays
a s
int[][]
i [][] b
bob
b = new i
int[3][4];
[3][4]
color[][] pixels2d = new color[200][200];
0 1 2 3 4
3
2D to 1D
II’m
m going to make life easy for you
int twoD2oneD(int x, int y, int picWidth)
{
return x + y*picWidth;
y p
}
Translation
T anslation
(0, 0)
beginShape(POLYGON);
g p ( );
for(int i = 0; i < xvals.length; i++) {
vertex(xvals[i], yvals[i]);
}
endShape();
Translation
T anslation
(0, 0)
(10, 10)
translate(10, 10);
Translation
T anslation
(0, 0)
(10, 10)
beginShape(POLYGON);
for(int i = 0; i < xvals.length; i++) {
vertex(xvals[i], yvals[i]);
}
endShape();
Rotation
(0 0)
(0,
rect(10, 10, 50, 50);
Rotation
(0 0)
(0,
float angle = radians(45);
rotate(angle);
Rotation
(0 0)
(0,
rect(10, 10, 50, 50);
Rotation & Translation
T anslation
(0, 0)
translate(35 35);
translate(35,
(35, 35)
Rotation & Translation
T anslation
(0, 0)
rect(-25, -25, 50, 50);
(35, 35)
Rotation
((0,, 0))
float angle = radians(45);
rotate(angle);
(35 35)
(35,
Rotation
(0 0)
(0,
rect(-25, -25, 50, 50);
(35 35)
(35,
W it! How
Wait! H d
do I gett b
backk tto normal?!
l?!
(0, 0)
(35, 35)
P sh & Pop …IN ACTION!
Push
pushMatrix();
translate(35,35);
rotate( radians(45) );
(0, 0)
rect(-25,-25,50,50);
popMatrix();
rect(-25,-25,50,50);
2 2 0 0
(35, 35)
Ho is this useful?
How sef l?
(You don’t want to have to calculate
the angles of every finger, do you?)
Cell
Properties (Variables) Methods
Membrane • Replicate
Reticulum • Process nutrients
Nucleus
• Contract viruses
Ribosome
Rib • Die
Mitochondria
Blood Cell
Properties (Variables) Methods
Everything a cell has • Everything a cell
can do
can do
• Travels through
veins and
capillaries
Red Blood Cell
Properties (Variables) Methods
Everything a blood • Everything a blood
cellll has
h cell can do
cell can do
Mechanism to carry • Exchanges gases
oxygen
yg and carbon with other cells
dioxide gases
White Blood Cell
Properties (Variables) Methods
Everything a blood • Everything a blood
cellll has
h cell can do
cell can do
Mechanism to • Fights off diseases
g
recognize disease and foreign
objects
OOP
If we were programming
programming, Cell
we would program a
Cell,, then a Blood Cell,
Cell Cell,
then a Red Blood Cell
and a White Blood Cell Blood Cell
We would only program
the methods and
properties specific to that
cell level
Red Blood Cell White Blood Cell
Terms
• A red blood cell is a Cell
type of blood cell, which
is a type of cell
• The red blood cell
inherits the blood cell, Blood Cell
which inherits the cell
• The blood cell is the
superclass of the red
blood cell
• The red blood cell is the
subclass of the blood Red Blood Cell White Blood Cell
cell
Terms
The red blood cell is an
object, or template
Each red blood cell in
your veins is an instance
of a red blood cell
object
Here, we have many
instances of red blood
cells and one instance
of a white blood cell
Why Do We Care About OOP?
Computationally faster
Reflects organization in the real world
Easier to read and code
Easier to modify the program
Procedural Object‐oriented
Project 2
The contemporary computer scene is dominated by the graphical user interface
(GUI) For almost every task,
(GUI). task from manipulating text
text, imagery
imagery, sound or video to
configuring a computer's operating system (e.g. control panels), from searching for
and organizing information (e.g. the web) to the process of programming (e.g.
integrated development environments), there are special purpose GUI tools
supporting the task through analogies to embodied interaction with physical objectsobjects.
But no tool is neutral; every tool bears the marks of the historical process of its
creation, literally encoding the biases, dreams, and political realities of its creators,
offering affordances for some interactions while making other interactions difficult or
impossible to perform or even concieve
concieve. While the ability to program does not bring
absolute freedom (you can never step outside of culture, and of course programming
languages are themselves tools embedded in culture), it does open up a region of
free play, allowing the artist to climb up and down the dizzying tower of abstraction
andd encode
d h her own bi
biases, ddreams and d political
liti l realities.
liti Wh
Whatt graphical
hi l ttools
l
would you create? Create your own drawing tool, emphasizing algorithmic
generation/modification/manipulation. Explore the balance of control between the tool
and the person using the tool. The tool should do something different when moving
vs. dragging (moving with the mouse button down). The code for your tool should use
at least one class.
Project 2: Translation
Create an awesome drawing tool
Give the user some control and the
computer some control
Make it do something different with
moving vs. dragging
