Coding for Creative Practice @molly-creativecoding - Tumblr Blog

Posts

After settling on my final design and colour combination, I decided to print my poster at A0 size. Since originally I wanted my concept to be displayed at a large scale, this was the closest I could get to that effect with the tools I had available. I printed my poster through the CoCa Toystore, and cut off the excess white with a craft knife on the day of the exhibition. After seeing it up on the wall, I really feel like it fulfills its purpose as a poster with high contrast and impact, and I’m very happy with my final output as a whole.

A quick description/recap of my code process:

My code is created from a csv table of data from 3 of the big Christchurch earthquakes, the 7.1 on September 4th 2010, the 6.3 on February 22nd 2011 and the 6.4 on June 13th 2011 . Each circle is made up of dots representing 600 aftershocks after the first ‘big’ quake, which is highlighted by the ring around it. The magnitude of the quake affects the dots opacity and size, the higher the magnitude, the bigger and more opaque the dot. The closer to the center of the circle the dot is, the closer to the surface the quake was. The majority of the quakes occurred around a depth of 5km, so this is what creates the main ‘circle’ shape. Each dot is placed around the circle clockwise in the order they occurred.

#week 12

To help add some context to my final output, I made some entourage images showing how my design could be used in the real world. Since I created my code to generate a vertical printed output, there are many different contexts it works in, for example, a book cover, billboard, banner, advertisement, t-shirt design, phone case, or stickers, however I feel that my design works best in the form of a large scale print, poster or billboard.

#week 13

After finalising my circular design, I wanted to add the final touches to make it more ‘poster-like’. Bringing back red from my first experiments as an accent colour, I added the date that each of the big quakes occurred. I wanted the text to be behind the circles, so it didn’t take away from their design, but helped accent and ground them to what they’re representing. I downloaded and imported the font Gobold , loading it into my processing sketch by placing it in the data folder along with the csv file.

After thinking about my first design for a while, I decided refine it further by experiment with several different text and colour combinations, doing several A4 test prints until I found one I liked.

#week 12 #week 13

After thinking it over, I realised that I liked having the data spread out over 3 circles, but I didn’t like the empty feeling they gave, as there either weren’t enough points to go around a full circle, or the points were too spread out if stretched around the full 360 degrees. If I wanted to keep the 3 circle design, I needed more data. This gave me an idea, as the different circles showed the variation of the 1 big quakes’ aftershocks over a space of 3 days, what If I showed the variation between 3 big quakes rather than just 1?

I went back to Christchurch Quake Map, and using the same cleaning process in RegExr, I created 2 more csv files of 600 quakes for both the Feb 22 quake and the June 13 quakes. This gave me enough data to fill 3 circles.

Since I couldn’t use the date as a value to split the data into 3 circles, I added a new column to my table, the ‘quake’ value specified which quake the data was from, so September was 1, February was 2, and June was 3. I removed the redundant ‘date’ int from my code, and replaced it with ‘quake’, and then changed my if statement that calculated the y offset to the same. Now each big quakes’ data was split over the 3 circles, visually representing the differences between each.

Again, I tweaked the magnitude ellipse if statement, raising it to 6, which gave me one ellipse for the big quake that started the chain of aftershocks shown in the circle, showing both where the circles begin and end.

#week 12

While trying to think of how to make my data more interesting and readable, I decided to change the colours on my poster, as I felt the red didn’t contrast the light grey background colour enough. I started looking through other blogs for inspiration, and gravitated towards a blog I used for inspiration for my processing experiments back in week 2, @dailyminimal . I really liked the way their artworks were made of contrasting shapes and colours, mostly only a 2 tone colour scheme of a contrasting light and dark grey. After tweaking my colour values I was immediately much happier with how the circles looked, and decided to keep this as I moved forward with my design.

As well as this, I tweaked the if statement that controlled the magnitude ellipses, meaning they only appeared if the magnitude was greater than or equal to 5

#week 11

Next I tried experimenting with the visuals I could create on 3 different circles, adding the magnitude ellipses back in, I started tweaking my ‘t’ value, seeing if I could get each circle to go a full 360 degrees. This proved difficult, as all the circles t values got added together each loop, meaning none of them started in the same place. I figured this would be too confusing for people trying to interpret the data, so I needed to think of something new.

#week 11

