Phil McCarthy created the project Pareidoloop, which combines a facial recognition algorithm with a random polygon generator algorithm to produce a somewhat recognizable face. The programs works by generating random sized, coloured and shaped polygons that are then layered on top of each other until the facial recognition algorithm recognizes a face. All other variables, except the random polygon generator, can be set by the user, such as size of image, fitness or how likely the “face” matches an actual face and number of generations. The maximum fitness level is 35, where the lower the number, the faster the image renders but the rendered face may not be recognizable. Number of generations is how many times the code runs until it stops to find another face. McCarthy was inspired by the idea of pareidolia, which is a when the mind responds to an image by perceiving a pattern within random data. An example of that would be objects in cloud formations or Pixar’s The Blue Umbrella short film.
Different possibilities to the pareidoloop code
There are certain user controlled variables, yet each time the code runs, the generated image is very different. There are so many different possibilities to this code. What I like about this project is how a face is a very defined image, but even when abstracted into simple polygons, from a distance, each face looks different from each other.
//GyuEun Park
//15-104 E
//gyueunp@andrew.cmu.edu
//Project-06
var maxDiameter = 120;
var theta = 0;
var x = []; // every variable now starts out as an empty array
var y = [];
var dx = []; // velocity in x direction (d for "delta" meaning change or difference)
var dy = []; // velocity in y direction
var col = [];
function setup() {
createCanvas(400, 400);
// the radius of the circle
r = height * 0.3;
speed = 10;
theta = 0;
startTime= second();
for (i = 0; i < 50; i++) {
x[i] = random(width);
y[i] = random(height);
dx[i] = random(-5, 5);
dy[i] = random(-5, 5);
col[i] = color(255,50);
}
frameRate(50);
}
function draw() {
background(117, 2, 21, 10);
push();
var diam = 150 + sin(theta) * maxDiameter ;
stroke(117, 2, 21,80);
strokeWeight(10);
fill(255,13);
ellipse(width/2, height/2, diam, diam);
theta += 10;
pop();
push();
angleMode(DEGREES);
translate(200,200);
rotate(-90);
// time variables
var hr = hour();
var mn = minute();
var sec = second();
stroke(0);
var secAngle = map(sec,0,60,0,360);
stroke(0);
var mnAngle = map(mn,0,60,0,360);
// restart once it gets to 12 and 13 becomes 1 o'clock
stroke(0);
var hrAngle = map(hr%12,0,12,0,360);
// second hand, highlight on iris
push();
rotate(secAngle);
translate(5,5);
stroke(255);
fill(255);
ellipse(0,0,3,3);
pop();
// minute hand, iris
push();
if (mn % 2 == 0){
stroke(255);
ellipse(0,0,40,40);
} else {
stroke(158,3,29);
fill(158,3,29,10);
ellipse(0,0,40,40);
}
pop();
// hour hand, sclera
push();
if (hr % 2 == 0){
stroke(157,8,32);
strokeWeight(10);
noFill();
ellipse(0,0,385,385);
} else {
stroke(157,8,32);
strokeWeight(10);
noFill();
ellipse(0,0,280,280);
}
pop();
pop();
// stagnant pupil in the center of canvas
push();
fill(158,3,29)
stroke(158,3,9,30);
strokeWeight(10,2);
ellipse(width/2,height/2,10,10);
pop();
// swimming rectangles
noStroke();
for (i = 0; i < 20; i++) {
fill(col[i]);
rect(x[i], y[i], 10, 10);
x[i] += dx[i];
y[i] += dy[i];
if (x[i] > width) x[i] = 0;
else if (x[i] < 0) x[i] = width;
if (y[i] > height) y[i] = 0;
else if (y[i] < 0) y[i] = height;
}
}
This abstract clock resembles an eye in that it is composed of various circular forms that are distinct from one another. The rapid blink-like movement and the gliding objects do not represent the time, but instead add a sense of agitation and discomfort. In fact, the subtle alterations of object positions and colors are the components that represent time. In short, this project portrays not only the repetitive nature of time, but also the sense of tension that is created by the limitation of time.
http://www.cmu.edu/news/stories/archives/2017/august/butterfly-sounds.html
This piece is an evolving sound composition created by a class I was in Junior year. The Phipps hosts a butterfly bloom every year, and my class wrote generative music compositions within the space. The class split into about 10 teams, and wrote a sound piece using random event triggers to play an ambient melody.
In this project, randomness played a crucial role for the experience within the space. One lesson we learned about in the class is that predicable/repetitive beats can impose undesired movement within a space. We used the randomness to unify each teams individual compositions. Because there was no specific beat to the songs, a pleasant tone was set in the garden space.
Another concept we learned about randomness is evolution. If a framework for a musical or artistic piece is designed to allow for chance, the experience is always different. A viewer can explore the space on their own time, without fear of missing out.
var eyeballx;
var eyebally;
var mouthp=326;
var hourF=255;
var minuteF=255;
var secondF=255;
var centerS=5;
var eyeballs=30;
var eyelidsx1=480/2; //replaced width
var eyelidsx2=80;
var eyelidsx3=180;
var eyelidsy1=480/2-20;
var eyelidsy2=80;
var eyelidsy3=360;
function setup() {
createCanvas(480, 480);
}
function draw() {
background(250,250,250);
var h = hour();
var m = minute();
var s = second();
//eyeball-second
eyeballx=width/2;
eyebally=height/2-30;
secondF=255-s*2;//transparency decreasing based on minutes seconds and hours
minuteF=255-m*5;
hourF=255-h*10;
angleMode(DEGREES);
noFill();
strokeWeight(3);
//eyes opening-second
if (s%2==0){//for each second, eye will correspondingly open and close
stroke(0,0,0,secondF);
push();
fill(0,0,0,secondF);
ellipse(eyeballx,eyebally,centerS,centerS);
fill(0,20,128,secondF);
ellipse(eyeballx,eyebally,eyeballs,eyeballs);
pop();
arc(eyelidsx1, eyelidsy1, eyelidsx2, eyelidsy2, eyelidsx3, eyelidsy3);
}else{
stroke(0,0,0,secondF);
arc(eyelidsx1, height/2-50, eyelidsx2, eyelidsy2, eyelidsy3, eyelidsx3);
}
fill(0,0,0,secondF);
ellipse(width/2+5,84,20,20);
noFill();
stroke(0,0,0,secondF);
curve(width/2+40, 86, width/2+5, 94, width/2+5, 181, width/2+40, 115);
fill(173,115,66,minuteF); //for colouring fading in minute
stroke(0,0,0,hourF);//for colouring fading in hour
push();
strokeWeight(0);
curve(width/2-110, height/2+6, width/2+5, height/2+4, width/2+5, height/2+71, width/2-310, height/2-80);
strokeWeight(3);
fill(172,36,25,hourF);
curve(width/2+10, 396, width/2-10, mouthp, width/2+37, mouthp, width/2+30, 431);
curve(width/2+10, 121, width/2-10, mouthp, width/2+82, mouthp, width/2+30, 121);
translate(45, 0);//for moving the second lips
curve(width/2+10, 396, width/2-10, mouthp, width/2+37, mouthp, width/2+30, 431);
pop();
//minute
var fp1=width/2;
var fp2=height/2-70;
var offset1=10;
var offset2=15;
for (var y = 0; y < 6; y++) {//nested for loop for drawing the cols and rows
noStroke();
for (var x = 0; x < 5; x++) {
if (((x+1)+(y)*5)<=m){//determing when the next dot appears
fill(168,59,32,minuteF);
var py = fp1 + y * offset1;
var px = fp2 + x * offset2;
ellipse(px, py, 10, 10);
}
}
}
var fp3=width/2;
var fp4=height/2+70;
for (var y1 = 0; y1 < 6; y1++) {
noStroke();
for (var x1 = 0; x1 < 5; x1++) {
if (((x1+1)+(y1)*5)<=(m-30)){//note: need to minus 30 for calculating the second part of the dots
fill(168,59,32,minuteF);
var py1 = fp3 + y1 * offset1;
var px1 = fp4 + x1 * offset2;
ellipse(px1, py1, 10, 10);
}
}
}
//hour
noFill();
stroke(173,115,66,hourF);
arc(width/2-110, height/2-70, 50, 50, 90, 270);
var hourh=height/2-50
for (var i=0;i<h;i++){//number of earings accordings to number of hours
ellipse(width/2-110, hourh,20,20);
hourh+=10;
}
}
For this project, I intended to express an idea of “fading”. The start point of the clock will be a full face with all features visible (not including the earings and the wrinkles, since they are the indication of cumulative time). Then, as time progressed, the eyes will blink (close and open) as an indicator for seconds. The number of wrinkles will increase as minutes increases. So the number of blush will be the number of minutes for each hour. Lastly, the number of earings will be the number of hours. Thus, a way to calculate time is to add the number of earings with number wrinkles and the number of times the eye blinks. At the end, the whole face will fade away.
Draft drawing | 2017.10.5
Here are some screenshots for different time periods, so we can see the different representation of time changes.
Holger Lippmann’s Noise Scape 4 series contain generative art pieces that compute randomness in color arrays, shapes, and noise to create beautiful landscape paintings. Although the technicality of these pieces are considered basic, Lippmann says there was a large amount of fine tuning in order to get the result he wanted. Lippmann lets the code run and then generate an output of 100 images, then chooses his favorites from the set.
The result of his art is visually stunning. He creates a lot of random generative art like this one, but this one caught my eye because of its beautiful flowing shapes and calm colors. When viewed from a distance, they really do look like landscapes of color, but zoomed in close, I can see each shape and how it changes.
Marina Savova is an artist that focuses on abstract painting. Originally from Bulgaria, she studied painting at the University of Veliko Turnovo. After graduating, she has had 16 individual exhibitions around the world from Serbia to Germany to her home country in Bulgaria. She has also won three awards for her painting and now many of her works are located in galleries and owned by private collectors all over the globe.
At first glance, her art may seem like it is just a random combination of paint and splatters – which it is to a certain extent. Her paintings fall in the realm of the abstract as random shapes and lines are scattered on a canvas. This however, is for a certain effect. With each random shape and line, comes a specific chosen color as all of her paintings feature a clearly defined color scheme. This is utilized to show emotion with color and allow the emphasization of the pigment of the shapes and lines, rather than featuring an object or shape.
Abstract paintings are unique in their ability to have a different effect on each individual that views it. Instead of simply depicting an image or a snapshot in time, they are meant to be interpreted many ways – which is the beauty of randomness. Marina Savova painted each shape in such a manner that it looks effortlessly done as though she the act of painting was quite spontaneous. Her artistic sensibilities are mainly seen in her choice of color as that provides the main mood of each piece. I really admire her ability to paint so abstractly and randomly, although still achieving emotion through randomness.
/*
katie chen
section e
project 06
katieche@andrew.cmu.edu
*/
function setup() {
createCanvas(300, 300);
}
function draw() {
var h = hour();
var m = minute();
var s = second();
angleMode(DEGREES);
// make it 12 hours!
if (h > 11) {
h = h - 12;
}
else {
h=h;
}
background (196, 220, 255);
textAlign(CENTER);
text(h+":"+m+":"+s, width/2, 40);
noStroke();
// minute / rabbit rising
push();
fill (250);
ellipse (150, 370-m, 100, 170);
ellipse (125, 290-m, 20, 90);
ellipse (175, 290-m, 20, 90);
fill (250, 210, 196);
ellipse (120, 325-m, 10, 10);
ellipse (180, 325-m, 10, 10);
fill (0);
ellipse (125, 320-m, 7, 7);
ellipse (175, 320-m, 7, 7);
pop();
//hour / sun
push();
fill (255, 235, 127);
ellipse (260*h/11, 100, 40, 40);
noFill();
stroke(255, 236, 170);
strokeWeight (2);
ellipse (260*h/11, 100, 55, 55);
pop();
//seconds / clouds
push();
fill (250);
ellipse(300*s/59, 100, 30, 30);
ellipse(300*s/59, 105, 50, 20);
ellipse(370*s/59, 140, 40, 30);
ellipse(380*s/59, 145, 80, 20);
ellipse(220*s/59, 125, 60, 20);
ellipse(210*s/59, 120, 40, 20);
ellipse(260*s/59, 140, 40, 10);
pop();
}
I wanted to do something completely different from the traditional rotating clock. I tried to create more of a story, where the sun and clouds move horizontally like in real life and the rabbit rises and sinks.
/*
Doo Won Nam
Section B
dnam@andrew.cmu.edu
Project - 06
*/
//variables for spiral
var spiralAngle = 45;
var spiralRadius = 1;
var spiralRate = 0;
function setup() {
createCanvas(480, 480);
background(200, 250, 200); //background doesn't reset every frame
}
function draw() {
noStroke();
// Fetch the current time
var H = hour();
var M = minute();
var S = second();
var x = cos(radians(spiralAngle)) * spiralRadius; //wider
var y = sin(radians(spiralAngle)) * spiralRadius; //taller
fill(0 + S * 4); //gets lighter per second passed
ellipseMode(CENTER);
ellipse(240 + x, 240 - y, 10, 10); //the X and Y shifts along the spiral
spiralAngle = spiralAngle + 2; //angle shifts to form spiral
spiralRadius = spiralRadius + 0.1; //spiral radius increases
spiralRate = spiralRate + 1;
if (spiralRate > 2000) { //reset once spiral goes too far
spiralRate = 0;
spiralRadius = 1;
background(150, 200, 150);
}
}
I wanted to show time with just the seconds by using the formation of a spiral and the change of gradience. The code is instructed to create lighter color ellipses until a minute passes and the second resets – the ellipses in the spiral are then reset to black. The spiral also restarts if it fills up too much of the canvas. The idea was based off of Korean anti-mosquito scent candles, which look like these:
I always thought how the candle disappears in a spiral as time goes was almost hypnotising, and I wanted to create a similar effect with this candle.
Tyler Hobbs is a generative artist from Austin, Texas. Tyler writes a custom computer program specially designed to create an abstract image for each work. His work focuses on the interplay of randomness and order, and draws inspiration from paint, vegetation, and naturally occurring patterns. For Continuity series begins by generating semi-random quadrilaterals. Intersections between quadrilaterals become negative space. The positive space builds up in iterative layers. Proximity to an attractor point controls the transparency, brightness, and sharpness of the positive space. The generative aspect (pseudo randomness) is interesting to see as Hobbs allows the shapes to become harmonious as they relate arbitrarily, yet in a fully controlled way. Because chance provides a good foundation to the structure of these works, they can generate an entire series of images. Each work could be completely different from previous instances, providing an element of freshness and surprise.
![[OLD FALL 2017] 15-104 • Introduction to Computing for Creative Practice](../../../../wp-content/uploads/2020/08/stop-banner.png)
