Minecraft is probably one of the most well-known and well-experienced examples of generative art. A terrain generated by its algorithm can grow until it can fit the entirety of your computer’s hard drive, which is easily greater than the surface area of our planet. Each new section generated is also unique; though they follow easily understood patterns and rules, every generated section is a new area for exploration, with a random distribution of resources and dangers. The idea is to emulate the natural world, and despite the distinctive blocky graphic style, the feel of a natural world created out of fundamental forces is achieved.
This sketch was made by adapting the template. The rectangular face and many other elements are centered on the canvas by frequent use of the canvas dimensions (stored as variables) divided by half, in the shape parameters.
var noseheight = 150
var nosewidth = 50;
var facewidth = 200;
var faceheight = 150;
var eyesize = 20;
var eyedistance = 100;
var eyecolor = 0;
var canvasheight = 640;
var canvaswidth = 480;
function setup() {
createCanvas(canvaswidth, canvasheight );
}
function draw() {
background(180);
fill(100);
//draw the face;
rect((canvaswidth-facewidth)/2, (canvasheight-faceheight)/2, facewidth, faceheight);
//draw the eyes
fill(eyecolor);
ellipse((canvaswidth - eyedistance)/2, 300, eyesize, eyesize);
ellipse((canvaswidth + eyedistance)/2, 300, eyesize, eyesize);
//draw the nose
fill(100);
triangle((canvaswidth - nosewidth)/2, canvasheight/2, (canvaswidth + nosewidth)/2, canvasheight/2, canvaswidth/2, noseheight);
//draw the mouth
line(canvaswidth/2-50, (canvasheight+faceheight)/2 - 50, canvaswidth/2+50, (canvasheight+faceheight)/2 - 50);
}
function mousePressed() {
// when the user clicks, these variables are reassigned
// to random values within specified ranges. For example,
// 'faceWidth' gets a random value between 75 and 150.
eyecolor = random(0, 255);
eyesize = random(10, 30);
eyedistance = random(75, 125);
nosewidth = random(30, 70);
noseheight = random(canvasheight/2 - 20, canvasheight/2 + 20);
}
After scrolling through some of the sources provided, I became most inspired by the Dancing Robots installation at Cinder Gallery. The piece is inspired by the robotic arms producing cars at the Chrysler plant in Detroit, MI. I find it fascinating that the artists were able to produce such an abstract, thought provoking work of art out of something so mundane, materialistic, and consumer-driven.
The artists used their own custom hardware to detect vibrations in the sculpture, and their own custom application to add new points to triangles on any location of the projection. This allowed the artists to “dynamically change the projection configuration.”
This piece ties into this week’s theme of generative art by the fact that it is an interactivity-based sculpture. The audience is encouraged to listen to the music being played and to touch the sculpture; resulting, the live projections shift, and the music becomes “more immersive.”
Initially, my love for dogs motivated me to draw a dog’s face instead of a human’s, and ultimately, I found it much easier to draw a dog’s face than a human’s (based on project-01.) I think dogs can be very expressive, and I tried to convey that with movement of the eyes, ears, and mouth.
For my project, I wanted to create a message that resonates in my heart. While the variability in the faces that I created is not significant, I went for this effect to show that being a bald, green-skinned person does not make one any different than being a bald, orange-skinned person. Bald is beautiful, folks.
The work I chose to examine was “Waves” by Austrian software artist LIA. i was quickly drawn to this work by its peacefulness and calming nature. the sine wave patterns in this work are randomly generated, and don’t repeat, and upon learning this I associated something other than human with its beauty. Humans lack the ability to replicate random patterns, and tend to have flawed conceptions of what is truly “random.” The fact that this consistently random motion could only have been produced by a computer adds an additional level of awe and admiration for the program and artist that produced this installation. It is so enjoyable to just stare at this work and let it mesmerize you, in a way that is only possible through generative code.
/*
Katherine Hua
Section A
khua@andrew.cmu.edu
Project-02
*/
var x = 60;
var y = 120;
var z = 180;
var a = 240;
var b = 300;
var c = 360;
var d = 420;
var e = 3;
var f = 477;
var speed = 1;
var backgroundColorR = 250;
var backgroundColorG = 250;
var backgroundColorB = 250;
var eyeWidth = 30;
var eyeHeight = 30;
var pupilWidth = 5;
var pupilHeight = 5;
var skin = 30;
var lips = 0;
var hair = 0;
var brows = 0;
var cheekColorR = 245;
var cheekColorG = 195;
var cheekColorB = 194;
function setup() {
createCanvas(480, 640);
background(backgroundColorR, backgroundColorG, backgroundColorB);
}
function draw() {
//background
background(backgroundColorR, backgroundColorG, backgroundColorB);
ellipse(x, 80, 50, 50);
x += speed;
if (x > width + 25) {
x = -25;
}
ellipse(x, 160, 50, 50);
x += speed;
if (x > width + 25) {
x = -25;
}
ellipse(x, 240, 50, 50);
x += speed;
if (x > width + 25) {
x = -25;
}
ellipse(x, 320, 50, 50);
x += speed;
if (x > width + 25) {
x = -25;
}
ellipse(x, 400, 50, 50);
x += speed;
if (x > width + 25) {
x = -25;
}
ellipse(x, 480, 50, 50);
x += speed;
if (x > width + 25) {
x = -25;
}
ellipse(x, 560, 50, 50);
x += speed;
if (x > width + 25) {
x = -25;
}
//y
ellipse(y, 80, 50, 50);
y += speed;
if (y > width + 25) {
y = -25;
}
ellipse(y, 160, 50, 50);
y += speed;
if (y > width + 25) {
y = -25;
}
ellipse(y, 240, 50, 50);
y += speed;
if (y > width + 25) {
y = -25;
}
ellipse(y, 320, 50, 50);
y += speed;
if (y > width + 25) {
y = -25;
}
ellipse(y, 400, 50, 50);
y += speed;
if (y > width + 25) {
y = -25;
}
ellipse(y, 480, 50, 50);
y += speed;
if (y > width + 25) {
y = -25;
}
ellipse(y, 560, 50, 50);
y += speed;
if (y > width + 25) {
y = -25;
}
//z
ellipse(z, 80, 50, 50);
z += speed;
if (z > width + 25) {
z = -25;
}
ellipse(z, 160, 50, 50);
z += speed;
if (z > width + 25) {
z = -25;
}
ellipse(z, 240, 50, 50);
z += speed;
if (z > width + 25) {
z = -25;
}
ellipse(z, 320, 50, 50);
z += speed;
if (z > width + 25) {
z = -25;
}
ellipse(z, 400, 50, 50);
z += speed;
if (z > width + 25) {
z = -25;
}
ellipse(z, 480, 50, 50);
z += speed;
if (z > width + 25) {
z = -25;
}
ellipse(z, 560, 50, 50);
z += speed;
if (z > width + 25) {
z = -25;
}
//a
ellipse(a, 80, 50, 50);
a += speed;
if (a > width + 25) {
a = -25;
}
ellipse(a, 160, 50, 50);
a += speed;
if (a > width + 25) {
a = -25;
}
ellipse(a, 240, 50, 50);
a += speed;
if (a > width + 25) {
a = -25;
}
ellipse(a, 320, 50, 50);
a += speed;
if (a > width + 25) {
a = -25;
}
ellipse(a, 400, 50, 50);
a += speed;
if (a > width + 25) {
a = -25;
}
ellipse(a, 480, 50, 50);
a += speed;
if (a > width + 25) {
a = -25;
}
ellipse(a, 560, 50, 50);
a += speed;
if (a > width + 25) {
a = -25;
}
//b
ellipse(b, 80, 50, 50);
b += speed;
if (b > width + 25) {
b = -25;
}
ellipse(b, 160, 50, 50);
b += speed;
if (b > width + 25) {
b = -25;
}
ellipse(b, 240, 50, 50);
b += speed;
if (b > width + 25) {
b = -25;
}
ellipse(b, 320, 50, 50);
b += speed;
if (b > width + 25) {
b = -25;
}
ellipse(b, 400, 50, 50);
b += speed;
if (b > width + 25) {
b = -25;
}
ellipse(b, 480, 50, 50);
b += speed;
if (b > width + 25) {
b = -25;
}
ellipse(b, 560, 50, 50);
b += speed;
if (b > width + 25) {
b = -25;
}
//c
ellipse(c, 80, 50, 50);
c += speed;
if (c > width + 25) {
c = -25;
}
ellipse(c, 160, 50, 50);
c += speed;
if (c > width + 25) {
c = -25;
}
ellipse(c, 240, 50, 50);
c += speed;
if (c > width + 25) {
c = -25;
}
ellipse(c, 320, 50, 50);
c += speed;
if (c > width + 25) {
c = -25;
}
ellipse(c, 400, 50, 50);
c += speed;
if (c > width + 25) {
c = -25;
}
ellipse(c, 480, 50, 50);
c += speed;
if (c > width + 25) {
c = -25;
}
ellipse(c, 560, 50, 50);
c += speed;
if (c > width + 25) {
c = -25;
}
//d
ellipse(d, 80, 50, 50);
d += speed;
if (d > width + 25) {
d = -25;
}
ellipse(d, 160, 50, 50);
d += speed;
if (d > width + 25) {
d = -25;
}
ellipse(d, 240, 50, 50);
d += speed;
if (d > width + 25) {
d = -25;
}
ellipse(d, 320, 50, 50);
d += speed;
if (d > width + 25) {
d = -25;
}
ellipse(d, 400, 50, 50);
d += speed;
if (d > width + 25) {
d = -25;
}
ellipse(d, 480, 50, 50);
d += speed;
if (d > width + 25) {
d = -25;
}
ellipse(d, 560, 50, 50);
d += speed;
if (d > width + 25) {
d = -25;
}
//e
ellipse(e, 80, 50, 50);
e += speed;
if (e > width + 25) {
e = -25;
}
ellipse(e, 160, 50, 50);
e += speed;
if (e > width + 25) {
e = -25;
}
ellipse(e, 240, 50, 50);
e += speed;
if (e > width + 25) {
e = -25;
}
ellipse(e, 320, 50, 50);
e += speed;
if (e > width + 25) {
e = -25;
}
ellipse(e, 400, 50, 50);
e += speed;
if (e > width + 25) {
e = -25;
}
ellipse(e, 480, 50, 50);
e += speed;
if (e > width + 25) {
e = -25;
}
ellipse(e, 560, 50, 50);
e += speed;
if (e > width + 25) {
e = -25;
}
//f
ellipse(f, 80, 50, 50);
f += speed;
if (f > width + 25) {
f = -25;
}
ellipse(f, 160, 50, 50);
f += speed;
if (f > width + 25) {
f = -25;
}
ellipse(f, 240, 50, 50);
f += speed;
if (f > width + 25) {
f = -25;
}
ellipse(f, 320, 50, 50);
f += speed;
if (f > width + 25) {
f = -25;
}
ellipse(f, 400, 50, 50);
f += speed;
if (f > width + 25) {
f = -25;
}
ellipse(f, 480, 50, 50);
f += speed;
if (f > width + 25) {
f = -25;
}
ellipse(f, 560, 50, 50);
f += speed;
if (f > width + 25) {
f = -25;
}
//character shape
strokeWeight(5);
point(0, 640);
point(40, 440);
point(70,320);
point(150, 160);
point(300, 160);
point(380, 300);
point(420, 440);
point(480, 640);
strokeWeight(5);
fill(250-skin, 223-skin, 198-skin);
beginShape();
curveVertex(0, 640);
curveVertex(0, 640);
curveVertex(40, 440);
curveVertex(70, 320);
curveVertex(150, 160);
curveVertex(300, 160);
curveVertex(380, 300);
curveVertex(420, 440);
curveVertex(480, 640);
curveVertex(480, 640);
endShape();
beginShape();
curveVertex(120, 500);
curveVertex(120, 500);
curveVertex(170, 560);
curveVertex(210, 565);
curveVertex(170, 440);
curveVertex(150, 400);
curveVertex(150, 440);
endShape();
beginShape();
curveVertex(360, 500);
curveVertex(360, 500);
curveVertex(310, 560);
curveVertex(270, 565);
curveVertex(310, 440);
curveVertex(330, 400);
curveVertex(330, 440);
endShape();
//hair
if (hair < 1) {
fill(0, 0, 0)
arc(230, 280, 300, 300, PI, 0);
fill(250-skin, 223-skin, 198-skin);
noStroke();
quad(100, 280, 120, 230, 340, 230, 360, 280);
}
else if (hair < 2) {
fill(0, 0, 0)
arc(230, 280, 350, 300, PI, 0);
fill(250-skin, 223-skin, 198-skin);
noStroke();
quad(100, 280, 120, 230, 340, 230, 360, 280);
fill(0,0,0);
rect(52, 275, 50, 125, 5);
rect(358, 275, 50, 125 ,5);
}
else if (hair < 3) {
fill(0, 0, 0)
arc(230, 280, 290, 350, PI, 0);
ellipse(120, 120, 75, 75);
ellipse(340, 120, 75, 75);
fill(250-skin, 223-skin, 198-skin);
noStroke();
quad(100, 280, 120, 230, 340, 230, 360, 280);
}
else if (hair < 4) {
fill(0, 0, 0)
arc(230, 280, 290, 350, PI, 0);
ellipse(57, 280, 80, 50);
ellipse(403, 280, 80, 50);
fill(250-skin, 223-skin, 198-skin);
noStroke();
quad(100, 280, 120, 230, 340, 230, 360, 280);
}
//brows
if (brows < 1) {
stroke(0,0,0);
noFill();
arc(180, 275, 30, 30, PI+QUARTER_PI, -QUARTER_PI);
arc(270, 275, 30, 30, PI+QUARTER_PI, -QUARTER_PI);
}
else if (brows < 2) {
stroke(0,0,0);
noFill();
arc(180, 275, 30, 30, PI, PI+HALF_PI);
arc(270, 275, 30, 30, PI+HALF_PI, 0);
}
else if (brows < 3) {
stroke(0,0,0);
noFill();
arc(180, 275, 30, 30, PI+HALF_PI, 0);
arc(270, 275, 30, 30, PI, PI+HALF_PI);
}
else if (brows < 4) {
stroke(0,0,0);
noFill();
arc(180, 250, 30, 30, QUARTER_PI, HALF_PI+QUARTER_PI);
arc(270, 250, 30, 30, QUARTER_PI, HALF_PI+QUARTER_PI);
}
//eyes
//whites
fill(255);
ellipse(180, 300, eyeWidth, eyeHeight);
ellipse(270, 300, eyeWidth, eyeHeight);
//pupil
fill(0);
ellipse(180, 300, pupilWidth, pupilHeight);
ellipse(270, 300, pupilWidth, pupilHeight);
//lips
if (lips < 1) {
fill(244, 49, 33);
ellipse(225, 310, 40, 20);
ellipse(225, 300, 40, 15);
}
else if (lips < 2) {
fill(244, 49, 33);
ellipse(225, 310, 40, 20);
ellipse(225, 300, 40, 15);
fill(0);
ellipse(225, 307, 20, 5);
}
else if (lips < 3) {
fill(244, 49, 33);
ellipse(225, 310, 40, 20);
ellipse(225, 300, 40, 15);
fill(0);
ellipse(225, 307, 20, 5);
noFill();
arc(190, 310, 30, 30, PI+HALF_PI+QUARTER_PI, QUARTER_PI);
arc(260, 310, 30, 30, HALF_PI+QUARTER_PI, PI+QUARTER_PI);
}
else if (lips < 4) {
fill(244, 49, 33);
ellipse(225, 310, 40, 20);
ellipse(225, 300, 40, 15);
noFill();
arc(190, 310, 30, 30, PI+HALF_PI+QUARTER_PI, QUARTER_PI);
arc(260, 310, 30, 30, HALF_PI+QUARTER_PI, PI+QUARTER_PI);
}
//cheeks
fill(cheekColorR, cheekColorG, cheekColorB);
noStroke();
ellipse(140, 320, 40, 20);
ellipse(320, 320, 40, 20);
stroke(0,0,0);
}
function mousePressed() {
backgroundColorR = random(200, 255);
backgroundColorG = random(137, 255);
backgroundColorB = random(175, 255);
eyeWidth = random (30, 40);
eyeHeight = random(15, 30);
pupilWidth = random(1,7);
pupilHeight = random(1,7);
skin = random(1, 150);
lips = random(4);
hair = random(4);
brows = random(4);
cheekColorR = random(220, 255);
cheekColorG = random(180, 255);
cheekColorB = random(139, 255);
}
This character is inspired by one of my favorite visual artists, Ton Mak’s character, flabjacks. At first, I had a difficult time figuring out how to randomize characteristics such as the mouth, hair, and eyebrows because the it was not simply randomizing components such as width, height, and color. Finally, after a lot of trial and error, I figured out I could use the if, else if functions to accomplish what I wanted. This project also allowed me to become more familiar with the arc and curveshape functions.
As a child, one of my favorite cartoons was Doraemon. I always wondered if there were more to the Doraemon family and if they were in different colors. I also took inspiration from a scene in Guardians of the Galaxy volume 2, I’m not gonna specify which scene.
Client: In collaboration with JAC studios & No Parking and supported by the Esbjerg Municipality
Location: Wadden Sea Visitor Centre, Vester Vedsted, Denmark
Year: 2017
In 2014 Jason Bruges Studio won the competition, in collaboration with JAC Studios, to create an immersive installation that represents the 12 million migratory birds and the unique landscape of the Nationalpark. Digital Ornithology is the last sequence of the exhibition, which follows a journey of exploration and discovery of the native birds, to being fully immersed in their unique habitat and behaviours. The space allows visitors to be at eye height and experience the take off and landings at close proximity, thereby amplifying the presence of the birds. The installation is comprised of 562 LCD screens suspended from the ceiling in a sequence that represents the migration of the birds. With an amalgamation of projection mapping of live footage and the light-modulating behaviour of the LCD’s, the result is an ephemeral and captivating acquaintance.
This is a very neat project which has no extra unnecessary information, but still you can immerse yourself in it by simple light, shadow and sound. It has strong intent of raising the awareness of protecting creatures by looking into the way they live closer than we usually.
I started using CurveVertex in this project and turn out a very smooth curve.
Hair color, mouth color and size of eyes and nose are changing with every click. I had a lot of fun in this.
![[OLD FALL 2018] 15-104 • Introduction to Computing for Creative Practice](../../../../wp-content/uploads/2020/08/stop-banner.png)
