Intro to Programming with P5js
Create a sketch that expresses non-linear movement on the screen.
Link to code: https://openprocessing.org/sketch/1277962
Creative Technology | Maxim Safioulline | Media Design Projects
Tools: p5.js
Process:
procedural bugs
This project is my first time working with JavaScript. The hardest problem I ran into was inserting the sound into the code. The first part of the problem was that didn’t know how to do it. I realized that the process of inserting sound followed the same process as inserting an image.
From here, I inserted a universal variable, created a preLoad function, uploaded the song I wanted to use into P5js, and finally imbedded the song into the setup function of the code. This did not initially work. After consulting one of my classmates, I added a command that would tell the computer to start playing the song. This command told to computer to play the song when one of the balls hit 3 out of the 4 walls and to pause when the other ball hit 1 out of the 4 walls.
Still from p5.js code
Still from p5.js code
Randomness + Perlin Noise
Use randomness and/or Perlin noise to create organic shapes. Add controls for the user to interact and modify them.
Link to code: https://openprocessing.org/sketch/1286820
Creative Technology | Maxim Safioulline | Media Design Projects
Tools: P5js
Process:
procedural bugs and project evolution
The task at hand was a great way at understanding the difference between randomness and Perlin noise. The two are visually very different, but in the process of using both of them inside of my code, I was able to detect the fundamental operational differences.
This is 1D Perlin noise. It was interesting seeing the fluidity of the curved hills created by the code.
This is the seed random function. Using random seed helped me understand how numbers are evenly distributed in a random way. This also helped me understand the difference between random and Perlin noise.
This is two separate grids (squares and circles), both are randomized with different parameters. Using a universal variable that offsets the values of the randomized / noise elements helped create more variability inside of the code.
This is a still of the final code. The circle grid on top of the square grid is manipulated by the noise function. The slider changes the space between the circles in the noise grid. The slider also changes the hue fill of the circles as they move about the space.
Link to code: https://openprocessing.org/sketch/1297958
Creative Technology | Systems Prototyping | Maxim Safioulline | Media Design Projects
Tools: p5.js, Miro
Representing natural systems through code
Create a sketch that would simulate an existing natural system - look at physics, biology, and other natural sciences for good examples.
Start with the environment - where is the system situated? What are the forces the environment might exert on the system?
Examine the agents in the system, their relationships to each other and the environment they are in. The look at how this system would develop over time.
What are the rules that you are going to come up with, what are the parameters you are going to feed into them and what effect will the changes have on the development of the system.
Process:
diagrams
Create diagrams to explain the components of the observed natural system, their relationships, the rules (algorithm), and how all of these elements unfold over time.
List of the components of the system.
First diagram of the components of the system.
Second diagram of the components of the system examining the agents of the system and their relationship to each other in the environment.
Diagramming the parameters of the system to see how they will translate into an object + class coding system.
Link to code: https://openprocessing.org/sketch/1325704
Creative Technology | Interface Prototyping | Maxim Safioulline | Media Design Projects
Tools: p5.js, Google’s Teachable Machine
Anything is an interface
Create an interactive system (a game, a story, a performance, etc) that relies on the recognition and tracking of the real-world objects by a machine learning system (ML5js). Explore the possibilities of the technology: what it can and cannot do? how subtle can the variations be? what is easy and what is hard to do with the existing tech? Starting with your big idea outline a backup plan - what is plan B to scale it down? What is plan C? What will work if nothing else works?