Homework John Henry 02

ICM Section 02 • Meeting Monday 3:20PM - 5:50PM EST in Room 409

Contents

• Week 1 • Sept 11 • Introduction and Drawing in p5.js
• Week 2 • Sept 18 • Animation with Variables
• Week 3 • Sept 25 • Interaction with Conditionals
• Week 4 • Oct 2 • Repetition with Loops
• Week 5 • Oct 10 • Organization with Functions (Tuesday)
• Week 6 • Oct 16 • More Repetition with Classes
• Week 7 • Oct 23 • The DOM: HTML and CSS
• Weeks 8 - 14 • Media

Contacting John Henry

• Office Hours

Homework Form

Submit all assignments using our homework form

All assignments are due the night before class

Homework Form (Responses)

Sketches from class

Sketches from class

Week 1 • Sept 11 • Introduction and Drawing in p5.js

Week 1 Slides

In class:

• Welcome! and introductions
• Course overview
• What is p5?
• p5 web editor
• p5 functions
• Tips for learning to code
• Syllabus / schedule
• What can we do with creative coding?

Resources

• Week 1 Syllabus Resources

• p5 getting started

• javascript documentation from mozilla

• javascript tutorial from w3 schools

• list of color keywords

Components of a Web Page

• HTML, CSS, JavaScript / p5.js Website Demos | Code

Comparing Java | p5js | plain JavaScript

• Layers of Abstraction

processing Java - storeinput

p5js JavaScript - storinginput

plain JavaScript - Canvas API

Assignment due the night before our next class:

• DO

  • Create a p5 web editor account.

  • Have a place online to document your creative assignments. This could be a website/blog, Notion page, or even a Google document. If you’re not sure what to use, please reach out to me for help.

• WATCH (BEFORE EXERCISES):

  • Coding Train videos 1.1 intro
  • Coding Train videos 1.2 web-editor
  • Coding Train videos 1.3 shapes-drawing
  • Coding Train videos 1.4 color
  • Coding Train videos 1.5 errors
  • Coding Train videos 1.6 comments
    • time: ~1hr 20min

• (OPTIONAL) if you prefer to READ:

  • Learning to Learn (to program) by Paul Curzon

  • First steps - by Allison Parrish

  • Chapters 1-3 of Getting Started with p5.js cover the same material. Log into the NYU network to read it for free

• PRACTICE • Week 1 Worksheet

• CREATE • SELF-PORTRAIT

  • Create a "self" portrait using 2D primitive shapes.

  • Think about what a self-portrait means to you. Is it a depiction of what you look like? A bridge between your private and public regard? Or a collection of your lived experiences?

  • Consult the p5 Reference. Add comments to your code to describe the different parts.

  • Submit your assignment on our homework form.

• WATCH (AFTER EXERCISES):

  • Coding Train Videos 2.1 mouseX-mouseY
  • Coding Train Videos 2.2 define-variables
  • Coding Train Videos 2.3 incrementation
  • Coding Train Videos 2.4 random
  • Coding Train Videos 2.5 map
    • time: ~1hr
  • (Optional) Coding Train Videos 2.6 createGraphics

• (Optional) WATCH • Eyeo 2019 - Amon Millner

  • UNRULY APPROACHES TO EMPOWERMENT, PLAY, AND PROGRAMMING

  • genesis of Scratch programming environment and mention of my Lingo programming language.

  • time: ~40min

• (Optional) additional remix sketches

  • Introduction Remix
  • Animation: Variables Remix

---

Week 2 • Sept 18 • Animation with Variables

Week 2 Slides

Week 2 Syllabus Resources

In class:

• Homework review and Questions
• Logging values to the Console
• Introduction to variables
• Animating shapes
• p5's system variables

Review Example:

• 1.2 draw_shapes_ui

  • Order of operations.
  • Coordinates and Color.
  • why are Shapes sometimes green?

• TRY: add create_ui and update_ui to your sketch to report coordinates and colors

• TIP: use console.log to reveal order in you code and values of variables

• a few words on notation and meaning

  • constrast syntax and order of operations in scratch.mit.edu

• Move Right

• Swirly Pen Mouse Select

Video Examples:

• p5js Code! - 2.1 - mouseX,mouseY
• p5js Code! - 2.2 - make your own variable
• p5.js Code! - 2.4 random() - Random Square Design

Colors and Images

• picking rgb colors using Applications/Utilities/Color Meter.app
• preview of loading images, sliders, for-loops
• ICM Week 1 Assignment - Self Portrait by Andre Lira
  • remix with attribution

Variables and Expressions

• circleX modulo Expressions

• circleX buttons Buttons to change variables

