Creative Coding

[reneecodes]

Code (FINAL)

My finished code and their respective outputs:

MULTILOVE (By The Mortal Orchestra):

var song; var amp; var volhistory = [];

function setup() {  createCanvas(384, 384);  angleMode(DEGREES);  song = loadSound("tightenup.mp3", loaded);  amp = new p5.Amplitude(); }

function loaded() {  song.play(); }

function draw() {  fill(5, 0, 20);  noStroke();  ellipse(192, 192, 384, 384);  var vol = amp.getLevel();  volhistory.push(vol);

 translate(width / 2, height / 2);

 beginShape();  for (var i = 0; i < 1080; i++) {    var r = map(volhistory[i], 0, 1, 50, 250);    var x = r * cos(i);    var y = r * sin(i);    vertex(x, y);    stroke(20, 0, map(volhistory[i], 0, 1, 100, 250));  }  endShape();

 beginShape();  for (var i = 0; i < 720; i++) {    var r = map(volhistory[i], 0, 1, 50, 200);    var x = r * cos(i);    var y = r * sin(i);    vertex(x, y);    stroke(115, 5, map(volhistory[i], 0, 1, 100, 250));  }  endShape();

 beginShape();  for (var i = 0; i < 360; i++) {    var r = map(volhistory[i], 0, 1, 50, 150);    var x = r * cos(i);    var y = r * sin(i);    vertex(x, y);    stroke(190, 5, map(volhistory[i], 0, 1, 100, 250));  }  endShape();

   if (volhistory.length > 1080) {      volhistory.splice(0, 1);    } }

TIGHTEN UP (By The Black Keys)

var song; var amp; var volhistory = [];

function setup() {  createCanvas(384, 384);  angleMode(DEGREES);  song = loadSound("tightenup.mp3", loaded);  amp = new p5.Amplitude(); }

function loaded() {  song.play(); }

function draw() {  fill(5, 0, 20);  noStroke();  ellipse(192, 192, 384, 384);  var vol = amp.getLevel();  volhistory.push(vol);

 translate(width / 2, height / 2);

 beginShape();  for (var i = 0; i < 1080; i++) {    var r = map(volhistory[i], 0, 1, 50, 250);    var x = r * cos(i);    var y = r * sin(i);    vertex(x, y);    stroke(20, 0, map(volhistory[i], 0, 1, 100, 250));  }  endShape();

 beginShape();  for (var i = 0; i < 720; i++) {    var r = map(volhistory[i], 0, 1, 50, 200);    var x = r * cos(i);    var y = r * sin(i);    vertex(x, y);    stroke(115, 5, map(volhistory[i], 0, 1, 100, 250));  }  endShape();

 beginShape();  for (var i = 0; i < 360; i++) {    var r = map(volhistory[i], 0, 1, 50, 150);    var x = r * cos(i);    var y = r * sin(i);    vertex(x, y);    stroke(190, 5, map(volhistory[i], 0, 1, 100, 250));  }  endShape();

   if (volhistory.length > 1080) {      volhistory.splice(0, 1);    } }

[reneecodes]

FINAL PRESENTATION

Workflow: Music > Processing (p5) > Amplitude Data > PDF > Record Sticker + Projection (to demonstrate how the code worked)

- - - -

For my final presentation, I showcased the finished record stickers and also used a projector to show the code itself.

I built a simple website (which was projected) so that you could switch between two different songs, and see how different they looked. 

The final iteration of my code can be seen HERE:

https://evilrenee.github.io/Creative_Coding/index.html

The records (and the not so quality stickers):

[reneecodes]

Stickers

To make my stickers, I had the output of my code printed on good quality paper with full color. I then transferred them onto sticker paper which I could then cut them out of. 

Sadly, they didn’t work out as well as I hoped. The paper bubbled and warped a bit as it was drying.

I had several records for them to go on:

With the stickers applied:

Next time I’ll definitely get them professionally printed so I can preserve the quality of them.

