#noc w2 documentation
# Building Physics Environments
This is my first introduction to physics in a classroom setting, and so I am trying to start slow, by rebuilding the p5 examples posted on the class website. I began be re-creating some of the forces and vectors, trying to work out how the physics environment came together by commenting as I was re-building the code
Next, I began running some experiments in the p5 web editor.
Next I was interested in experimenting with the p5 createGraphics method and changing the colors of the sketch in coordination with the physics of the environment n some way. One of the things I’m still struggling with, is how to effect the physics of the environment. I can make small changes, but I am still unclear on the range of possibilities, and how we put the variables created in mover.js into an equation with each other, especially one that changes over time. With the p5 createGraphics element I want to try and create a couple of difference apparent behaviors re: color, by changing the transparency of the color scheme of the elemnts and providing different background behaviors with the canvas and the graphic.
My next idea is to use the p5 audio input and fft reader to link the audio input from the computer to the speed/=behavior of the balls so they are ‘dancing’ to the song.
The first step was getting the fft visualizer up and running in my sketch
And I am going to try and experiment with the shape and color of the fft visualizer which has now become part of the sketch. The sketch used no background on the canvas and then creates a graphic element for the top half of the sketch so that the paths created by the moving shapes can only be seen on the bottom half, while on the top half you can only see the place where the ball currently is, invisibilizing its path and pattern. I am thinking here about Marx’s fetishism of commodities, Diego Rivera’s murlas, specifically the way he creates different ‘layers,’ often depicting societal structures, and this image [[enter french capitaism image here]]
And here is a video of where the project is currently at because I am having trouble embedding the sketch with the audio p5 library(?). You can however see a live version of the sketch running, in a chrome browser here
And here is an embed of the p5 web editor version which is live, but doesn’t have the audio input readings, which is really a lot of the interactive fun. If you are using the chrome browser you can see a live interactive version here. And you can view and edit the code in the p5 web editor here You can see how the audio input effects the behavior by playing music or just making noises and watching the environment be effected.
And now to try and link the behavior of the balls to the audio input I am going to try and set one of the properties of the balls to be equal to the fft reading.
– trying to get the reading of the fft analyzer by console.log(spectrum)
– not really helping me understand so I am going to try and pick apart the map function that’s being used with spectrum to create the fft visualization in hopes of using the same formula to effect the balls
– putting together the sketch above with the ‘liquid’ example.
– make the ellipses words.- or better yet, sometimes words/letter and sometimes shapes!
– make sure to film someone using the environment with audio in for documentation
# next steps
– styling and color themes for the varios elements
– adding user controls for each element/controls to effect all the elements in different ways- or as yotam would ay ‘a couple of high level abstractons’
[su_box title=”Spoiler Alert” style=”noise”]I was having a big issue with the p5 editor, where I would try to duplicate a project that included additional .js files, such as mover and liquid.js, and the duplicated copy would create empty or blank files instead of the .js documents. This behavior now (the next day) seems to be working as expected and correctly duplicating projects.
Safari doesn’t accept the audioIn method from p5?
It also appears that I am not able to put more then one iframe from the p5 editor in a wordpress post? I was able to make this work too I believe[/su_box]