Monday/Wednesday 4:00-7:00 Hybrid Lab San Francisco
Barney Haynes bhaynes@cca.edu
Lectures and Schematics Folder
Lab Schedule
Due Dates and Grade Breakdown:
Interface Show Saturday May 8
Attendance: Miss 3 classes lose 1 grade point, miss 4 you will not pass.
Assignment | Due Date | Grade Percentage
Participation in class, labs, weekly homework | blog and punctuality | Ongoing | 10%
Artist Report | Ongoing | 5%
Generative Pixels | 2/24 | 15%
//Random Motion Machine | 3/18 | NA
Individual Meetings with Preliminary Proposal | 3/30 and 4/1 | 10%
Prototype 1 | 4/13 | 10%
Prototype 2 | 4/22 | 10%
Final Critique | 5/9 5:00 PM | %20
Interface Show | 5/9 7:00 to 9:30 | 30%
Week 1
Wednesday 1/22
Introduction to the Class, expectations, assignments and grading.
On-going:
Artist Presentations, the how, why, and when.
Some starter links:
Steve Wilson's Links
Creative Applications Network
21st Century Digital Art
Creators Project
Processing Exhibition Gallery
Adafruit Projects Page
p5.js Specific:
Generative Design Web Site
OpenProcessing
Movies: Examples of Student Work
Week 2
Monday 1/27
Movies: A selection of work by practicing artists and designers
Wednesday 1/29
Processing Day One
Reference Videos:
Code Tree
Coordinate System
Class Sketches:
Processing Sketch One
p5.js Version
Static Sketches:
Window
Punctuation
Shapes
Drawing Order
Color: RGB and HSB
Attributes
Processing Sketch Two
p5.js Version
Extra: Un-assigned Variables
Dynamic Sketches
Structure:
Code Blocks
Loops
void setup()
void draw()
Variables:
System Variables:
Variables
Drawing
lines
ellipses
Saving images of your sketch
Sketch Three Inverting Numbers
p5.js Version
Syntax:
() parentheses
; semicolon
= (assign)
Environment:
size();
p5.js createCanvas();
Shapes:
line();
rect();
ellipse();
Color:
background();
stroke();
fill();
noFill();
noStroke();
Attributes:
strokeWeight();
Dynamic Sketches
Debugging:
println();
p5.js
print();
Structure:
void setup()
void draw()
p5.js
function setup()
function draw()
System Variables:
mouseX
mouseY
pmouseX
pmouseY
Variables:
int
float
String (note the String Variable is capitalized)
p5.js Variables
let
var (Doesn't have a reference page)
const
Variables do not have a type in p5.js. Use let (or the older syntax var) instead of float, int, double, long, char, String, Array, etc. You do not need to specify return types or parameter types for functions.
Week 3
Monday 2/3
Processing Day Two
Mouse_Key_Contolled_Draw_S20
incrementingDecrementing_S20
if_ElseIf_Else_S20
BouncingEllipse_S20
millisDelay_S20
p5.js
mouseAndKeyDraw_S20
incrementingDecrementing_S20
if_ElseIf_Else_S20
BouncingEllipse_S20
millisDelay_S20
Generating Numbers
+=
++
-=
--
Making Decisions or Conditionals:
if()
else if()
else
Logical Operators
&& || !=
Using Conditional for timing
Using the mills() function
p5.js using the setTimeout function
saveFrame()
p5.js save()
Incrementing (x = x + speedX)
Calculations
dist()
Making Decisions (forking paths):
if()
else if
== (equality)
|| (Logical OR)
Wednesday 2/5
Processing Day Three
Sketches
randomWalk_S20
randomLines_S20
imageSequencer_S20
randomImageSequencer_S20
p5.js
randomWalk_S20
randomLines_S20
imageSequencer_S20 randomImageSequencer_S20
Functions:
Random
random()
Image:
PImage
p5.js (Use let instead of PImage)
loadImage()
image()
Week 4
Monday 2/10
Artist Presentations
Vrinda
Jay
Processing Day Four
Generating noise fueled ellipses across the screen:
noise()
Sketches:
EllipseFun_S20
noiseDouble_S20
p5.js
EllipseFun_S20
noiseDouble_S20
Wednesday 2/12
Artist Presentations
Dayeon
Yi
Processing Day Five:
Generating Motion:
firstLerp_S20
millisLerp_S20
dementedFlowers_S20
atan2Ex_20
p5.js
firstLerp_S20
millisLerp_S20
dementedFlowers_S20
atan2Ex_20
Implementing map() to map one range of numbers to another range of numbers
Functions:
Calculations:
lerp()
sin();
cos();
map();
atan2();
Transformation
translate()
rotate()
Homework:
Work on the Generative Pixels Assignment
Week 5
Monday 2/17
Processing Day Six
Transformations (continued)
scale()
pushMatrix()
popMatrix()
for() loops and iteration
Arrays
Sketches
basicForLoop_S20
heartImageArray_S20
sphereNoiseyArray_S20
sphereNoiseySetColorArray_S20
sharkBang_S20
p5.js
basicForLoop_S20
heartImageArray_S20 sphereNoiseyArray_S20
sharkBang_S20
Wednesday 2/19
Artist Presentations
Yuxin
Ron
Sick
Work on the Generative Pixels Assignment
Week 6
Monday 2/24
Workday: Generative Pixels
Wednesday 2/26
GENERATIVE PIXELS CRITIQUE
Week 7
Monday 3/2
Artist Presentations
Richard
Rahul
Arduino Day One:
Intro to Arduino Arduino tour Board Layout
pinMode()
Serial.begin()
Serial.println()
digitalWrite()
HIGH | LOW
delay()
random()
Sketches and Schematics
Arduino Day One Folder
Wednesday 3/4
Arduino Day Two
analogRead()
analogWrite()
constrain()
Sketches and Schematics
Arduino Day Two Folder
Tom Slick
Week 8
Monday 3/9
This was the plan until I got sick.
I'm including this for your information. It is not an assignment, it is an option.
Sketches and Schematics
Arduino Day Three Folder
Artist Presentations
INTERFACE: Processing to Arduino to Processing
Serial.parseInt()
Wednesday 3/11
Artist Presentations
El
Work day for Random Motion Machine Project
Week 9
Monday 3/16
Shelter at Home
Wednesday 3/18
Shelter at Home
RANDOM MOTION MACHINE CRITIQUE Cancelled
Spring Break 3/23 - 3/27
Week 10
Monday 3/30
Discuss the Interface show vis a vie COVID-19
Interface Show expectations
More Inspriration
Open Processing
Generative Art
p5.js for Processing users
p5 web editor = https://editor.p5js.org/
Porting Processing sketches to p5.js
createCanvas(); instead of size();
function instead of void For instance; function setup()
function draw()
Variable names and scope
let
var
const
difference between var and let
JavaScript doesn't always load things synchronously.Use the preload() function for loading photos or other data into your sketch.
fullscreen() mode (Works with Brave or Chrome)
Example
Wednesday 4/1
p5.js
Potential topics:
Working with the DOM
How to showcase your projects using your CCA server.
FTP settings:
CCA web hosting
preload()
Week 11
Monday 4/6 Individual Meetings Final Project Proposal Guidelines.
4:00 Ron
4:30 Lu
5:00 Diane
5:30 - break -
6:00 Vrinda
6:30 Herman
Wednesday 4/8
Individual Meetings
4:00 Jay
4:30 Yi
5:00 Yuxin
5:30 - break -
6:00 Rich
6:30 Rahul
Week 12
Monday 4/13
Lab
Lab Schedule
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
Wednesday 4/15
Lab
Lab Schedule
Week 13
Monday 4/20
Lab
Lab Schedule
Wednesday 4/22
Prototyping Assignment 1 Due
Lab
Lab Schedule
Week 14
Monday 4/27
Lab Schedule
Lab
Wednesday 4/29
Lab Schedule
Prototyping Assignment 2 Due
Lab
Week 15
Monday 5/4
Lab Schedule
Lab
Wednesday 5/6
Final Critique
upload and launch projects
Friday 5/8
ON-LINE
INTERFACE SHOW!!! 7:00PM to 9:30PM