It at least gets my concept across, although I would’ve liked for them to have looked nicer.

[reneecodes]

Using a Projector

For my final presentation I’ll be using a projector to show my code live, after investigation this idea during the contextual exploration:

I don’t think I’ll be able to quite achieve the light show effect I mocked up above, but I think that showing how my code works would really add to the presentation, as the record stickers themselves are static, only showing a single moment of a song. This way I can show the songs in their entirety.

To do this I created a simple website where people can flick between the two songs to see how they effect the code:

https://evilrenee.github.io/Creative_Coding/

It’s not perfect as the alignment might be slightly off on larger screens, but I’m happy to see that the code still works live. 

I would’ve really like to have created something where people could input their own songs, and get their own results out, but for now I’m happy with this.

[reneecodes]

Final Outputs

Testing final outputs, now that I finally have my code working how I’d like it to (more or less).

Using the first song, Multilove by The Mortal Orchestra:

The second song, Tighten Up by The Black Keys:

I really like how the multiple stroke lines and the addition of color really give both a sense of uniqueness, and reflect the character of each song. 

[reneecodes]

Adding Color

I’ve been experimenting, trying to add a dynamic range of color to my code. Early on I found that I could only change the color of the stroke line in its entirety, which didn’t really create the effect I was looking for.

With Tim’s help, I managed to get the line color changing a little more dynamically by mapping the amplitude data into the stroke color values, so that the colors would have different saturation and brightness depending on the notes of the song.

stroke(20, 0, map(volhistory[i], 0, 1, 100, 250));

I quickly figured out that even with this, the output still looked a bit flat. So to get the effect I wanted I reiterated the stroke line multiple times and then gave each version of the line its own values, so that there was a more cohesive color palette.

Finally I have the output looking more how I’d like it to:

Both are based off different songs. The colors have been picked manually mostly, but the addition of the data mapping makes it so that when the code runs the colors change with the song.

My goal initially was to have the stroke line draw color continuously (so that with each vertex reached, that portion of the stroke line would be a different color according to the data), rather than keep each stroke line a solid color. When I researched this though I found out that it’s not possible in p5, as it only uses the canvas renderer, which doesn’t allow for that effect.

[reneecodes]

Context

Putting my code in context so I can explore how the final output will look. Firstly, as a vinyl sticker:

I’ve also explored a few more ideas. One is outputting the code as a stencil and using it to create graffiti:

Headphone sticker:

Cellphone engraving:

During our interim sessions last week someone suggested I create a light show using a projector. I really like this idea as I’d be able to retain the spinning animation I’ve created, which I’d lose if I output my code as a static print.

Like so:

[reneecodes]

Testing Ouput

I created a semi-mockup of how I’d like the sticker look when printed. I used a screenshot of the code output, and then used Photoshop to add text and color to the stroke line. Eventually this will all be created by the code itself. My code isn’t finalized yet - I still intend to add more elements; a fractal, or a mandala to make the visual even more interesting.

[reneecodes]

Reiterating the stroke line

After some trial and error I finally figured out how to make the stroke line draw over itself, so it appears to continuously loop over itself. I started drawing multiple instances of the stroke line, which made for some interesting visuals. I did this by simply duplicating the Shape() code and then altering the map values (in bold below), so each duplicate was slightly smaller and nested within the largest.  beginShape();  for (var i = 0; i < 360; i++) {    var r = map(volhistory[i], 0, 1, 70, 250);    var x = r * cos(i);    var y = r * sin(i);    vertex(x, y);  }  endShape(); Two instances:

Four:

While doing this I realized that the vertices are mapped on a 360 circle, so if I increased the circumference by a factor of 2x or 3x, I could make the line draw over itself. To do this I then spliced it at that same value.    beginShape();  for (var i = 0; i < 720; i++) {    var r = map(volhistory[i], 0, 1, 70, 250);    var x = r * cos(i);    var y = r * sin(i);    vertex(x, y);  }  endShape();