• circleX follow An algorithm to follow the mouse

• 2.2.3 circleX width ui

• reporting variable values, cooridinates and colors

• TRY: adding specific colors using Color Meter.app

• remix to demonstrate

  • global variables
  • local variables
  • expressions
  • defining your own function
  • object literals
  • parameter variables

Functions + object literals

Grouping variables into object literals and passing to functions as parameter variables.

• two circles object literal

• many circles object literal

Animation using computation

• Allison sin animation examples

Assignment due the night before our next class:

• PRACTICE • Week 2 Worksheet

• CREATE • Assignment #2 Create a sketch that includes (all of these):

  • One element controlled by the mouse.
  • One element that changes over time, independently of the mouse.
  • One element that is different every time you run the sketch.

  You can choose to build off of your week 1 design, but I might suggest starting over and working with one or two simple shapes in order to emphasize practicing with variables. See if you can eliminate all (or as much as you can) hard-coded numbers from the sketch.

  • Submit your assignment on our homework form.
  • Copy your sketch link, blog entry link and questions to this document:
    • Wk02 Links and Questions

• WATCH, READ, RUN CODE:

  • Coding Train Videos 3.1 conditionals

  • Coding Train Videos 3.2 bouncing

  • Coding Train Videos 3.3 else-if-and-or

  • Coding Train Videos 3.4 boolean

  • total time: ~1hour

    • Get Code
    • 3.4_1_p5.js_Boolean_variables

  • Getting Started with p5: Chapter 5 (Response). | Get Code

  • Interaction: Conditionals Remix

---

Week 3 • Sept 25 • Interaction with Conditionals

Week 3 Slides

Week 3 Syllabus Resources

Additional p5js Resources

• Expressions, variables and loops
• p5js summary
  • Make your own!
• Modulo Operator
  • example: a % b
  • Guest Tutorial #6: The Modulo Operator with Golan Levin
• Object Literals
  • example: let a = { b: 1, c: "two" }
  • Video Tutorial Objects Literals | ~9mins
  • sketch
  • Object Literal documentation
• Remix Examples:
  • Interaction: Conditionals Remix
  • DOM Slider UI - 3.5 circleX slider
• Boolean logic truth tables
  • AND &&
  • OR ||
  • NOT !
  • Boolean Algebra Truth Tables
• Binary Bits
  • 0 == true
  • 1 == false
  • Binary AND &
  • Binary OR |
  • Binary XOR ^
  • Binary NOT ~

  // Try in console pane
  Number(255).toString(16)
  ff
  Number(255).toString(2)
  11111111
  parseInt('ff', 16)
  255
  

Remix class activity

• Coding Train Videos 3.2 bouncing

  • the bouncing ball

• Coding Train Videos 3.4 boolean

  • 3.4_1_p5.js_Boolean_variables

• visualizing the if-then-else flow

  • Hand Single MouseDown - scratch example
    • duplicate and add mouse over rotate
  • flow chart
  • if-the-else flow block

Assignment due the night before our next class:

• PRACTICE • Week 3 Worksheet

• CREATE • Assignment #3

  • Two roads diverged in a yellow wood, And sorry I could not travel both... Life is full of difficult choices, use conditional statements to control the flow of your programs. In general this week, you should work with rule-based animation, motion, and interaction. You can use the ideas below or invent your own scenario.
  • Try making a rollover, button, or slider from scratch. Compare your code to these interface element examples.
  • Create an algorithmic design with simple parameters. One example is 10PRINT, see: 10PRINT code example and this accompanying video.
  • Tie the above two together and have an interface element control the visual design or behavior of other elements in your sketch.
  • Be sure to cite the source of any material / code you use.
  • Submit your assignment on our homework form.

• WATCH, READ, RUN CODE:

  • Coding Train Videos 4.1 - while for
  • Coding Train Videos 4.1 - loop nested
    • ~23min | Get Code
  • Getting Started with p5: Chapter 4.5-4.13 (Variables). | Get Code
  • Repetition: Loops Remix

---

Week 4 • Oct 2 • Repetition with Loops

Week 4 Slides

In class:

• Review worksheet
• Share our homework
• Review conditional statements
• Introduction to loops
• Preview of functions

Examples :

• Future Sketches - Exploring the essence of code as a creative medium

• 03-jht-hatviz

  • aperiodic-monotile-animation video
  • A Hobbyist Just Solved a 50-Year-Old Math Problem (Einstein Tile)

• truchet tiles pause

• maze spin in p5VideoKit

• Recommended by Ellen

  • Test Pattern by Ryoji Ikeda (video)
  • Generative Digital by Tyler Hobbs
  • Daily Art from Saskia Freeke
  • Shimmer by Dave Whyte
  • Quarantena generativa {2020} by Anna Carreras

