Ahoy! In this very first unit, we will get to know p5.js, its built-in functions, and how to use them to create meaningful interaction between user and computer. We also learnt to use the p5 web editor and practice consulting the p5 online documentation.

By the end of this unit, we make an interactive letter and send it to our loved ones. In this very intimate format of a letter, we use technology as a bridge to deliver our thoughts and emotion. The letter can be made using material that we learnt in class (shape, color, typography) and elaborated with animation and interaction via mouse and keyboard. More information about the unit project can be found in Session 3.

• What is p5.js? Demystifying: code, language, libraries.
• Make your first p5.js sketch.
• Function: p5.js built-in function
• The coordinate system, shape, and colors
• Variables
• Simple animation and mouse interaction

• Write your own function
• Transformation: translate(), scale(), rotate()
• push() and pop()
• Typography: adding and styling text
• Iterative: for Loop and while Loop

Upon the connection with computer we have established in Unit 1, we continue to build a more sensory interaction: seeing. Can computer see things as the way human do? In this unit, we learn to apply coding into capture and analysing images. We also learn to program a project on a more professional level, away from pure online editor.

For this unit project, students will use camera and other recording devices to capture the essences of where they are living. We incorporate programming to highlight those essences either through manipulating the images' structure or semantics.

Sample Project: “All the strangers I met on Bờ Kênh Nhiêu Lộc”, is a reflection of myself living in the overwhelming Saigon, where I ride 12km every day to work. It is a still film with a huge cast trying to get through the screen yet no one is the main character. To make this, I performed object detection on a dashcam driving through Saigon. The model extracted drivers and placed them on the mural.

⤷ SESSION 4. Working with Images

• Programming in local environment: text editor, CLI, and all things needed.
• Structure of a p5 project: index.html, style.css, and sketch.js
• 🏄🏻‍♂️ Practice: Making buttons.
• Working with images
• Working with videos
• Control media: play, pause, loop, duration.
• 🏄🏻‍♂️ Practice: Making Zine

⤷ SESSION 5. From Pixel to Image

• Array and array manipulation
• Color spaces: RGB and HSL.
• Canvas as a grid
• Understanding image as arrays of pixels: updatePixels() and loadPixels().
• Working with webcam.
• 🏄🏻‍♂️ Practice: ASCII Webcam.

⤷ SESSION 6. More Than Just Pixels

• Learning images through machine learning.
• Image classification
• Object detection
• Simple machine learning application using ml5.js
• Debugging & Optimization
• Using setInterval(), setTimeOut() to schedule function execution.

Using code as an instrument to amplify the vivid world around us. In this unit, we learn to visualize sound using programming. We focus on animation and the use of algorithm and vectors on enriching our animation.

In this project, students go out to their neighborhood and record a soundscape. Then using programming to amplify the subject of the soundscape in visual.

Click to full-screen.

Sample Project: “I let the fish back into the ocean.” ⎯ Made from footages I recorded throughout 2023, “I let the fish back to into the ocean” is a meditation on my intimacy with nature: water, air, and biological bodies; through the way we flow, intertwine, and harmonize this school of lives together.

⤷ SESSION 7. Sound

• Understanding the concept of sound.
• The physics of sound: Amplitude, frequency, and FFT
• Digital format of sound: Different file types and terminologies.
• Legal resources: Open archives and free-to-access material.
• Load and control sound in p5.
• Simple shapes react to sound.
• 🏄🏻‍♂️ Practice: Simple visualization - Sine wave.
• 🏄🏻‍♂️ Practice: Simple visualization - Frequencies in bars.
• 🏄🏻‍♂️ Practice: Spectrogram.

⤷ SESSION 8. Sound Visualization

• Object-oriented programming: What is it? How to use it?
• Advanced animation with sin, cos, tan
• 🏄🏻‍♂️ Practice: Animate text with textToPoints() and boundText()
• Working with microphone.
• 🏄🏻‍♂️ Practice: Sound animated typography.
• P5LIVE

⤷ SESSION 9. Sound Visualization

• Acoustics of music.
• Vectors and Forces: Using physics to enrich animation.
• Perlin Noise.
• 🏄🏻‍♂️ Practice: Flow Field
• Git and Deploy

Human practices require the ability of analyzing signals that we can neither see nor hear. Fishermen relies on currents, winds, and inherited knowledge to navigate. Farmers relies on rain level and temperature to adjust their harvest. This unit will guide students to design a cohesive system from devices and bodies of code to sense and make sense of surrounding data that beyond our seeing and hearing.

Sample Project: Prototype of a wave visualization where all the students of CodeSurfing are riding the waves according to real-time update of wind data in Ho Chi Minh City, Vietnam.

⤷ SESSION 10. The Data Pipeline

• Getting to know data and what data can do.
• Data type: .csv
• Load table and extract data with getRow, getColumn, getNum, getString.
• Quick visualization.
• Connect p5 with Google Sheet
• 🏄🏻‍♂️ Practice: Collect and visualize your own data.

⤷ SESSION 11. The Story of Data

• Descriptive statistics, measurements of data.
• Deep dive into data visualization.
• Chart selection and storytelling in data visualization
• Data source and ethics in using data.
• 🏄🏻‍♂️ Practice: 50 Ways to Visualize A Data.

⤷ SESSION 12. Realtime

• Datatype: JSON
• Connect p5 with Data API
• Real-time visualization
• Deploy
• Beyond data: Machine learning
• Predicting with Linear Regression