Author: danne

You will be presenting your final projects on the Slack channel and via Zoom on May 9th.

Please fill out the course evaluation. This is particularly import to learn how the shift to distance learning effected your educational experience.

Lecture
This week we will be looking at how computers see. We will go over early years for computer vision, using web cameras and background subtraction, talking about fiducial markers, augmented reality, facial detection and 3D space. We will then go over how we can do this in Processing. There is much we can do with the Processing library as is, but there are a number of amazing libraries for Open CV, Kinect, Leap Motion, QR Codes and Facial Detection (FaceOSC). Unfortunately most of this can only be done in the Java version of Processing, but we can still do some interesting stuff in p5js as well.

Suggested Reading: Making Things See by Greg Borenstein
Spatial Media Class Syllabus and Examples (OpenFrameworks)

Lecture PDF

Video Tutorials

Coding Examples
Capture Webcam Feed
Get Pixel Color
Get Pixel Brightness (Ellipse)
Get Pixel Brightness (Emoji)
Photobooth
CV Examples by Kyle McDonald

Homework
Finish up your final project and be prepared to present it in Slack class next week!

Lecture
This week we will be focusing on audio. We will go over the basics of how sound works, look at examples of audio visualizers using FFT as well as some good examples that use audio samples and frequencies to create interactive musical experiences. Finally we will then learn how to do all this in p5js using the p5 sound library which comes standard with p5.

Lecture PDF

Example Audio Files

Video Tutorials

Example Code
Load Audio
Instrument
FFT Analysis
FFT Averages
Oscillator
Mic and Audio In
Audio Visualization Example

Homework
1. Read through the p5 sound library documentation and play around with audio and p5js.
2. Continue working on your final project. Again, it must use the draw loop and incorporate motion, interaction and/or audio. Start playing around with the code for your final. Our next class will be an in class work session and our group Slack conversation will be used as feedback on your progress and questions around your code.

Helpful Links
FFT Analysis
Robert Hodgin
Patatap
Mikutap
Listen to Wikipedia
Alexander Chen
Beet Box
RFID Beat Box
Light Hum
American Stringed Instruments

Lecture
There will first be a short lecture on the history of 3D as well as an overview of different 3D methods and tools. Then we will focus on how to implement 3D using p5js functions.

Lecture PDF

Download Globe Texture

Im a little teapot…

Coding Video Tutorial

Example Code
WEBGL
Lighting
Camera
Textures
Loading 3D OBJ Files

Homework
1. Suggested reading: pages 525 – 544 in Processing, by Casey Reas and Ben Fry.
2. Play around with 3D in p5js. Share your creative 3D project in the Slack channel next week.
3. Come up with an idea for your final project and be prepared to share it on Slack next week. It must use the draw loop and incorporate motion, interaction and/or audio, beyond that the concept can be anything you want it to be.
4. Watch videos and review lecture slides for Week 12.

Lecture
Today we will be continuing with the theme of interaction, but this week focusing on the keys and click events. We will also look back on how the keyboard came to be. Then we will shift gears and focus on digital image import to p5js as well as the difference between film and digital photography.

Lecture PDF

Example Images

Coding Video Tutorials

Coding Examples (Keyboard)
keyTyped
keyIsPressed and keyCode
keyCode and mapping
Key Coded applied to motion

Coding Examples (Images)
loadImage
Image Filters
Get Pixel Data
Pointillism
Image Sequence/Animation

Homework
1. Suggested Reading: pages 95 – 97, 223 – 235, 315 – 324 and 337 – 364 in Processing, by Casey Reas and Ben Fry.
2. Use what we learned in class to produce an interactive piece using images and either keyboard input or mouse input.
3. Share your sketch on Slack next class period.
4. Watch videos and review lecture slides for Week 11.

Lecture
Today we will talk about the history of drawing from the cave paintings from 41,000 years ago to the personal computer and all the other tools in between. We will then talk about how to use the mouse and code to produce your own drawing tools and how to interact with your p5js sketches with the cursor.

Lecture PDF

Coding Video Tutorial

Coding Examples
Mouse X / Mouse Y
Offset
P Mouse X / P Mouse Y
Mapping Mouse Location
Hover State
Mouse Pressed
Mouse Constrain
Mouse Distance
Mouse Easing
Mouse Speed
Save on Key Pressed
GUI with Buttons
datGUI Interface

Homework
1. Suggested: Read pages 205 – 213 and 237 – 243 in Processing, by Casey Reas and Ben Fry.
2. Create your own custom design software. Have at least two buttons to switch between two features. Different brush styles, colors, movements, etc. Use either the GUI with Buttons example of the datGUI Interface example as reference. Draw and export an example sketch to show the class next week.
3. Share your sketch and drawing on Slack next class period.
4. Watch the videos and go through the lecture slides for Week 10 and come to class next week with questions.

Lecture
Today we will be discussing Rune Madsens blog post on the future of the designer and how the designer is becoming the “Meta-Designer”. After our discussion, we will start are transition from static design to motion graphics. We will first go over a brief history of motion graphics and animation from thaumatropes to computer animation, then look at a few code in motion projects and finally go over how to move forms using Processing.

Lecture PDF

Coding Video Tutorial

Coding Examples
Draw Function and Motion
Motion X-Axis
Bounce
Gravity
Bounce X and Y Axis
Bounce X and Y Axis – Class and Array
Clock Example

In Class Assignments
Design an abstract clock with hours, minutes and seconds using p5js.

Homework
1. Suggested Reading: pages 173 – 178 and 245 – 249 in Processing by Casey Reas and Ben Fry.
2. Choose one of your static designs from the last 7 weeks and use the draw loop to add some motion to it.
3. Add your sketch to the Slack channel during our next class time.
4. Go through the lecture slides for Week 9 and watch the video. Come to class next week with any questions about mouse interactions and creating brushes.