For the Interim exhibition, I printed out an A3 poster of my last circular output. I personally felt like it had a long way to go design wise, so I wanted to take it further. Based on the feedback I got, I wanted to experiment more with colour, give some context to the circles as well as representing time and date. I first tried a more varied colour palette that changed a variable (c) depending on the quake magnitude. This turned out way too crowded and messy looking, so I decided to try removing the magnitude ellipses entirely, just leaving the points behind. I liked this a lot more, so I decided to keep it as I continued experimenting. As well as this, I inverted the cos value, meaning the points moved chronologically clockwise around the circle.

My next step was to experiment with visualising the passage of time. One suggestion I got was to try splitting each date into different circles, so to achieve this, I repurposed my date if statement, changing the x variable to a y variable (as it would be affecting the y axis). This variable acted as an offset for the y co-ordinates on the points being drawn, meaning for each date, the points were drawn lower on the page. I changed the stroke to distinct colours for each date just to check the placement was working correctly.

I really liked the visuals of having 3 seperate shapes vertically, and I felt this worked much better if it was going to be printed for a poster or billboard.

#week 11

Pretty much as soon as I decided on earthquakes as my data set, I knew I wanted my output to be circular somehow. Before I could do that I needed to have my base code that brought in the data working well so I could experiment more freely. To bring my data from a straight line output to a circle, I first created a function that calculated a point on an invisible circle every time the for loop ran.

In this case, t is the iterator, added to each loop (how far around the circle something is), and 200 is the width and height of the circle. Then I drew a point on this invisible circle for each row in the table (the for loops range). Using these same values (cx and cy) I edited my if statements for the magnitude ellipses to put them at the same co-ordinates as the points. This homemade ellipse function made the mapped ‘time’ value redundant, as I didn’t need to use it to map the position of anything anymore.

Next, I realised my ellipse function wasn’t factoring in my depth value, so that variable was going unused. I definitely wanted my circle design to represent depth, so I figured out I could map my depth value to fit around 200 (the value I was using in my ellipse function to get the width/height of the circle) making the deeper quakes appear further out from the ‘main’ circle.

I also added a new iterator, ‘cr’ that changed the red colour to be darker the further around the circle the quakes were.

#week 10

With my goal of creating a visually interesting data representation, I continued experimenting and tweaking values. I didn’t like how I was representing the quake depth in the stroke weight in the previous versions, so I remapped the depth values, and used them to add to the y position depending on how deep the quake was. This created a visual that was much easier to understand, with the deeper quakes being lower on the screen. I changed the strokeWeight to be affected by the magnitude, giving a better representation of how strong the quake was compared to others. Now that the ellipses were spread out and more transparent, I felt like they needed something to represent their center points. To do this I added a filled small circle for every ellipse that functioned as a center point.

To make the larger quakes more visually prominent, I added an if statement that asked if the magnitude was greater than 5. If the magnitude was greater than 5, the circles were less transparent, making them stand out from the other, similar sized quakes. This created an effect that I was very happy with, but I had more ideas to take it further.

#week 9

Next I wanted to bring my table into Processing and use it to start visualising the data. With help from this series of video tutorials, I created a variable corresponding to each number for each row in the table. Then using the map function (which maps a range of numbers to another range you define) I made the data from the table into ints and floats that could be used for creating ellipses. I started by mapping the magnitude values, as I wanted to use this value to affect the size of the ellipse. Then the depth value, for the ellipse stroke weight, and finally the time of day, which I wanted to map along the x axis so the ellipses would be positioned across the screen depending on the time of day they occurred. Now that I had a basic setup for visualing the data, I worked on refining it a little. I realised the placement of the ellipses on the x axis didn’t factor in the date the quakes occurred, so the 3 days worth of quakes were all placed on top of each other as if they happened in one period of 24 hours. To fix this, I tweaked the time map values and added an if statement that asked what the date was, and then defined a variable (’x’) as the offset needed for each day. To help me see if this was fixing the problem, I changed the stroke colour based on the date to see if there was any overlap between days. As well as this I changed the canvas size slightly so all the circles could be seen.

#week 9

After a bit of thinking I decided I wanted my data set to be related to the Christchurch September 4th earthquake and the subsequent aftershocks. As I’m from Christchurch and lived through these quakes, it’s something personal to me, and I thought the related data could be used for some interesting visuals.

