Session 06: Arrays, objects, and particles
Session 06 includes arrays, objects, particle systems, and motion fields.
Aalto University, 2025-2026
2025-2026 Course Materials
Sessions, web sketches, Lab, PDF slides, Processing source links, and student studies.
Sessions
Session pages collect slides, web sketches, and source links.
Browser
Web sketches run in the page where possible.
Lab
The Lab edits p5.js companion sketches in the browser.
Source
Processing files remain linked with the course materials.
Course Search
Search the 2025-2026 materials by topic, format, or session.
No course materials match that search.
Web Sketches
These p5.js companion sketches run directly in the page.
Web-first where possible
PDFs and .pde files remain available. Sketches with a browser version are embedded here and also linked to the Lab.
Face Exercise
Use this to see how simple shapes become a reusable drawFace() function.
You can: change face size, eye spacing, mouth arc, or call
drawFace() more than once.Mouse Shapes
Move the pointer to control a circle, a mirrored square, and the background color.
You can: swap the mirrored movement, change the color mappings, or alter shape sizes.
Hover Grid
Move across an 8 by 8 grid to see how conditionals react to pointer position.
You can: change rows and columns, use gradients, or make neighboring cells react too.
Bouncing Ball Color
Watch a ball reverse at the canvas edges and change color on each bounce.
You can: adjust speed, radius, background fade, or add more bouncing objects.
Simple Waves
Use an animated sine wave to see how time changes repeated drawing.
You can: change amplitude, frequency, spacing, or draw connected lines instead of points.
Generative Grid
Use a rotating noise-driven grid to connect nested loops with smooth randomness.
You can: change grid size, rotation amount, tile shape, or noise scale.
Shapes Function
Click to regenerate a composition made from one reusable abstract-shape function.
You can: click the sketch to regenerate, add a fourth shape type, or constrain the color palette.
Spiral Spins
Move the pointer to control a polar-coordinate spiral?s speed and radius.
You can: move the pointer, press
T for trails, then change turns, curve, or color mode.Particles Follow
Move the pointer to emit fading particles and see how arrays of objects behave.
You can: move the pointer, change lifespan, vary velocity, or color particles by age.
Particles with Noise
Watch particles follow a smooth Perlin-noise field and wrap around the canvas.
You can: change particle count, movement speed, fade amount, or noise scale.
Student Studies Gallery
The gallery contains 22 local mirrors from the OpenProcessing course curation, with source files and original links.
Local Mirrors
Open the gallery to view the course copies of Study 1 and Study 2 sketches.
Study Filters
Filter by Study 1, Study 2, interaction, generative, mouse, or keyboard.
Read the Source
Each study includes a local source link, plus the original OpenProcessing page for attribution and backup.
Sketch Lab
Edit the p5.js companion sketches directly in the browser.
Run Your Code in Place
Choose a sketch, edit its JavaScript, and press Run your changes. The preview updates in the same page.
Change One Thing at a Time
Use the lab for small experiments: color values, sizes, speeds, loop counts, and function parameters.
Download Only When Needed
The original .pde files are linked from session pages and sketch cards.
Processing vs p5.js
The web sketches are translations, not replacements. Use this quick map when you want to move between the browser versions and the classroom Processing files.
Canvas Setup
In Processing, you use size(600, 400) inside setup(). In p5.js, you use createCanvas(600, 400) inside function setup().
Drawing Loop
In Processing, you write void draw(). In p5.js, you write function draw(). Both redraw continuously unless you stop them.
Transforms
In Processing, you use pushMatrix() and popMatrix(). In p5.js, you use the shorter push() and pop().
Variables
In Processing, you often declare types such as float x. In p5.js, you usually use let x, const x, or class fields in JavaScript.
Slides Reader
Read the PDF slides without leaving the course page. Choose a session and the reader updates in place.
Projects
Use these prompts to turn weekly sketches into larger creative work for the course.
Creative Study 1
Make a small interactive sketch using mouse position, color, and at least one custom function.
Creative Study 2
Make a generative composition using loops, randomness or noise, and one visual system you can clearly adjust.
Final Project
Develop an interactive or generative artwork that combines code structure with a personal visual direction.
Sessions
Use a session page when you want that week's slides, web sketches, instructions, and Processing material together.
Session 01
Drawing, coordinates, and first functions
Shapes, color, canvas coordinates, and reusable drawing code.
Session 02
Mouse input and changing color
Mouse position, clicks, mapping values, and dynamic color.
Session 03
Conditionals, loops, and movement
Decision-making, repeated actions, frame-based motion, and state.
Session 04
Waves, grids, noise, and recursion
Nested loops, sine waves, random walks, Perlin noise, and recursion.
Session 05
Functions, parameters, and reuse
Named behavior, parameterized drawing, randomness, and recursion.
Session 06
Arrays, objects, and particles
Object-oriented thinking, arrays, particle systems, and smooth motion fields.