Creative Coding

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();

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):

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.

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. 

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’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.

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:

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.

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):

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:

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:

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:

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

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:

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:

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):