I couldn’t find any formatted data sheets online, so I decided to make my own. Using the data from Christchurch Quake Map I copy pasted the values from the first 3 days (there were a lot of quakes) into a notepad document. The formatting I got was very messy, and wouldn’t work for extracting in Processing, so using RegExr I started formatting the data. RegExr is a very new program to me, so it took some experimenting and reading up but I figured out how to get the results I wanted, separating each piece of data with a comma, and deleting information I didn’t need such as the term ‘km’, and the month and year values in the date.

The final cleaned data contains ints and floats in a csv format that I can easily extract in Processing to use for my project.

From left to right: Magnitude, Depth (km), the day of the month (.../9/2010), and Time (24 hour)

#week 8

To start off my project, I did a little bit of research/note taking on the process of importing and using data tables within processing. This code doesn’t do anything, its pretty much just a page of notes on the formatting/java terms used

#week 8

Code That Creates

For this assignment I am very interested in exploring the Print or ‘2D’ format for creating a code output in the physical world. I want my focus to be around data visualisation using contrast and negative space to create interesting designs that could be seen on a sticker, print, or poster.

#week 7

FINAL EXPERIMENT

UNITY 3D

TESLA CUBE

My unity 3D final is an extension of my week 4 experiment LIGHT BATTERY. The base is the same, a cube with a particle system attached, duplicated on the x, y, and z axis using the Duplicatorotron, but I felt I could take this experiment further. To start, I played around with the material on the cube itself, I felt the grey colour of the first one didn’t fit the particles, so I created a metallic, transparent, and slightly emissive material that I felt worked much better.

In the first iteration of this experiment, I had the Distance Rotate Reaction script attached to the cube, and I liked the visual and interactive effect of the cubes rotating depending on how close the player was, but I liked the idea of the cubes scaling more. At the time, I didn’t have the knowledge to do it, but it turns out it was really simple. I saved a new version of the Distance Rotate script and called it DistanceScale, removed the thrust variable and the line of code within the if statement that rotated the cube:

transform.Rotate(Vector3(1000/dist, 1000/dist, 1000/dist) * (Time.deltaTime * thrust));

I then changed it to a line that scales the cube:

transform.localScale += new Vector3(0.1F, 0, 0);

which I got from here

This line as is only scales the cube by 0.1 on the x axis, but with a little playing around I figured out the other two arguments were the y and z axis, so I just copied the values to match for each. I ended up lowering the scale amount to 0.05 because 0.1 scaled the cubes too fast. While testing this new code out, I noticed that once the cubes scaled up, they stayed that way, which wasn’t what I wanted, so I added an else statement after the if statement to reset the scale of the cubes:

if (dist < distance) {

// Scales the object on all axis by 0.05 transform.localScale += new Vector3(0.05F, 0.05F, 0.05F);

} else {

// Resets the object scale transform.localScale = new Vector3(0.6F, 0.6F, 0.6F);

}

Since the if statement is saying ‘if the player is closer than 15m to the cube, scale the cube’ the else statement says ‘if the player is further than 15m from the cube, set the scale back to its original value (0.6)’

Lastly, I tweaked the particle system slightly, adding a trail effect, which draws an individual trail for each emitted particle. I had never used this setting before, and I really liked how it looked with the rest of the particles, and I think it really completed the effect on a whole.

#week 5 #final #unity

FINAL EXPERIMENT

PROCESSING

WARP DRIVE

Since my processing final is essentially the same as the original WARP DRIVE experiment from week 2, I’ll explain the code in more detail.

The first part of this experiment is the triangular cutout that contains the other functions. This is achieved by filling all of the canvas with dark grey except a triangle in the middle, which means drawing a square with fill(20) that is 800x800 (the size of the window) Since code in processing runs from top to bottom once each frame then repeats, I need the cutout code to be last, so it draws the dark on top of all the other shapes. I use the beginShape() function rather than a normal rect() function to draw this square because it gives me the ability to use beginContour() to draw a cutout within the square using any number of verticies that can be placed anywhere. The first 4 vertex() functions within the beginShape() function draw the square, and then the 3 vertex() functions within the beginContour() and endContour() draw the triangle cutout, and endShape() finishes the shape.

Next in the order is the methods that draw the circle in the center and the smaller triangle. These also need to be drawn on top of the lines, so they come after that method. The colours of these shapes need to be opposite and switch when the mouse is pressed. To do this, I created 2 if statements, one above each shape. Both have two conditions, mousePressed, meaning do this if the mouse is pressed, and else, which means any time the mouse isn’t pressed, do this. Inside each condition is a function that defines the colour of the shape (fill() and stroke() respectively) and both if/else statements have the same colour values, except inverted.

