Assignment: Order vs. Disorder

Make a composition with controlled randomness which depicts “order” when the mouse cursor is on the left side of the canvas, and “disorder” when it is on the right side. The degree of order/disorder should vary gradually with the position of the mouse.
The transition must fade a sound loop in synesthetic relationship with the visuals.


-No size requirement
-Use for loops
Try to use maximum 3 colors
-Check the examples below for reference but don’t make a variation of it. The grade will be mostly based on the originality of your sketch.
-You can try to use noise and oscillations instead of random.
-You can use rotational symmetry instead of a grid


Post it on the openprocessing classroom with a proper title and a thumbnail image.

Part 2 in class
Try to recreate your sketch or respond to the assignment prompt with the help of ChatGPT or copilot. Let’s have a discussion later.

Grading criteria

It runs without errors
It is not a variation of the basic example
You used something that was not explained in class, did some research.
You understand what’s going on, you can explain the code (and you will be asked to during critique).
It has an intentional aesthetic: color, movement, and composition are deliberate and work together
The sound is a seamless loop and it works with the visuals


Tutorial here

Template: you can fork this sketch

Creating seamless loops

You can start searching for sounds on freesound  (free but mandatory account)

Download and edit it in Audition if you want.

Load it on this web application
Select the area you want to loop on the top
Extend the crossfade by dragging the CF handle in the middle row
Adjust the bottom row if you hear “pops”
Download the file
Rename it to something simple like disorder.wav

Upload the sound file on openprocessing:
code settings on the right > files > upload

Change loadSound(‘filename.mp3’); using your file name. You may want to rename your file to something simple before you upload it.

Using sound on openprocessing

If you want to make a sound-enabled sketch instead of forking the example above you have to:

Include the p5.sound add on by opening the menu on the right and activating the switch:

All the sound functions are in this section of the manual p5.sound

Student Samples (please avoid representational subjects)