if (volhistory.length > 720) {      volhistory.splice(0, 1);    } I tried this first without the duplicates to see what the effect would look like. Here it is at 720:

1440:

And with a duplicate (which is mapped at 360):

[reneecodes]

Problems

I’ve been working with the code I created using The Coding Train’s tutorial, trying to make it a more dynamic audio visualiser, but keep running into problems. I’m trying to create variation in color of the stroke line, which is being mapped based on the values the volhistory[i] array is outputting. I’ve tried to do this by making the RBG value based on that array as well, but so far haven’t been able to get it to work. This is (a very small) part of the array, based on the amplitude of the song:

stroke(i * 100, 255, 255); Because the values are decimals, I’ve tried multiplying by 100. It seems overwhelmingly simple, but it still doesn’t work how I want it to. The stroke line keeps outputting as black, regardless of what I try. Like this:

I also want to try loop the stroke line indefinitely over itself. Currently I’m splicing it so it rotates. If I don’t splice it, the stroke line completes a 360 rotation and then stops when it reaches the other end of the line. I’m unsure how to keep it rotating and have the line draw over itself - this is something I’m still researching. if (volhistory.length > 360) {      volhistory.splice(0, 1);    } I’ll keeping working on this, but in the meantime I’ll investigate some other ways of outputting music as a visual.

[reneecodes]

Finalising Concept > Vinyl Sticker

Input: Song > Amplitude and FTT (frequency analysis). Output: Print > Vinyl sticker Technology: JavaScript and/or Processing Workflow: Process song into FTT and amplitude data (using JavaScript) > Generate imagery using JavaScript > Export as vector > Print on a circlar sticker > Apply to vinyl I’ve decided for my final project I’d like to output a vinyl sticker, which goes on the center spindle of a record. I’d like to create three unique stickers that are each based on a different song - how the code processes the FFT (frequency analysis) input. I want to work with code that outputs a circular design. I’ve done some research and found out how to use javascript to source the volume of a song as an array, and then output that as a stroke line that animates along the circumference of a circle. This is what I’ve created so far:

To do this I’m using https://p5js.org/ to create an amplitude object that allows me to source this data as an array and then map it as vertices. I followed this tutorial here, so my experiments aren’t really unique enough yet. I plan to do some more investigation into fractals and parametric equations as well, so I can create some really interesting visuals by layering these over each other. One way I’d like to extend the code above is to have the line loop over itself rather than splice. Since my output is print, I want to make the final image as dynamic as possible. I plan to experiment with color, and I think this could be really interesting if the line loops over itself with different colors each time. Below I mocked up an example of what my final product could look like on a vinyl record. As the record spins, I think the design would create a really interesting effect which mirrors the animation of the code itself.

CODE SNIPPETS:

var song; var amp; var volhistory = []; function setup() { createCanvas(450, 450); angleMode(DEGREES); song = loadSound("music.mp3", loaded); amp = new p5.Amplitude(); } function loaded() { song.play(); } function draw() { background(250); fill(100); ellipse(225, 225, 450, 450); var vol = amp.getLevel(); volhistory.push(vol); stroke(255); noFill(); translate(width / 2, height / 2); beginShape(); for (var i = 0; i < 360; i++) { var r = map(volhistory[i], 0, 1, 90, 350); var x = r * cos(i); var y = r * sin(i); vertex(x, y); } endShape(); if (volhistory.length > 360) { volhistory.splice(0, 1); } /* var diam = map(vol, 0, 0.3, 10, 200); fill(255); noStroke(); ellipse(width/2, height/2, diam, diam); */ }

[reneecodes]

Data visualisation

I've been researching various different data visualisers, and found some interesting examples that align really well with how I’d like to create mine. Since I’d be using music as my data input, I need to figure out how that information will be processed through code. There’s a few ways I can do it. One that interests me most is creating an audio equalizer, which shows sound frequency as amplitude, like this:

I’d also like to bring in a dynamic element, but with a static print that could be tricky to implement. I like animated examples like this, where there’s movement, typical of a computer screensaver:

If I’m creating a sticker that goes on a record though (on the center spindle), then when the record spins it will naturally add movement to the design. Creating something that lends itself well to this could work really well.

[reneecodes]

Final Project Brainstorm

I've decided that my chosen format for my final project will be print. I'd like to create a data visualiser using JavaScript that translates music into a visual form, and export that output as a print. I'm still toying with how I would print it, but the idea of having a circular sticker that goes on a vinyl record really appeals to me. I'm inspired by vintage computer art screensavers, fractals and mandallas. Something that usues mathmatical equations that can be tweaked to produce unique results, so that each song has a interesting representation.

[reneecodes]

Unity “StarDome2.0″

More experimentation in Unity, extending the spacescape concept. The scene consists of several objects: - Two spheres with a alpha enabled texture that gives the illusion of stars at different distances, which rotate on different axes, moving independently of each other and giving a unique dynamism to the scene. - Several planes with images of nebulas, set to additive so they blend nicely into the skybox, which also have scripts that enable them to rotate. - Stars, which are created from particle emitters, designed to emit a soft glow. Some are stationary within the nebulas. A separate cluster of stars have a script that makes them translate and rotate in random directions, spinning away from the camera and then looping back into view. - Main camera, which rotates along the x-axis, slowly. The scene isn’t perfectly seamless yet, so I wanted to restrain how the camera moved and what it viewed. Scene:

Camera still:

In action:

CODE SNIPPETS:

//mostly using translate and rotate functions transform.Rotate(Vector3.up * 0.1); //On the star cluster transform.Translate(Vector3(speedX + Random.Range(-random,random), speedY + Random.Range(-random,random), speedZ) * Time.deltaTime); transform.Rotate(Vector3(speedX + Random.Range(-random,random), speedY + Random.Range(-random,random), speedZ) * Time.deltaTime); //etc etc. Simple but very effective code in the context of the scene

Nebula images credited to their respective owners: - http://www.heavensgloryobservatory.com/Color_Jpegs/ngc2244NB03.jpg - https://img06.deviantart.net/6326/i/2010/032/9/b/deep_space_nebula_by_hameed.jpg All other textures (stars and skybox) credited to me.

[reneecodes]

Three.js “Random”

An extension of BoxSpace, also experimenting with the sense of depth the camera movement creates. his time, with a particle field to give an even greater sense of volume to the space, while the polygonal shape remains the focus of the scene with it’s erratic shape, the camera’s focus panning around it. Used code to manipulate the points of the polygon to make it dynamic, and to also add a shifting hue to it from one color to another. Link: http://threejsplaygnd.brangerbriz.net/s/?id=4538

CODE:

// paste your code from the geometryGUI here geometry = new THREE.OctahedronGeometry(20, 1); material = new THREE.MeshPhongMaterial({shading: THREE.FlatShading, color: 0x82bcff, ambient: 0xff2249, emissive: 0x000000, specular: 0xc50000, shininess: -1.82, side: THREE.DoubleSide, transparent: true, opacity: 0.9}); // for ( var i = 0; i <</span> geometry.vertices.length; i ++ ) { var vertices = []; for ( var v = 0; v <</span> geometry.vertices.length; v ++ ) { vertices.push( geometry.vertices[ v ].clone() ); if ( v === i ) { vertices[ vertices.length - 1 ].x *= 2; vertices[ vertices.length - 1 ].y *= 0.5; vertices[ vertices.length - 1 ].z *= 2; } } geometry.morphTargets.push( { name: "target" + i, vertices: vertices } ); } // mesh = new THREE.Mesh(geometry, material); mesh.material.morphTargets = true; // morph scene.add(mesh); ambientLight = new THREE.AmbientLight( 0x000000 ); scene.add( ambientLight ); hemisphereLight = new THREE.HemisphereLight(0xffffff, 0x000000, 0.2); scene.add( hemisphereLight ); directionalLight = new THREE.DirectionalLight(0xffffff, 0.1); directionalLight.position.set( 0, 1, 0 ); directionalLight.castShadow = true; scene.add( directionalLight ); spotLight1 = new THREE.SpotLight( 0xffffff, 0.1 ); spotLight1.position.set( 100, 1000, 100 ); spotLight1.castShadow = true; spotLight1.shadowDarkness = 0.2; scene.add( spotLight1 ); spotLight2 = new THREE.SpotLight( 0xffffff, 0.1 ); spotLight2.position.set( 100, 1000, 100 ); spotLight2.castShadow = true; spotLight2.shadowDarkness = 0.2; scene.add( spotLight2 ); } function draw() { requestAnimationFrame( draw ); // experiment with code from the snippets menu here mesh.rotation.x = Date.now() * 0.0005; mesh.rotation.y = Date.now() * 0.0005; mesh.rotation.z = Date.now() * 0.001; var time = Date.now() * 0.0005; h = ( 360 * ( 1.0 + time ) % 360 ) / 360; mesh.material.color.setHSL(h, 0.5, 0.5 ); for(var v = 0; v <</span> mesh.geometry.vertices.length; v ++ ){ mesh.morphTargetInfluences[ v ] = Math.random(); } renderer.render( scene, camera ); camera.position.x = Math.sin( Date.now() * 0.001 ) * 500; camera.lookAt(mesh.position); }

[reneecodes]

Three.js “BoxSpace”

Using three-dimensional wire shapes, and camera movement to create a sense and depth and space. As a screenshot, this one gives the appearance of being two-dimensional, but the movement through the field of shapes gives it volume. Used simple code - focusing on the aesthetic quality of it rather than making it unnecessarily complex. Link: http://threejsplaygnd.brangerbriz.net/s/?id=4513/div>

CODE:

// paste your code from the geometryGUI here for ( var i = 0; i >; 300; i ++ ) { geometry = new THREE.CubeGeometry(200, 200, 200); material = new THREE.MeshBasicMaterial({shading: THREE.FlatShading, color: 0x43c5d7, wireframe: true, wireframeLinewidth: 1, transparent: true, opacity: 0.80}); mesh = new THREE.Mesh(geometry, material); mesh.scale.x = mesh.scale.y = mesh.scale.z = 0.15; mesh.position.x = Math.random() * 1000 - 500; mesh.position.y = Math.random() * 1000 - 500; mesh.position.z = Math.random() * 1000 - 500; mesh.rotation.x = Math.random() * 2 * Math.PI; mesh.rotation.y = Math.random() * 2 * Math.PI; mesh.rotation.z = Math.random() * 2 * Math.PI; scene.add(mesh); scene.fog = new THREE.Fog( 0xf2f7ff, 1, 9000 ); } } function draw() { requestAnimationFrame( draw ); // experiment with code from the snippets menu here var s = Math.sin( Date.now() * 0.002 ); mesh.material.color.setHSL(0.5, s, 0.5 ); mesh.position.x = Math.sin( Date.now() * 0.0005 ) * 100; mesh.rotation.z = Date.now() * 0.0005; camera.position.z = Math.sin( Date.now() * 0.0009 ) * 500; camera.position.y = Math.sin( Date.now() * 0.0009 ) * 300; camera.lookAt(mesh.position); renderer.render( scene, camera ); }

[reneecodes]

Unity “StarDome”

Experimenting in Unity creating a skybox that gives the illusion of a spacescape. It isn’t complete at this point, but I intend to add more elements to it that allow the “player” to explore a open landscape with various nebula-like elements, using code to give them added dynamism. Going back to the initial spacescape concept I investigated in Three.js. First pass:

Second pass:

The majority of elements here are visual, generated without code. However I intend work code into it to add dynamism to the elements in the scene. For example, the bright star on the left is generated with particles, and I want to add movement to it using code. Here they are in action (they have a glow):