Final Project Ashe
Hello,
We finally finished the code and are ready to present.
"Generative art refers to any art practice where the artist uses a system, such as a set of natural language rules, a computer program, a machine, or other procedural invention, which is set into motion with some degree of autonomy contributing to or resulting in a completed work of art.
The key element in generative art is then the system to which the artist cedes partial or total subsequent control. And with this definition some related art theory questions come quickly to mind.
A hint as to how that conversation might go will be offered at the end of this paper. For now here are some observations about this definition. First, note that the term generative art is simply a reference to how the art is made, and it makes no claims as to why the art is made this way or what its content is.
Second, generative art is uncoupled from any particular technology. Generative art may or may not be “high tech”. Third, a system that moves an art practice into the realm of generative art must be well defined and self-contained enough to operate autonomously."
(Philip Galanter, 2003, What is Generative Art? Complexity Theory as a Context for Art Theory)
I love this definition of Generative art. That is the main goal of our project.
Our project is an artistic representation of us, as different individuals working together. We are in fact, 5 people with completely different background, culture and habits. We all have different origins from 5 different countries.
That is why we chose to represent the population of our 5 countries of origin interacting with each other.
This is how it looks like:
The different diameters of the ellipses are given by the number of the population of our five countries: Italy, UK, Jamaica, Sweden and Uganda on the date of today, 5/05/2018.
We are taking the informations from 5 different json links.
It is hosted on the server Alessia gave us.
(The code is at the end of the page).
Since the last update we changed the colours, following a palette, thickness of the lines, refreshing interval and position on the canvas.
We are overall satisfied with the result, with a bit more time I could have work out how to edit the noise function to make the animation more harmonic.
I still like the look it has now, it has a strong meaning and it is linked to the show "Are we all addict now" we have seen by representing the way our government stores all the data of our deaths and births and other many informations.
We used many references to make this code, in particular this page that Alessia kindly shared with us, wich explains how the noise function works, and from where we took the code that we edited:
http://genekogan.com/code/p5js-perlin-noise/
And the page where we took the API from:
http://api.population.io/
Unfortunately this page is taking the API from another source but the link they put to access it does not work, so we cannot reach it. It would have been interesting to see how it worked, explained on GitHub.
Thank you for reading my blog!
Eleonora
Here the final code:
var t;
var uk_population;
var jamaica_population;
var sweden_population;
var uganda_population;
var italy_population;
function setup() {
createCanvas(1500, 1200);
loadJSON('http://api.population.io/1.0/population/United%20Kingdom/2018-05-04/?format=json', gotData);
loadJSON('http://api.population.io/1.0/population/Jamaica/2018-05-04/?format=json', gotData1);
loadJSON('http://api.population.io/1.0/population/Sweden/2018-05-04/?format=json', gotData2);
loadJSON('http://api.population.io/1.0/population/Uganda/2018-05-04/?format=json', gotData3);
loadJSON('http://api.population.io/1.0/population/Italy/2018-05-04/?format=json', gotData4);
background(255);
t = 0;
}
function gotData(data) {
//println(data);
uk_population = data;
if (uk_population){
uk_population = uk_population.total_population.population;
console.log(uk_population);
}
}
function gotData1(data) {
//println(data);
jamaica_population = data;
if (jamaica_population){
jamaica_population = jamaica_population.total_population.population;
console.log(jamaica_population);
}
}
function gotData2(data) {
//println(data);
sweden_population = data;
if (sweden_population){
sweden_population = sweden_population.total_population.population;
console.log(sweden_population);
}
}
function gotData3(data) {
//println(data);
uganda_population = data;
if (uganda_population){
uganda_population = uganda_population.total_population.population;
console.log(uganda_population);
}
}
function gotData4(data) {
//println(data);
italy_population = data;
if (italy_population){
italy_population = italy_population.total_population.population;
console.log(italy_population);
}
} //added colours
function italyColor() {
colorMode(RGB, 255, 255, 255, 51)
strokeWeight(1);
stroke(123,212,204, 10);
noFill();
}
function ugandaColor(){
colorMode(RGB, 255, 255, 255, 30)
stroke(0,40,31, 2);
noFill();
}
function swedishColor(){
colorMode(RGB, 255, 255, 255, 51)
stroke(190,164,46, 4);
noFill();
}
function jamaicaColor(){
colorMode(RGB, 255, 255, 255, 51)
stroke(50,87,175, 1);
noFill();
}
function ukColor(){
colorMode(RGB, 255, 255, 255, 30)
stroke(184,62,116, 4);
noFill();
}
function draw() {
translate(width/3, height/2); //Changed width from 2 to 3
beginShape();
for (var i = 0; i < 200; i++) {
var ang = map(i, 0, 200, 0, TWO_PI);
var rad = uk_population/100000 * noise(i * 0.01, t * 0.005);
var x = rad * cos(ang);
var y = rad * sin(ang);
curveVertex(x, y);
ukColor();
}
endShape(CLOSE);
t += 1;
beginShape();
translate(width/-5, height/5);
for (var i = 0; i < 200; i++) {
var ang = map(i, 0, 200, 0, TWO_PI);
var rad = sweden_population/100000 * noise(i * 0.01, t * 0.005);
var x = rad * cos(ang);
var y = rad * sin(ang);
curveVertex(x, y);
swedishColor();
}
endShape(CLOSE);
t += 1;
translate(width/3, height/-10,5);
beginShape();
for (var i = 0; i < 200; i++) {
var ang = map(i, 0, 200, 0, TWO_PI);
var rad = jamaica_population/100000 * noise(i * 0.01, t * 0.005);
var x = rad * cos(ang);
var y = rad * sin(ang);
curveVertex(x, y);
jamaicaColor();
}
endShape(CLOSE);
t += 1;
translate(width/8, height/-5);
beginShape();
for (var i = 0; i < 200; i++) {
var ang = map(i, 0, 200, 0, TWO_PI);
var rad = italy_population/100000 * noise(i * 0.01, t * 0.005);
var x = rad * cos(ang);
var y = rad * sin(ang);
curveVertex(x, y);
italyColor();
}
endShape(CLOSE);
t += 1;
translate(width/8, height/5);
beginShape();
for (var i = 0; i < 200; i++) {
var ang = map(i, 0, 200, 0, TWO_PI);
var rad = uganda_population/100000 * noise(i * 0.01, t * 0.005);
var x = rad * cos(ang);
var y = rad * sin(ang);
curveVertex(x, y);
ugandaColor();
}
endShape(CLOSE);
t += 1;
// clear the background every 600 frames using mod (%) operator
if (frameCount % 500 == 0) {
background(255);
}
}
We finally finished the code and are ready to present.
"Generative art refers to any art practice where the artist uses a system, such as a set of natural language rules, a computer program, a machine, or other procedural invention, which is set into motion with some degree of autonomy contributing to or resulting in a completed work of art.
The key element in generative art is then the system to which the artist cedes partial or total subsequent control. And with this definition some related art theory questions come quickly to mind.
A hint as to how that conversation might go will be offered at the end of this paper. For now here are some observations about this definition. First, note that the term generative art is simply a reference to how the art is made, and it makes no claims as to why the art is made this way or what its content is.
Second, generative art is uncoupled from any particular technology. Generative art may or may not be “high tech”. Third, a system that moves an art practice into the realm of generative art must be well defined and self-contained enough to operate autonomously."
(Philip Galanter, 2003, What is Generative Art? Complexity Theory as a Context for Art Theory)
I love this definition of Generative art. That is the main goal of our project.
Our project is an artistic representation of us, as different individuals working together. We are in fact, 5 people with completely different background, culture and habits. We all have different origins from 5 different countries.
That is why we chose to represent the population of our 5 countries of origin interacting with each other.
This is how it looks like:
The different diameters of the ellipses are given by the number of the population of our five countries: Italy, UK, Jamaica, Sweden and Uganda on the date of today, 5/05/2018.
We are taking the informations from 5 different json links.
It is hosted on the server Alessia gave us.
(The code is at the end of the page).
Since the last update we changed the colours, following a palette, thickness of the lines, refreshing interval and position on the canvas.
We are overall satisfied with the result, with a bit more time I could have work out how to edit the noise function to make the animation more harmonic.
I still like the look it has now, it has a strong meaning and it is linked to the show "Are we all addict now" we have seen by representing the way our government stores all the data of our deaths and births and other many informations.
We used many references to make this code, in particular this page that Alessia kindly shared with us, wich explains how the noise function works, and from where we took the code that we edited:
http://genekogan.com/code/p5js-perlin-noise/
And the page where we took the API from:
http://api.population.io/
Unfortunately this page is taking the API from another source but the link they put to access it does not work, so we cannot reach it. It would have been interesting to see how it worked, explained on GitHub.
Thank you for reading my blog!
Eleonora
Here the final code:
var t;
var uk_population;
var jamaica_population;
var sweden_population;
var uganda_population;
var italy_population;
function setup() {
createCanvas(1500, 1200);
loadJSON('http://api.population.io/1.0/population/United%20Kingdom/2018-05-04/?format=json', gotData);
loadJSON('http://api.population.io/1.0/population/Jamaica/2018-05-04/?format=json', gotData1);
loadJSON('http://api.population.io/1.0/population/Sweden/2018-05-04/?format=json', gotData2);
loadJSON('http://api.population.io/1.0/population/Uganda/2018-05-04/?format=json', gotData3);
loadJSON('http://api.population.io/1.0/population/Italy/2018-05-04/?format=json', gotData4);
background(255);
t = 0;
}
function gotData(data) {
//println(data);
uk_population = data;
if (uk_population){
uk_population = uk_population.total_population.population;
console.log(uk_population);
}
}
function gotData1(data) {
//println(data);
jamaica_population = data;
if (jamaica_population){
jamaica_population = jamaica_population.total_population.population;
console.log(jamaica_population);
}
}
function gotData2(data) {
//println(data);
sweden_population = data;
if (sweden_population){
sweden_population = sweden_population.total_population.population;
console.log(sweden_population);
}
}
function gotData3(data) {
//println(data);
uganda_population = data;
if (uganda_population){
uganda_population = uganda_population.total_population.population;
console.log(uganda_population);
}
}
function gotData4(data) {
//println(data);
italy_population = data;
if (italy_population){
italy_population = italy_population.total_population.population;
console.log(italy_population);
}
} //added colours
function italyColor() {
colorMode(RGB, 255, 255, 255, 51)
strokeWeight(1);
stroke(123,212,204, 10);
noFill();
}
function ugandaColor(){
colorMode(RGB, 255, 255, 255, 30)
stroke(0,40,31, 2);
noFill();
}
function swedishColor(){
colorMode(RGB, 255, 255, 255, 51)
stroke(190,164,46, 4);
noFill();
}
function jamaicaColor(){
colorMode(RGB, 255, 255, 255, 51)
stroke(50,87,175, 1);
noFill();
}
function ukColor(){
colorMode(RGB, 255, 255, 255, 30)
stroke(184,62,116, 4);
noFill();
}
function draw() {
translate(width/3, height/2); //Changed width from 2 to 3
beginShape();
for (var i = 0; i < 200; i++) {
var ang = map(i, 0, 200, 0, TWO_PI);
var rad = uk_population/100000 * noise(i * 0.01, t * 0.005);
var x = rad * cos(ang);
var y = rad * sin(ang);
curveVertex(x, y);
ukColor();
}
endShape(CLOSE);
t += 1;
beginShape();
translate(width/-5, height/5);
for (var i = 0; i < 200; i++) {
var ang = map(i, 0, 200, 0, TWO_PI);
var rad = sweden_population/100000 * noise(i * 0.01, t * 0.005);
var x = rad * cos(ang);
var y = rad * sin(ang);
curveVertex(x, y);
swedishColor();
}
endShape(CLOSE);
t += 1;
translate(width/3, height/-10,5);
beginShape();
for (var i = 0; i < 200; i++) {
var ang = map(i, 0, 200, 0, TWO_PI);
var rad = jamaica_population/100000 * noise(i * 0.01, t * 0.005);
var x = rad * cos(ang);
var y = rad * sin(ang);
curveVertex(x, y);
jamaicaColor();
}
endShape(CLOSE);
t += 1;
translate(width/8, height/-5);
beginShape();
for (var i = 0; i < 200; i++) {
var ang = map(i, 0, 200, 0, TWO_PI);
var rad = italy_population/100000 * noise(i * 0.01, t * 0.005);
var x = rad * cos(ang);
var y = rad * sin(ang);
curveVertex(x, y);
italyColor();
}
endShape(CLOSE);
t += 1;
translate(width/8, height/5);
beginShape();
for (var i = 0; i < 200; i++) {
var ang = map(i, 0, 200, 0, TWO_PI);
var rad = uganda_population/100000 * noise(i * 0.01, t * 0.005);
var x = rad * cos(ang);
var y = rad * sin(ang);
curveVertex(x, y);
ugandaColor();
}
endShape(CLOSE);
t += 1;
// clear the background every 600 frames using mod (%) operator
if (frameCount % 500 == 0) {
background(255);
}
}
Comments
Post a Comment