Intro to Computational Media

Tutorials

Intro to Computational Media Tutorials

YouTube Playlist

Wk 1~2

• 1.1 p5 Web Editor and the Console (YouTube / PeerTube), Xin
• 1.2 2D Primitives (YouTube / Peer Tube), Xin
• 1.3 RGB Colors and blendMode() (YouTube / PeerTube), Xin
• 1.4 translate(), rotate(), push(), pop() (YouTube / PeerTube), Xin

Wk 3

• 2.1 System defined variables – mouseX, mouseY (YouTube), Coding Train
• 2.2 User defined variables (YouTube), Coding Train
• 2.4 random() (YouTube), Coding Train
• 7.2 Mouse & Key Inputs (YouTube), Xin Xin

Wk 4

• 3.1 IF, ELSE, ELSE IF (YouTube), Xin
• 3.1.1 IF / ELSE Example - Make a Drawing Machine (YouTube), Xin
• 3.2 AND - Create a Hover Button (YouTube), Xin
• 3.3 Boolean Variable - Create an On / Off Button (YouTube), Xin
• 3.4 Hour(), Minute(), Second() (YouTube), Xin
• 3.5 map() (YouTube), Xin
• 3.6 frameRate(), frameCount, millis() (YouTube), Xin

Wk 5

• 4.1 Function Basics (YouTube), Coding Train
• 4.2 Functions: parameters & arguments (YouTube), Coding Train

Wk 6

• 5.1 for Loop (YouTube), Xin
• 5.1.1 rotate() + for Loop (YouTube), Xin
• 5.2 Nested for Loop - Draw a Grid! (YouTube), Xin
• 5.2.1 Modulo - Make a Checkerboard! (YouTube), Xin
• 5.2.2 blendMode() + Loops - Anaglyph Illusion (YouTube), Xin

Wk 7

• Array (YouTube), Coding Train
• Array + for Loop (YouTube), Coding Train

Wk 8~11

• 8.1 Class and Objects (YouTube), Xin Xin
• 8.2 Array of Objects (YouTube), Xin Xin
• 7.2 Mouse & Key Inputs - mousePressed(), mouseIsPressed, keyPressed(), keyIsDown(), keyIsPressed (YouTube), Xin Xin
• 8.3 Switch Statement - Changing Scenes! (YouTube), Xin Xin
• 8.4 Class and Objects - Collision Detection (YouTube), Xin Xin
• 9.1 JavaScript push(), pop(), unshift(), shift() (YouTube), Xin Xin
• 9.2 JavaScript splice() (YouTube), Xin Xin
• 8.4.1 Importing Image Assets - Frogger (YouTube), Xin Xin
• (optional) 7.1 JavaScript Object and the Dot Operator (YouTube), Xin Xin

Wk 12

• 6.1 Array (YouTube), Katherine
• 6.2 Pixel Array (YouTube), Katherine
• Bonus Tutorial: Pixelator (YouTube), Xin
• Bonus Tutorial: Pointillist Filter (YouTube), Xin

Wk 14~15

• 11.1 DOM + Interface Elements (YouTube), Katherine

Additional Tutorials

General

• Coding Train, Dan Shiffman
• Artist Who Code, So Sun — p5 tutorials in Korean / English
• Three-Minute Creative Coding with p5.js, Carrie Sijia Wang
• AriCiano, Ari Melenciano
• Qtv, Qianqian Ye — p5 tutorials in Mandarin

Color

• Rainbow Paintbrush in p5.js, Kelly Lougheed — practical example on using colorMode() HSL

Trigonometry

• The Nature of Code: Oscillation, Dan Shiffman

Text & Typography

• Jenny Kowalski's Tik Tok videos, Jenny Kowalski
• Text and Type, Allison Parrish
• Introduction to RiTaJS, Allison Parrish

Image Processing

• Instagram Filters with p5.js, Kelly Lougheed
• Generative Design: Image (excerpt), accomodated by p5 examples, Benedikt Gross, Julia Laub, Claudius Lazzeroni, Hartmut Bohnacker
• p5.Pixelator.js, Ksawery Kirklewski

p5 Libraries

• Serial Communication with Arduino and p5.js, Irene Ye Yuan

JavaScript

• JavaScript Basics, Lauren McCarthy

DOM

• Beyond the Canvas, Evelyn Masso

Video and Pixels

• Video and Pixels Playlist, Coding Train

Miscellaneous

• p5 Cheat Sheet, Ben Moren
• JavaScript Reference, Mozilla Foundation
• p5 Advanced Cheat Sheet, Xin Xin
• JavaScript String Cheat Sheet, Xin Xin
• p5 Hours - Degrees - Radians Diagram, Xin Xin
• p5 Storyboard Template, Xin Xin