Calendar

Week 1: 1/14, 1/16
Individual Introductions

Teacher intro (including example works)
Overview, Why code?
How-to for this class (taking notes, focus, goals).
Learning resources (videos, book, reference)
Responsibilities (yours and mine)

p5.js, JavaScript, p5 web editor/environment
why p5 instead of Processing?
Hello, World!
code editor/preview/save/auto-refresh/naming/stop/play
setup() and draw()
first interactive program using rect and mouseX/mouseY

let’s now back up and look at:
2D drawing primitives (point, line, rect, ellipse, etc)
grid coordinates (0,0 at top left)
importance of statement order within draw()
basics of digital color (grayscale, rgb, alpha/opacity)
fill(), stroke(), noStroke()
code comments w/ // or /* */
self portrait exercise (screencap and post image/link to blog)

HOMEWORK for WEDNESDAY:
Shiffman/CodingTrain Videos–> 1.1-1.6, 2.1, 2.2, 3.1
Read Syllabus

discuss syllabus (including about using code from others)
built-in variables (e.g. mouseX, mouseY, width, height)
interaction w/ built-in variables
custom variables using let (for ANIMATION)
operators
conditionals (if, else)
more built-in vars (mouseIsPressed, keyIsPressed/key/keyCode,touchIsDown)
conditionals hidden area exercise (post link on blog)

HOMEWORK for MONDAY:
Shiffman/CodingTrain Videos–> rest of 3, all of 4 and 5

Week 2: 1/23 
review:
variables: let, naming, initializing
required functions setup(), draw()
conditional logic w/ if and else, and operators like ||
bouncing rect

new:
bouncing rect w/ changing xJump
add a bit of randomness to rect x/y

loops using for (print 1-10, line of rect)
nested for loops
add random color

Homework:
– do you own bouncing rect variation
– do your own nested for loop grid array
– make it look different than ours just by tweaking things (e.g. colors, shapes, strokes, fills, background, speeds, have it change colors at every bounce, etc.)
– embed both to your blog along w/ links to code (see instructions and example)

