Aalto University, 2024-2025

2024-2025 Course Materials

Sessions, web sketches, Lab, PDF slides, Processing source links, assignment examples, and student studies.

Teacher: Tiago Martins Pinto tiago.martinspinto@aalto.fi

Sessions Web sketches Lab

Sessions Session pages collect slides, web sketches, and source links.

Browser Translated p5.js sketches run in the page where possible.

Lab The Lab edits translated p5.js sketches in the browser.

Media Camera, microphone, and sound examples stay source-first when permissions matter.

Session Shortcut

Session 08: Sound and camera

Session 08 includes sound, webcam, image-to-sound experiments, and source-first media examples.

Open Session 08 Read Session 08 slides Open webcam mosaic source

Find Course Material

Course Search

Search the 2024-2025 materials by topic, format, or session.

Web Sketches

These p5.js companion sketches run directly in the page.

Web-first where possible

Each card links to a browser sketch, the Lab, and the original Processing source. Media examples that need microphone or webcam permissions are kept as source-first material in the sessions.

Smile Face

See how one drawing function can produce several related faces.

Session 01functionsdrawing

You can: change proportions, draw more faces, or alter the expression.

Edit in the Lab Open sketch only Compare Processing code

Follow the Mouse

Move the pointer and compare direct input with eased motion.

Session 01mousemotion

You can: change the easing value, trail opacity, or follower size.

Edit in the Lab Open sketch only Compare Processing code

Mouse Shapes

Use the pointer to control a shape while another mirrors it.

Session 02mouseXmapping

You can: change color mappings, shape size, or mirrored movement.

Edit in the Lab Open sketch only Compare Processing code

Color House

Click to recolor a simple scene and see mouse events change state.

Session 02mousePressed()state

You can: add windows, change the palette rules, or animate the sky.

Edit in the Lab Open sketch only Compare Processing code

Bouncing Ball Color

Watch a ball reverse at the canvas edges and change color on contact.

Session 03conditionalsmovement

You can: change speed, radius, color rules, or add more balls.

Edit in the Lab Open sketch only Compare Processing code

Generative Grid Hover

Move across nested squares driven by distance, noise, and loops.

Session 04nested loopsnoise()

You can: change grid density, opacity, rotation, or color mapping.

Edit in the Lab Open sketch only Compare Processing code

Recursive Tree

Watch a function call itself to grow two mirrored branching systems.

Session 05recursionanimation

You can: change branch length, angle, scale, or colors.

Edit in the Lab Open sketch only Compare Processing code

Sparkles

See arrays of particle systems emit, update, fade, and remove particles.

Session 06objectsarrays

You can: change lifespan, velocity, particle size, or color.

Edit in the Lab Open sketch only Compare Processing code

Video Filters

Use a local video file to test image-processing filters without opening a new site.

Session 07videopixels

You can: press I, G, B, or T to toggle filters, then change the pixel rules.

Edit in the Lab Open sketch only Compare Processing code

Sketch Lab

Edit translated p5.js versions of the 2024-2025 examples directly in the browser.

Run Code in Place

Choose a sketch, change its JavaScript, and press Run your changes. The preview updates in the same page.

Open the Lab

Try a Small Change

Start with color, speed, size, branch length, particle lifespan, or the number of grid cells.

Edit generative grid Edit sparkles

Compare Later

The original Processing files remain linked from every sketch, so you can compare syntax when you are ready.

Processing vs p5.js

The web sketches are teaching companions. Use this quick map when you move between browser examples and the original Processing files.

Canvas Setup

Processing uses size(600, 400). p5.js uses createCanvas(600, 400).

Drawing Loop

Processing writes void draw(). p5.js writes function draw().

Transforms

Processing uses pushMatrix() and popMatrix(). p5.js uses push() and pop().

Variables

Processing often declares types like float x. p5.js usually uses let x or const x.

Slides Reader

Read the PDF slides without leaving the course page. Choose a session and the reader updates in place.

Choose a slide deck

Session 01 - Drawing basics

Open PDF if reader fails

Projects

Use these example files when you are preparing study work or comparing how a course prompt can become code.

Study 1

Start from interactive drawing, mouse input, and visible changes in response to the viewer.

Open Study 1 example Start from mouse shapes

Study 2

Start from generative systems, grids, loops, and controlled variation.

Open Study 2 example Start from generative grid

More Examples

Use these task examples and Sonic Pi files when you want additional references.

Task 3 Task 4 Sonic Pi code

Sessions

Use a session page when you want that week's slides, runnable sketches, and Processing material together.

Session 01

Drawing basics

Coordinates, shapes, color, and first reusable drawing functions.

Open session page Open smile face Read slides here

Session 02

Mouse and variables

Mouse input, values, operators, and color changes.

Open session page Open mouse shapes Read slides here

Session 03

Conditionals and movement

Hover states, collisions, changing color, and motion over time.

Open session page Open ball sketch Read slides here

Session 04

Loops, grids, and waves

Nested loops, repeated structures, waves, and generative grids.

Open session page Open grid sketch Read slides here

Session 05

Functions and recursion

Reusable code, recursive drawing, spiral systems, and noise.

Open session page Open tree sketch Read slides here

Session 06

Objects and particles

Object-oriented thinking, arrays, particle systems, and repeated motion.

Open session page Open sparkles Read slides here

Session 07

Image and video

Image filters, video filters, glitch effects, and zoom interactions.

Open session page Open video filters Read slides here

Session 08

Sound and camera

Audio, webcam, image-to-sound, kaleidoscopes, and media experiments.

Open session page Read slides here

Student Studies

Browse the 2024-2025 student studies. Run one work at a time, then open the local source file or original OpenProcessing page.

Course Gallery

Use the in-site viewer to browse Processing sketches from the course without opening a new page for each one.

Open student studies Start with Assignment 1

Source and Attribution

Each student study keeps a source file and a link back to the original OpenProcessing sketch.

Open an example source View original curation

Use it as Reference

Look for interaction patterns, visual systems, and ways students handled variation before building your own study.