Assignment
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.
Requirements
-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
Deliverable
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
Resources
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
https://openprocessing.org/sketch/1852386
https://openprocessing.org/sketch/1858449
https://openprocessing.org/sketch/1852529
https://openprocessing.org/sketch/1865433
https://www.openprocessing.org/sketch/596896
https://www.openprocessing.org/sketch/454187
https://openprocessing.org/sketch/1744048
https://openprocessing.org/sketch/1744047 (please avoid representational subjects)