– optional–> start from scratch for each one! IOW, don’t start from my code!
– optional–> make the colors happen according to some logic — such as darker to brighter across x!
– optional–> make a new third sketch that combines both ideas  (bouncing rect w/ grid (e.g. draw the grid then the rect on top?)

Week 3: 1/28, 1/30
bouncing rect test OMG (create a program that bounces a rect around on the screen. use conditional logic and custom variables to control the bounce)

map() –> mapping one set of numbers to another (using mouseX/Y)
colorMode(HSB) vs colorMode(RGB) (w/ a little Photoshop color mode translation demo)

(1/30 was snow day for -50 windchill!) so, instead–> HOMEWORK!


Week 4: 2/4, 2/6

functions and custom functions! 
defining, calling, naming (camelCase)
modularity and reusability
example: drawLines() and drawRects(), w/ if, else, mouseX to control them

custom functions with parameters (in definition) and arguments (in call)
example: howdy()

custom shapes with beginShape() and endShape()
translate() and rotate()
push() and pop()
custom functions that build custom shapes

In-class Exercise:
create an animated shape drawing program: 
using a custom function w/ parameters –>
in that function, use translate(), rotate(), angleMode(DEGREES), push(), and pop() (in addition to other techniques we’ve learned, such as custom variables and conditional logic with if/else) to animate a custom shape so that your program makes a drawing over time.
post an embed and link to your blog. 
bonus goal: use more than one shape using more than one function
bonus goal: use mouseX/mouseY and map() to control some aspect of the shapes!
optional: capture and post to your Instagram

Wednesday:

review:

functions

  • defining
  • calling
  • naming
  • parameters

translate/rotate
push/pop

new:

arrays! — containers of more than one thing in a single variable

  • hold strings, or numbers, or soon, complex objects of our own
  • indexing / accessing elements in an array
  • declaring array w/ initialization vs declaring an empty array and adding w/ push()

arrays w/ loops — iterating through arrays with for() and array.length

interacting w/ the webpage!

  • editing sketch HTML
  • adding <input> in HTML/CSS
  • accessing that input from sketch.js (using CSS classes and p5 select())
  • processing and checking that input (using p5 changed() and value())
  • optional: use a <select> to modify text color

Files generated in class:
https://editor.p5js.org/bengrosser/sketches/fBtPutnIb
https://editor.p5js.org/bengrosser/sketches/n9QFn0lmv
https://editor.p5js.org/bengrosser/sketches/aOr2WmuCR
https://editor.p5js.org/bengrosser/sketches/OYRvkfqQ0


In-class exercise:
Adapt our class demonstration to use an array to hold an increasing amount of inputted data from the user, and then create an algorithm that iterates through that array (with for()) and draws something to the canvas in response. For example, you could collect text using a question like “cat or dog?” (as in our example) and then have it add a cat or dog to the screen (using a custom shape drawing function). Or you could ask for a number and then use that number to say, add that many number of objects to the screen. Additionally, you could add a <select> that modifies some aspect of the sketch.

Homework:

  • Create a second version of the exercise that uses different input and does something different than the one you made in class. Post to blog for Monday.
  • Watch Coding Train videos 6.1, 6.2, 6.3 !!!

Optional extra credit:
Attend Matt Kenyon’s talk at 5:30pm Thursday (KAM 62), and write a substantive response and post to the blog by Monday’s class. In that response, first outline, from that talk, what you would say is the subject of Matt’s work. Then talk about his methods (based on the works he presents in the talk itself). Finally, reflect on it from your own perspective: what do you think about what he’s doing and how he’s doing it? If you complete this I will use it to your best advantage in grading (e.g. erase an absence (if it matters), increase a project grade, etc.

OR:

Attend my gallery conversation with Anita Chan and Amy Powell on Friday at 3pm in the Krannert Art Museum *and* take a look at the Kennedy Browne exhibit before or after and then write up a response to what you heard and post to the blog by Monday’s class.

 

Week 5: 2/11, 2/13

Monday

review:

arrays (concept, declaring, initializing, indexing, push(), array.length, iterating through)

interacting w/ webpage (p5.dom) — editing sketch HTML, adding input tags, using classes and select(), checking w/ changed

new: using a variable to control flow
new: parseInt() to convert strings to numbers

new:
custom objects!! yaaaasssssssss!
class keyword
this keyword

build a Rotator class, a custom object that rotates with its own built-in location, size, shape, and speed

make an array of Rotator objects
use a for loop to iterate through object array

exercise:
Use nested for loops to create a grid of Rotator objects across the canvas. Your rotator objects should have their own speed and we should see at least two different speeds happening at once on the canvas. Your rotator objects should have a custom color so that your objects aren’t all the same color. You can play with fill, stroke, opacity. Use custom shapes if you prefer (IOW you don’t have to draw a rect, could use beginShape()/endShape()).
Optional bonus: let objects have their own/different fill opacities
Optional bonus: have some objects rotate in opposite direction
Optional bonus: use variables so you could easily change size and number of objects (e.g. instead of 10×10 squares, what if you have 20×20?). Can you make the width and height of your object automatically adjust in relation to num?
Optional bonus: use a <select> to allow user input
NOT OPTIONAL: make it aesthetically interesting in some way

 

Wednesday:

Review:
custom objects, class, new, this

Demo:
build a RotatingBouncer class
split update() into update() & show() for easier programmatic control
use conditional logic when creating your objects so they aren’t all based on same parameters
using mouseDragged() combined with array.push() and mouseX/mouseY to enable user driven object creation

Watch:
How to draw with code, interview w/ Casey Reas

Exercise/Homework (due Monday):
Using a RotatingBouncer class, create a sketch that does the following:

  • allows the user to initiate something about your objects . You can use mouseDragged() for the location, but you could use other methods (e.g. a map() with mouseX/mouseY to control color? or width/height? or use the keyboard or a dropdown menu in the HTML?)
  • instead of using indiscriminate random() functions, now start setting ranges for yourself (e.g. probabilities). IOW, confine the randomness more specifically.
  • OPTIONAL: changes over time –> automate with sketch in some way so that the drawing your program makes changes itself over time (in addition to what we already built in such as location and speed). For example, you could add logic to your update() function that makes the boxes get smaller and bigger, smaller and bigger. Or, if you’re feeling adventurous, use  you could give each box its own lifetime by setting up an internal countdown for it and then removing it from the array using array.splice() (e.g. arrayName.splice(i,1) would remove a single item from the array at index i).
    • in other words, don’t only tweak existing values, but *also* add some of your own logic to this code. setup some probability-based if/else, or change something else substantial
  • post embed and link to blog
  • capture w/ QT and upload to social media somewhere, provide link on blog (if possible)

AND read this article from WIRED about Bandersnatch

 

Week 6: 2/18, 2/20

Monday:
Look at example homework submissions.
Watch beginning of this Netflix engineering video on Bandersnatch.
Talk about branching narratives, conditional logic, viewer agency, ui/ux, media construction. 
Watch BANDERSNATCH!!!! While we watch, chart out the conditional logic that you can perceive from it.
Discuss….

For Wednesday:
Start to think about what kind of *system* you might want to assemble for Project 1. IOW, what’s the drawing algorithm you will create, what will it do, how it will it change over time?


Wednesday:
Discuss academic integrity policy
Discuss calendar (including talk next Monday)
Introduce Project 1
Project 1 work
Individual meetings w/ Ben re ideas/plans

Homework:
Read the now-final section on academic integrity on the syllabus
Work on project 1!!


Week 7: 2/25, 2/27

Monday:
how to full-screen your work and hide cursor
Project 1 work / check-in
Eric J Garcia talk?

Wednesday:
Project 1 work / check-in
Post on your blog whatever your current state is today, then duplicate that sketch for further work
Homework: Project 1 version 1 due Monday 3/4!
Discuss requirements for turn-in


Week 8: 3/4, 3/6

Monday:
Project 1 Version 1 DUE!!
Mini-critiques / project presentation in class

Wednesday:
Project 1 version 2 work / check-in
Homework: Project 1 version 2 due on Monday 3/11!


Week 9: 3/11, 3/13

Monday:
Project 1 Version 2 DUE!!
Mini-critiques / project presentation in class

Learn: single- and multi-touch events in p5.js 

Homework for Wednesday: find something online to read about Detroit Becomes Human, read it, and post a link on your blog. For search terms, you might try adding to “Detroit Become Human” the words “race”, “AI”, “equality”, “branching”, etc.

Wednesday:
Play Detroit Become Human at Critical Technology Studies Lab at room 2107 NCSA. (room 2107 is on the far east side of the 2nd floor)

Homework for Monday after break: make a new sketch—or, take an old one—and add touch support using touchMoved, touchEnded, and/or the touches[] array. Bonus: utilize multi-touch –> meaning have something different happen for one finger vs more than one finger. Post a clickable link on the class blog so others can easily try your sketch out on their touch-based devices.


Week 10: 3/18, 3/20
[Spring Break]


Week 11: 3/25, 3/27

Monday:
TOUCH!
Working with touch-based devices such as smartphones and tablets
touchStarted(), touchMoved(), touchEnded(), and the touches` array
Example code from Ben … click here to try on your phone
(code built in class)

Homework (due next Monday) –> create a sketch that utilizes touch events such that it does: 1) something different based on when the touch(es) start, 2) something different when the touch(es) end, and 3) something different based on all the touches using the touches array (e.g. draws something where the touches are, or requires a certain number of simultaneous touches to activate something, or…). I suggest you focus less on complexity when it comes to what is drawn to the screen (this can be simple) and more on the interaction you create using these methods and constraints. In other words, what will your interface—through its mechanisms of touch—”ask” the user to do? For example, if nothing happens on a sketch until eleven fingers are touching the screen, might this challenge the idea of the smartphone as a “personal” device? Or maybe it will preference short touches over long ones? When you post this homework on the blog next Monday, please include a link to the “present” version so we can easily load every sketch on our touch devices.

 

Wednesday:
Guest presentations by Mitchell Oliver and Kathleen Durkin, MFA grads in New Media!


Week 12: 4/1, 4/3
DUE: touch sketch assignment ( see above)
Try out touch sketches

Introduce Project 2 — Software Mirror
Look at some example mirrors and video processing
Getting camera input (using p5.js 0.7.1 instead of 0.7.2)
Using nested for() loops to walk through the camera’s pixels array
Use the color and position data from the camera to create your own drawing in response.

GRADES!!

 

Week 13: 4/8, 4/10

Project 2 DUE
Project 2 Critiques
Introduce Project 4
Discuss Project 4 Proposals (due Wednesday)


Week 14: 4/15, 4/17
Project 4 Work


Week 15: 4/22, 4/24
Project 4 Work and mini crits


Week 16: 4/29, 5/1
Project 4 work and critiques