Midterm Presentations Today!

Homework

1. Finish you midterm and share it on our Slack channel.
2. Read Rune Madsens write up on what the role of the designer is turning into, the meta-designer: http://runemadsen.com/blog/on-meta-design-and-algorithmic-design-systems/
3. Go through the slides and watch the video for Week 8. Come to Slack class next week with questions or thoughts.
4. Optional questionnaire: Mid Term Questionnaire

Lecture
Today we will be talking about how to visualize data sets using p5js and why code is better than Illustrator. We will also cover how to find and collect data, how to clean and analyze data and the ethics when visualizing data. We will then look at good examples of data visualizations and discuss some of the bad habits that designers do when visualizing data. We will also look at projects that use sound, touch and taste to represent data. Lastly we will look at some artists who use data as a medium to create their artwork.

Lecture Video

Coding Examples
Bar Chart
Line Chart
Scatter Chart
Pie Chart
Loading CSV Files
Word Cloud CSV
Weather API

Helpful Links
Map Function Tutorial
Danne’s Information Design Class
Data Viz Catalogue
Data Viz Project
Visually Study of Two Quantities
Hint.fm Wind Project
Out of Sight, Out of Mind
NYTimes Fractions of a Second
Listen to Wikipedia
OpenWeather API

Lecture PDF

Example Data

Example Array:
var numbers = [ 341,262,274,271,396,380,277,225,384,410,494,294,326,260,322,253,365,292,276,323,438,633,507,295,289,271,293,258,311,316,247,276,281,309,400,332,408,429,525,448,503,474,485,521,575,626,696,341,281,254,262,218,252,211,217,239,273,288,335,317,306,390,333,256,336,327,254,305,341,417,449,258,278,242,248,211,270,275,232,190,236,311,352,344,367,311,368,321,370,368,395,378,442,570,756,319,284,264,333,268,347,311,305,289,322,348,432,265,271,314,364,239,295,298,244,218,271,395,437,252,173,168,201,181,249,245,198,190,244,279,391,324,367,376,521,467,373,432,474,417,523,702,674,365,333,272,249,264,353,328,258,230,380,434,426,272,302,211,291,262,285,270,239,315,349,483,584,325,257,227,227,209,247,230,199,197,205,319,364,330,381,378,464,397,515,536,446,460,552,641,658,341,367,297,346,349,327,351,317,273,415,439,420,299,321,254,304,238,344,304,345,265,454,486,599,310,289,266,227,255,346,309,291,234,260,353,348,320,410,397,489,325,365,398,400,415,499,699,1351,796,415,344,340,324,389,374,338,319,339,278,399,262,352,301,350,331,336,293,311,304,442,553,667,357,306,222,233,259,269,294,274,322,356,419,418,338,509,511,564,407,427,412,543,575,650,912,875,492,548,412,333,423,369,352,312,312,402,420,434,413,372,331,414,348,351,292,310,331,418,560,695,338,312,282,277,298,292,267,242,245,261,291,325,348,450,526,394,379,414,397,360,356,502,677,857,390,395,281,285,310,341,422,359,356,399,371,431,321,425,358,377,364,417,333,256,303,488,610,722,361,343,300,274,332,328,282,268,262,346,355,377,386 ];

Homework
1. Create a poster for your mid term presentation next week. Make sure to use the classes, functions and the programming methods we learned so far this semester. You may design whatever you want, movie poster, book cover, wall paper, wrapping paper, artistic, abstract, etc. HAVE FUN!
2. Be prepared to share your designs and code with the class during our next Slack class time.

---

Methods and Functions Discussed

Data Functions – map(), max(), min(), arc(), sort(), reverse()

Table Class – Table, loadTable(), getRowCount(), getRow(), getNum(), getString(), loadJSON()

Arrays

Lecture
The lecture today will start with an explanation of what functions and classes are and how you can create your own. We will then jump into a basic history of the written word followed by the invention of moveable type and the computer. We will also go over the different types of fonts and how they should be used. We will then look at examples of computational typefaces and more artistic letterforms. Lastly we will be talking about the basics of type in p5js, how to create rule-based typography using code and how to create fonts based on modifying the outlines of existing typefaces using the p5.Fonts class for p5js or the Geomerative library for Processing.

Lecture Video

Coding Examples
Basic Type
Type and Fonts
Textbox
Face Function
Star Function
Simple Class
Rule-Based Type System
Outline-Based Type System

Helpful Links
A Brief History of Title Design
Helvetica Documentary
Metaflop
Lava Sans
Generative Typography Class
Karsten Schmidt Type and Code

Lecture PDF

Example Fonts

In Class
Sketch out a rule-based typeface with a pencil on paper. Take a picture of it. Once you have an idea of what to create, try and make A, B and C in p5js based on the rules you put together. Upload the photo of your sketch as well as the link to the p5js project to Slack.

Homework
1. Option 1: Pick a word and use p5js to design a typeface that represents that word. You can either create a rule-based typeface using simple shapes or use p5.Font to modify an existing typeface. You must use at least one of the following; for loop, if statement, random or noise. Meaning do not do something you can create in Illustrator.
Option 2: Pick your favorite quote or poem and use different type treatments in p5js to create a layout that visually represents the selected quote or poem. You can only use text.
2. Share your project URL on Slack during our next class and be prepared to explain your design.
3. Watch the lecture video for Week 6.

---

Methods, Functions and Libraries Discussed

Simple Text – text(), textFont(), loadFont(), textSize(), textLeading(), textAlign(), textWidth(), textStyle(), p5.Font, textToPoints()

Arrays

Geomerative