What could the code look like?

Patterns with Loops

• Resources :
  • Week 4 Syllabus Resources
  • Nested For Loop Visualization Designed and Coded by Roy Yang

Remix in class

• Repetition: Loops Remix

Assignment due the night before our next class:

• PRACTICE • Week 4 Worksheet

• CREATE • PATTERNS

  • We humans have a tendency to look for patterns everywhere. We see patterns in nature and on the urban streets of New York. We rely on patterns we’ve detected in life to make predictions and acquire knowledge.

  • Observe, both outside (your surroundings) and inside (your history of thoughts and feelings), make a sketch about a specific pattern you find.

  • Think about how you can tell the unique story of the pattern using code.

  • Be sure to cite the source of any material / code you use.

  • Submit your assignment on our homework form.

• WATCH

  • Coding Train Videos 5.1 - Function Basics
  • Coding Train Videos 5.2 - Function Parameters and Arguments
  • Coding Train Videos 5.3 - Functions & Return
  • Coding Train Videos 7.1 - Arrays
  • Coding Train Videos 7.2 - Arrays and Loops
    • ~55 min

---

Week 5 • Oct 10 • Organization with Functions

Week 5 Slides

Examples:

• Week 5 Syllabus Resources
• Generative Design, Creative Coding on the Web
• Physarum Letters -- jht remix
  • from Physarum Letters by jasontothenextone on openprocessing.org

In class:

• For-loop review

• Introduction to arrays

• Defining and Using Functions

• functions remix

Assignment due the night before our next class:

• PRACTICE • Week 5 Worksheet - include any questions in your sketch and a note in the document

• CREATE • Functions

  • Part 1: Functions are the basic unit of labor in your code. Take a sketch you’ve already done and re-organize the code into functional units of labor that you define. You can also conceive of an entirely new world of labor. What kinds of labor does it take to make your sketch run? Add comments and use well named functions and variables to help explain your code.

  • Part 2: Make your sketch canvas size independent. We should be able to adjust the canvas size with reasonable values.

  • Part 3: Pair up with someone to review your code. The reviewer should try to describe how your code works.

  • Be sure to cite the source of any material / code you use.

  • Submit your assignment on our homework form.

• WATCH •

  • Coding Train Videos 6.2 classes

  • Coding Train Videos 6.3 constructor

  • Coding Train Videos 7.3 arrays-objects

  • Coding Train Videos 7.4 mouse-interaction

  • Coding Train Videos 7.5 removing-elements

  • Coding Train Videos 7.6 object-communication-1

  • Coding Train Videos 7.7 object-communication-2

    • about writing classes to create many objects, mouse interacting with those objects, and objects communicating with each other ~1hr 40min

• Objects and Arrays - Remix

---

Week 6 • Oct 16 • More Repetition with Classes

Week 6 Slides

In class:

• hover over algorithm

• animation cycle using step and delta

• Object-Oriented Programming -- a revolution

• Week 6 Syllabus Resources

Assignment due the night before our next class:

• PRACTICE • Week 6 Worksheet

• CREATE • Arrays and objects allow you to do something new with your programs: keep track of user action over the course of your sketch's execution. Create a sketch that takes advantage of your new skills. The sketch should allow the user to use clicks, key presses, etc. to add new elements to the scene (and potentially to remove them later). Your sketch should use an array of objects.

  • You will have two weeks to work on this creative assignment. For next week prepare a plan for what you hope to accomplish and be prepared to show work in progress.

  • Be sure to cite the source of any material / code you use.

  • Submit your assignment on our homework form.

• WATCH •

  • Coding Train Videos 8.1-8.10 - Enter the DOM!(~2 hours)
  • Focus on DOM basics, videos 8.1 - 8.4 (~40 minute)

--

Week 7 • Oct 23 • The DOM

Week 7 Slides

In class:

• The DOM

Examples

• Week 7 Syllabus Resources
• sketches on github
• sketches as a collection

Assignment due the night before our next class:

• PRACTICE • Complete previous worksheets

• CREATE • Complete your array of objects two week assignment.

• Optional: EXPLORE-CREATE • Add DOM elements (eg. sliders, buttons) to your sketch. The DOM elements should control some key aspect of the sketch. See if you can learn something new about your sketch thru interactive controls.

  • Submit your assignment on our homework form.

• WATCH • Videos: Images/Video 11.1-11.8 - Focus on videos 11.1 and 11.3

Preview of Media Weeks

• Preview of Media Weeks
• Preview of Week 8 - Video Pixels