Next is the method that draws the lines that create the ‘warp’ effect. This method draws a line from the center of the triangle (width/2, (height/2)+25), to mouseX and mouseY within a random range of 400 (random(mouseX-200, mouseX +200), random(mouseY-200, mouseY +200)). I changed this second piece from the last experiment to have the random end position within a range on either side of mouseX/Y rather than the range being just mouseX/Y minus a number.

I used the same if/else statement to define the colour of the lines depending on if the mouse was pressed or not, the same colours as the circle, and the opposite colour to the triangle:

if (mousePressed) { stroke(20); } else { stroke(230); }

This if statement says that if the mouse is pressed, make the line colour the same as the background, and if it isn’t, make it light grey.

The last tweak I made adds another if statement that clears the canvas if any key is pressed:

if (keyPressed) { background(20); }

If a background() function is added to void draw() it draws a new background every frame, erasing what was drawn on the last frame, or ‘clearing’ the image. Since I want to leave the line method to create trails (multiple lines), I only set the background to be drawn once, when any key is pressed.

#week 5 #final #processing

FINAL EXPERIMENT

THREE.JS

ROSE COLLIDER

My Three.js playground final is based on my week 1 experiment ROSE TESSERACT. The base geometry and mesh.rotate values are the same, but when I revisited it, I didn’t like the effect the stationary particles had on the composition. To fix this, I first changed the particle size from 5 to 4 and experimented with adding a camera swing snippet. However, the swinging movement messed with the nice rounded trail the knot geometry created, as well as crowding the black background with particle trails. I also noticed that when the particles were far away from the camera, they got more and more black, which created a colour mix that didn’t match the rest of the colour scheme. I looked through the code and figured out I had accidentally turned on a pure black fog in the environment tab of the GUI section. I deleted this line of code:

scene.fog = new THREE.Fog( 0x000000, 1, 1000 );

and the particles immediately looked much nicer. After this, I continued looking for extra lines of unnecessary code I might have forgotten to remove, and I accidentally deleted the function that places the particles randomly:

geometry = new THREE.Geometry(); for ( i = 0; i < 5000; i ++ ) { var vertex = new THREE.Vector3(); vertex.x = 1000 * Math.random() - 500; vertex.y = 1000 * Math.random() - 500; vertex.z = 1000 * Math.random() - 500; geometry.vertices.push( vertex ); }

However, instead of breaking the code entirely, all the particles formed lines around in a circle from the centre of the canvas to the edge of the ‘rose’ trail. I’m still unsure of why the particles form these lines, but it created an effect that I really liked, so I kept it. As a final touch, I added the particle hue oscillation snippet so the particles would match the changing hue of the rose trail. With all of these snippets combined, it created the final effect that looks almost like the centre of the rose is emitting the particles.

#three.js #final #week 5

FINAL EXPERIMENT

QUARTZ COMPOSER

DRIP ³

My final for quartz is an extension of my week 3 third experiment, ‘DRIP’, which featured a particle system that followed the mouse and reacted to audio input. It created an effect almost like a pixelated dripping stream of water, but when revisiting it, I felt like I could take the idea and refine it further. I liked the physics of the first particle system I made for ‘DRIP’, with a high particle count and two math patches controlling the min and max particle size, but it looked the best when the particle stream was stationary, so I removed the mouse patch and decided to focus much more heavily on audio input reactivity. To do this, I added two more particle systems, or water sources in the case of this experiment, that I wanted to react differently to audio. Since there are plenty of inputs in the particle system patch to experiment with, I messed around with the gravity, attraction, and Y min and max velocity, but I didn’t like the results they produced when paired up with the audio input patch. For the second water source, I settled on hooking up the particle count input to the volume peak output on the audio patch, so the louder the audio, the more particles were created. I wanted to keep the particle count low to start off with, so this stream looked like only a few droplets of water were created when you make a sound. The third stream of water was a little harder to decide how I wanted it to react uniquely to sound, but I settled on linking the particle systems X position input to the volume peak output. To make this effect work I had to use an extra math patch to move the final X position over by 0.4 after it had been connected to the volume peak. This means that when you create sound, the stream moves slightly to the right.

With all 3 particle system water streams reacting uniquely to audio input, I think this is a fun interactive experience.

#week 5 #quartz composer #final

Trending Blogs

Recently Viewed Blogs

Coding for Creative Practice