jono-bailey-creativecoding
jono-bailey-creativecoding
Creative Coding
43 posts
Don't wanna be here? Send us removal request.
Text
Polar Opposite
My final output from code is two parametric sculpture designs based off the maximum sea ice extent of the North and South Pole. Resulting in a large scale art installation physically showcasing the impacts of climate change on our polar ice caps. There are 40 ‘slices’ stacked on top of each other creating the form of a parametric sculpture form Each ‘slice’ refers the maximum extent of sea ice in its year, larger shape = greater sea ice, smaller shape = less sea ice.
The purpose of this installation is to showcase and compare the impacts we have on our ice caps. Evidently clear that the Antarctic ice cap has been more impacted by climate change over recent years than the Arctic. Hopefully viewers are able to be shocked and realise change is needed to repair our actions.
The final output is laser cut sheets of plywood stacked on top of each other creating an interesting and contrasting 3D form. Each ring is made with a blob code on processing which I have adapted and adjusted to work with my data sets. I've changed the code’s radius to include and adjust for the data set of maximum sea ice extent of the Arctic and Antarctic, by making it change size in accordance to the data. This allows me to achieve my desired output while also creating a shocking effect through the form of parametric sculpture.
The code create stays in the same shape for 40 frames and then after creates a new form after making it unique each and every time it its run. But still retains the form and contrast of each form.
I want people to look at the forms and see the vast difference between the two polar ice caps and evoke change and shock onto the viewer. 
If I could develop this out put further I may want to seed how changing the material to coloured acrylic and see the effect and impact that it makes then. But all round I really like my output and see that it is very fit for purpose, and the development of my understanding of code has increased dramatically. I will definitely continue to use code in my future studies.,
Tumblr media Tumblr media Tumblr media Tumblr media Tumblr media
0 notes
Photo
Tumblr media Tumblr media Tumblr media Tumblr media Tumblr media
Entourage for my output from processing
It is going to be an art installation piece to physically showcase the impact climate change has on our polar ice caps.
The area I want it to end up in is an art gallery or open public spaces as I want it to the public to engage and interact with the piece.
0 notes
Photo
Tumblr media
Exhibition Day
Presenting my project - Polar Opposites
Showing my classmates the impact that we have on the Antarctic and the comparison of the 2 different yet similar environments.
I think the name also helps reinforce and emphasise the difference between the two while also being a good little pun.
0 notes
Photo
Tumblr media Tumblr media Tumblr media Tumblr media Tumblr media Tumblr media
Construction Process of joining the stacks
In creating this code design I added a centre ellipse into the code so that there was a reference point once the slices had been cut. This allowed me to stack the slices into the correct orientation and ensure that were stacked correctly on top of each other.
I joined the slices with wood glue and spread it out to ensure using the adhesive to an appropriate quantity. Stacking each layer on top of each other until reaching the final disc, and like that the forms are completed.
0 notes
Text
First Part of Construction process underway
Laser Cutting my individual slices- Once I exported my frames from processing into a many paged PDF I was able to bring these paths made by my code across to Illustrator where I am able to print to the laser cutter.
I laid the paths onto the laser bed template and changed the colour of the paths to laser red. By doing do this means that the machine will do full cut out of the material into the desired shape I want.
South
Tumblr media
North
Tumblr media
I chose plywood as my chosen material as it is a natural material but also showcases the extent and change in this outcome. This is due to its solid nature it shows each individual layer.
vimeo
0 notes
Text
SOLVED!!!!!!!
With help from Harry in class I was able to finally achieve what I was wanting to achieve in the first place. Instead of trying to make individual stills on processing Harry guide me into changing the code by effecting the radius of the blob shape in each frame and then exporting each frame as a slice.
The only change required from the original code is to load in the data of the maximum sea ice extent and create a line to tell the code that the radius must change to match with the number in the certain column. The movement goes for 40 frames then starts off with a new form/shape as this is more an algorithm than a structured one sided code that produces only one output, this code is able to achieve many different styles and outcomes from the code, this occurs every 40 frames in the design.
Harry also showed me how to change the radius of the shape to alter different outcomes with the original code, like changing rad=-- which causes it to get smaller and smaller each time until it reaches centre. Hence by affecting this function in the code I am able to achieve the outcome I wanted.
Code
float resolution = 13;  float rad = 700;  float x;   float y;  float round = random(0, 100); 
float nVal;  float nInt = 10;  float nAmp = 0.4; float nSeed = random(0, 1000); 
float t = 0;  float tChange = 0.01; 
Table iceExtentN;
void setup() {  size(1000, 1000);    iceExtentN = loadTable("northern_extent.csv", "header");    }
void draw() {  //background(255);  ellipse(width/2,height/2, 31,31);  pushMatrix();   translate(width/2, height/2);    noiseDetail(3, 0);   //stroke();    //fill(100);   noFill();
 rad=iceExtentN. getFloat(frameCount%41,5)*30;  beginShape();    for (float a=-1; a <= TWO_PI; a += TWO_PI/resolution) {  
   nVal = map(noise(cos(a)*nInt+nSeed, sin(a)*nInt+nSeed, t), 0.0, 1.0, nAmp, 1.0); 
   x = cos(a)*(rad+round) *nVal;      y = sin(a)*rad *nVal;  
   curveVertex(x, y);    }  endShape(CLOSE); 
 popMatrix(); 
 t += tChange;
}
}
Output
vimeo
Tumblr media
0 notes
Text
Tumblr media Tumblr media
Iteration ideas
With the code currently proving an issue I have looked into any other way of making this idea easier to produce but may result in a very different output.
The other ideas I have is to take frames from moving blob and cut out of a simple shape eg circle to give a parametric effect. Developing on this idea is to change the radius of the circle to match with the data of that year so it is able to showcase the change in the data throughout the years.
In reality I really want to achieve my original plan of making parametric forms but I may need a back up to be able to produce an output for the hand in date.
0 notes
Text
How to add for loop?
Looking at this code I could rearrange the for loop to change areas which my data could affect and adjust the form.
Possibility???
for (int i=0; i <= TWO_PI ; i+= TWO_PI/resolution){ //(float a=-1; a <= TWO_PI; a += TWO_PI/resolution) {  // Create points around a full circle (TWO_PI) and distribute them based on resolution    nVal = map(noise(cos(iceExtentS. getFloat (i,5))*nInt+nSeed, sin(iceExtentS. getFloat (i,5))*nInt+nSeed, t), 0.0, 1.0, nAmp, 1.0);  //  Map noise value to match the fluctuation      x = cos(iceExtentS. getFloat (i,5))*(rad+round) *nVal;  //  The X coordinate of the point (radius + roundness)      y = sin(iceExtentS. getFloat (i,5))*rad *nVal;  // The Y coordinate of the point
-DID NOT WORK- resulted in a blank canvas with nothing on it, I believe this is due to having int i= 0 instead of float i=0 at the start of the for loop, my data isn’t whole integers but have decimal place which int fuction won’;t be able to read so I need to replace int function with a float function.
Revised
for (float i=0; i <= TWO_PI ; i+= TWO_PI/resolution){ //(float a=-1; a <= TWO_PI; a += TWO_PI/resolution) {  // Create points around a full circle (TWO_PI) and distribute them based on resolution    
println("Spreadsheet data: " + iceExtentS.getFloat(int(i),5));
   nVal = map(noise(cos(iceExtentS.getFloat(int(i),5))*nInt+nSeed, sin(iceExtentS.getFloat(int(i),5))*nInt+nSeed, t), 0.0, 1.0, nAmp, 1.0);  //  Map noise value to match the fluctuation      println("nVal: " + nVal);
   x = cos(iceExtentS.getFloat(int(i),5))*(rad+round) *nVal;  //  The X coordinate of the point (radius + roundness)      y = sin(iceExtentS.getFloat(int(i),5))*rad *nVal;  // The Y coordinate of the point
-STILL NOT WORKING- Not creating the effect i wanted and instead is making a small jaggered shape on the canvas. This could be that the code is trying to grab all data points and therefore creating the 40 points at the same time and distorting outcome and the original output of this code. Maybe isolating one set of coordinates from the table might achieve the desired output?
May need to go back to the drawing board as this is proving more difficult the more I try to adapt this code to create the desired outcome.
0 notes
Text
Tumblr media
New and revised workflow
Since he_mesh isn’t working I’ve decided to just export frames of the design changing the whole workflow process
0 notes
Text
Blob Code
After struggling with trying to make Bezier curves to match I resorted to trying to find a similar code on the internet. I found this code from Rasmus Hetoft Hansen which made a moving blob form. I want to create stills of each individual layer/slice which this is making quite hard to do so, I’m going to add noLoop(); function into the code to make statics but it creating an appropriate for loop to create the correct dimensions and shapes for my layers.
From what I understand the code is creating this form by using multiple vertices with multiple different line paths of cosine and sine wave resulting in a blob like form. By adjusting the float resolution number it adjust the amount of vertices, larger number more vertices and smaller results in less and a circle like form. The shape and bumpy-ness can also be adjusted by changing the nAmp to <0.4 which make it less bumpy and more circular, or >0.4 which make it more bumpy and blob like.
Code
float resolution = 13;  // Number of vertices in blob (works best from 13+) float rad = 300;  // Radius of Blob float x;  // X-coordinate on vertex float y;  // Y-coordinate on vertex float round = random(0, 100); // Roundness - the larger the number, the more elongated float nVal; // Noise: Value float nInt = 10; // Noise: Intensity float nAmp = 0.4; // Noise: Fluctuations float nSeed = random(0, 1000); // Noise: Unique Value float t = 0; // Time Passed float tChange = 0.01; // How fast time goes void setup() {  size(1000, 1000);  void draw() {  background(255);  pushMatrix();  // Isolate location for each blob (push)  translate(width/2, height/2);  noiseDetail(3, 0);  // Noise values  noStroke();  //  fill(100);  //  /* Creating blobform */  beginShape();  // Begin form  for (float a=-1; a <= TWO_PI; a += TWO_PI/resolution){ //(float a=-1; a <= TWO_PI; a += TWO_PI/resolution) {  // Create points around a full circle (TWO_PI) and distribute them based on resolution    nVal = map(noise(cos(a)*nInt+nSeed, sin(a)*nInt+nSeed, t), 0.0, 1.0, nAmp, 1.0);  // Map noise value to match the fluctuation    x = cos(a)*(rad+round) *nVal;  // The X coordinate of the point (radius + roundness)    y = sin(a)*rad *nVal;  // The Y coordinate of the point    curveVertex(x, y);  // Create curveVertex point based on coordinates  }  endShape(CLOSE);  // Finish form  popMatrix();  // Isolate location for each blob (pop)  t += tChange; }
}
Output
vimeo
https://discourse.processing.org/t/help-creating-organic-looking-blobs/8777
0 notes
Photo
Tumblr media
Interim feedback form from class
They really seem to like the interim model for this design which is a good sign so hopefully I am able to create a code and be capable of create this design through processing.
0 notes
Text
Tumblr media Tumblr media Tumblr media
Interim Output
I created a form using fusion 360 and exported and imported that across to slicer which provide the paths and shape for this form.
Once I have the paths I will change their colour to the relevant colour (red-full cut) and cut out using lasercutter. And then stack the shapes on top of each other to create form.
Next step is to achieve creating this type of form using processing and code from my data. This is becoming a large issue which I’m having trouble figuring out how to make these shapes on processing.
0 notes
Text
Tumblr media
Proposed workflow
Start from data csv of sea ice cap extent, go into processing in hope to create a 3D form with HE_Mesh on processing, export out as a stl or obj file and import into slicer to create parametric form slices.
Once I have the slices I’ll will export out of slicer as a PDF and bring it into Adobe Illustrator to have vector paths. Then change the colour of the slices path to red to cut out the slices. Cut out slices on lasercutter and then finally stack and connect the slices together.
0 notes
Photo
Tumblr media
Chosen Data For Output
With the 2D blob-like shape taking such a natural form it looks like a birds eye view of a sea ice cap. So I’ve decide to take the data of the maximum sea ice extent in the Arctic and Antarctic. I feel as this is relevant and appropriate for this type of output.
0 notes
Photo
Tumblr media Tumblr media Tumblr media Tumblr media
Entourages looking at size and various areas of placement for this proposed installation piece
0 notes
Photo
Tumblr media Tumblr media Tumblr media
Entourage Practice from in class
0 notes
Text
Learning of for loop
On processing we are able to load a data set using a for loop to create a creative output. Firstly we need to set a variable into the code which we set as a Table called all birthdays. This allows for the code to recognise when adding for loop and also recognise the data set being provided to the code. In the for loop we used the data set of the class birthdays to adjust the radius of an ellipse on the canvas, the code will grab an integer from the data and bring that into the code. This allows for more than one ellipse to be drawn at one time making it easier to create an output with data.
Tumblr media Tumblr media Tumblr media
0 notes