# documentation hw week 3
I started again this week by playing with the code examples from class in the p5 web editor.
And then bringing back the graphics we learned about in p5 last week, I began putting together a sketch that mixed what I did last week, and what we did this week in class
And for this week I am going to try and make a prototype environment for my thesis, which right now I’m imaginging as a ‘Periodic Table of Expression.’ I am going to try and make an interactive environment where a user can adjust property and physics settings with a simple UI to create an artistic expression. I am inspired by an arts and crafts project I remember from growing up, which was one of the most amazing and magical things I remember taking part in.
I’m thinking of this kind of project
And if you want to watch a video, this is pretty close to what I’m thinking of as well-except that when we did this activity at camp we were all humans-this artist looks like they must be drawing portraits of home…
– I also really want to add sound to these physics environments and interactions though too…
– spray paint universe portraits
Ok, I think I remember that the 1) first step of the activity was choosing 2 colors.
–> So I am going to try and use the html 5 color picker I heard about in network media class today to add two color selectors to the board for users to select their base colors.
2) Was to put the lighter color down first across the entire canvas, followed quickly by the second-darker color.
3) And then you covered the whole thing in black spray paint
4) Now we really get wild. In the arts&crafts version I remember from camp, we would use stencils, cut out of cardboard, to make shapes in the spray paint. You would place the shapes on your canvas and hold them down and maybe move them a little, and then lift them up and in the places you put the shapes into the wet layers of paint, there would be really amazing swirls of the different colors layers mixing together.
I am going to try and replicate this using the p5 canvas and graphic layers. I don’t yet know if I can use more then one grpahic layer in a sketch, but if I can, the idea would be to choose 2 colors, one for each graphic, and then set the graphics and canvas background to semi-transparent colors using rgba, and then figure out a way to have javascript created elements play the part of our stencils and create an imprint in the sketch.
#Update
Ok, wow, I started playing with using the p5 graphics as layers, and really found some stuff I like. By putting partially transparent graphic layers on top of each other and with slightly transformed y properties, you can create some cool color spectrum stuff. You can try for yourself here
I want to. do some more exploring with this, but am going to try and leave it here for now, duplicate my sketch in the p5 web editor and move on to the next step, which is trying to ‘cut through’ the graphic layers somehow with elements that create a trail through the graphic layers.
I am going to try and take my ‘paint balls’ from week 2’s assignment
{{put iframe to that sketch here}}
and add them to these graphic layers
– create a mover.js file in the current project
– and dont forget to link the new js file to index.html!
– add the set up and draw for the balls in sketch.js
Ok, got it, and it’s kind of beautiful to me!
And now I am going to try and reveal the paths of the objects, or have them ‘leave their print’ in the graphics
– making the colors very transparent?
– using the canvas?
And i think pretty soon it will make sense to switch the sin rectangle and ball we worked with in class today into the sketch instead of the particles.
And now I am going to try and make it look like a inter-galactic universe type of space (in the mode of the spray paint art from my youth).
The graphics stuff was really cool on its own, but it doesn’t seem to be working well with the rest of the project because of the layers are being washed out with the canvas background. I am going to take them out for now, and then try to bring them back once I have the rest of the environment functioning.
Ok, I’m gonna stray from the inspiration of the spray painting art, which I am grateful for, and is irrevocably part of my project, but I am ready to let my imagination be shaped outside the restraints of the physical world, and let computation do some art work I was not able to without technology as a mediator (between me and the secret language of the universe). So I’m heading more in the direction of sacred geometry and what not, and I am going to try and make some art and then make an enivrinment in which other can create generative art in digital physics environments.
Ok, before I get too much further (I would like to make a set of constellations of these sacred geometry shapes), I am going to try and add my first user interaction. I am going to try and have a p5 slider adjust the color of the spinning geometry.
– changed to hsl color mode to work with p5 slider and color values
ok! Here is an interactive version where you can change the color of the spiral with a slider.
GARDEN OF FORKING PATHS
[su_row]
[su_column size=”1/4″]
Making more shapes and populating the universe
[/su_column]
[su_column size=”1/4″]
Focus on UI/UX of user interaction
[/su_column]
[su_column size=”1/4″]
Try to integrate graphics layers back in/play with background color
[/su_column]
[su_column size=”1/4″]
try implementing sound +|| html 5 color picker
[/su_column]
[/su_row]
This is fun
[su_row]
[su_column size=”1/2″]
[/su_column]
[su_column size=”1/2″]
[/su_column]
[/su_row]
UX-UI Thread
I am working on implementing the interface.js library, which I believe is made to create interfaces to control audio. Ever since Aaron Montoya presented a project where he used it in Interactive Music, I have wanted to apply the controls of interface.js to manipulating environments and the shapes and symbols in them. I have worked with interface js previously in my MLK Concerns piece{{link}}.
– and as always I want to try and add particles js as background, but this time it might really be part of the project
# Export and Thesis
A big part of my thesis project will involve users being able to save and export the productions of their interactions within the periodic table of expression interactions that I am making. So I am going to try and start developing my Export Scheme by making the ability to export whatever is created on the canvas. Eventually I would like to be able to save these to a server as well so they can be used within the environment as tools, objects, decoration, or data to populate prompts and exercises in other activities within the environment.
{{add export scheme image from notebook here-and cross post to thesis blog}}