var mainRec =0; //main rectangle color
var diam =100; //diameter of main green circle
var blkdiam =100; //diameter of main black circle
var diamSmall =80; //upper left & lower right circle diameters
var diamSmall2 =80; //upper right & lower left circle diameters
var leftCorner1 =10; //x point of white square
var leftCorner2 =10; //y point of white square
function setup() {
createCanvas(640, 480);
}
function draw() {
var newBackground=map(mouseY,0,height,0,255);
background(newBackground);
var firstColor = map(mouseY, 0, height, 151, 255); //sets bounds for first red value
var secondColor = map(mouseY, 0, height, 230,51); //sets bounds for green value
var thirdColor = map(mouseY, 0, height, 0, 210); // sets bounds for blue value
background(firstColor,secondColor,thirdColor);
if ((mouseX > 170) & (mouseX < 470) && //allows for the change of middle rectangle color
(mouseY > 50) && (mouseY < 430)) {
mainRec = mainRec + 1;
}
fill(mainRec);
noStroke();
rect(170,50,300,380); //main long rectangle in center
fill('Aqua');
noStroke();
ellipse(170,50,diamSmall,diamSmall); //upper left corner circle
fill('Aqua');
noStroke();
ellipse(470,430,diamSmall,diamSmall); // lower right corner circle
if (mouseY>height/2) { //this is for upper left & lower right circles
diamSmall -= (diamSmall-1) >= 10; //shrink when mouse < halfway down
} else {
diamSmall += (diamSmall+1) <= 80; //grow when mouse is > halfway down
}
fill('Aqua');
noStroke();
ellipse(470,50,diamSmall2,diamSmall2); //upper right corner circle
fill('Aqua');
noStroke();
ellipse(170,430,diamSmall2,diamSmall2); //lower left corner circle
if (mouseY<height/2) {
diamSmall2 -= (diamSmall2-1) >= 10; //shrink when y is < halfway down
} else {
diamSmall2 += (diamSmall2+1) <= 80; //grow when y is > halfway down
}
push(); //spinning pink ellipse
translate(width/2, height/2);
rotate(millis()/1000);
translate(-width/2, -height/2);
fill('pink');
noStroke();
ellipse(width/2,height/2,450,50);
pop();
push(); //spinning purple ellipse
translate(width/2, height/2);
rotate(-millis()/mouseX); //slightly different rate of speed & opposite directin
translate(-width/2, -height/2);
fill('purple');
noStroke();
ellipse(width/2,height/2,550,50);
pop();
push(); //spinning orange ellipse
translate(width/2, height/2);
rotate(-millis()/1000); //-direction
translate(-width/2,-height/2);
fill('orange');
noStroke();
ellipse(width/2,height/2,450,50);
pop();
push(); //spinning dark pink ellipse
translate(width/2, height/2);
rotate(millis()/mouseX); //slower speed
translate(-width/2,-height/2);
fill('DeepPink');
noStroke();
ellipse(width/2,height/2,550,50);
pop();
fill('Aquamarine'); //middle circle
noStroke();
ellipse(width/2,height/2,diam,diam);
if (mouseX > width/2) { // grows diameter if mouse is < half width
diam += (diam+3) <= 200;
} else {
diam -= (diam-3) >= 100; //shrinks diameter if mouse is > half width
}
fill('black');
noStroke();
ellipse(width/2,height/2,blkdiam,blkdiam);
if (mouseX > width/2) {
blkdiam -= (blkdiam-3) >=30; // shrinks diameter if mouse is < half width
} else {
blkdiam += (blkdiam+3) <=100; //grows diameter if mouse is > half width
}
fill('white'); //rect in upper right corner
noStroke();
rect(leftCorner1,leftCorner2,30,30);
if (mouseX > width/2) { //mouse towards right, rect = lower right
leftCorner1 = 600;
} else {
leftCorner1 =10;
}
if (mouseX > width/2) { //mouse towards left, rect = upper left
leftCorner2 = 440;
} else {
leftCorner2 =10;
}
}
I wanted to make a piece that would overlap with lots of rotating parts. I wanted to use mostly circles and have them grow or shrink depending on mouse position. I tried to keep within a color scheme of oranges, greens, and pinks.
]]>A piece I admire is called Situation Room by Marc Fornes, made in 2014. It is a series of 20 large, pink, perforated circular structures that surround visitors to form an installation (the piece is supplemented with a soundtrack made by Jana Winderen). The structure is one continuous form made up of the individual aluminum spheres, each of increasing incremental diameters, which connect at certain joints and are smoothed over. These forms are generated using boolean mathematical operations. I admire how many different elements are used to create a sense of space, through the physical tunnels created, the lighting shining through the holes, and the soundtrack that is acoustically amplified.
I feel that the artist’s sensibilities are definitely reflected in this piece; Fornes has always focused on known versus unknown, and creating environments which can be both comforting or smothering. This piece allows viewers to explore, and prompts questions about what constitutes a space, and what factors make a place feel real or imagined.
https://theverymany.com/14-storefront/
]]>
When I was making this face, my main focus was changing colors, but still keeping a cohesive looking piece. I thought it would be interesting to have imaginative colors for the eyes, but keep within a range of more realistic colors for the skintone. The ears stay within a range of brown, and the hair within a range of orange. By keeping the face size constant, the different identities were all dependent on the features shifting. This creates a very slight identity change sometimes, but it can also result in a starkly different visual appearance at other times.
var noseWidth =30;
var noseHeight =60;
var mouthWidth =100;
var mouthHeight =30;
var earWidth =30;
var earHeight =50;
var hairWidth =300;
var hairHeight =200;
var ebWidth =40; //eyebrow width
var ebHeight =5; //eyebrow height
//rgb for eyes
var eyeColor1 =72; //first rgb value
var eyeColor2 =136; //second rgb value
var eyeColor3 =216; //third rgb value
//rgb for face
var skinTone1 =240;
var skinTone2 =200;
var skinTone3 =170;
//rgb for eyes
var earColor1 =150;
var earColor2 =90;
var earColor3 =50;
//rgb for hair
var hairColor1 =240;
var hairColor2 =120;
var hairColor3 =30;
var ebYaxis =250; //to shift eyebrows up and down
function setup() {
createCanvas(480, 680);
}
function draw() {
background(246,211,53);
fill(hairColor1,hairColor2,hairColor3);
stroke(hairColor1,hairColor2,hairColor3);
ellipse(width/2,height/3,hairWidth,hairHeight); // hair bubble
fill(earColor1,earColor2,earColor3);
stroke(earColor1,earColor2,earColor3);
rect(width/5,height/2.25,earWidth,earHeight); //left ear
rect(3.57/5*width,height/2.25,earWidth,earHeight); //right ear
fill(skinTone1,skinTone2,skinTone3);
stroke(skinTone1,skinTone2,skinTone3);
ellipse(width/2,height/2,width/2,height/2); //face
fill(eyeColor1,eyeColor2,eyeColor3);
stroke(eyeColor1,eyeColor2,eyeColor3);
ellipse((4/10)*width,.45*height,.05*width,.05*height); //left eye
ellipse((6/10)*width,.45*height,.05*width,.05*height); //right eye
fill('red');
stroke('red');
ellipse(width/2,height/2*1.25,mouthWidth,mouthHeight); //mouth
fill(255,110,150);
stroke(255,110,150);
ellipse(width/2,height/2,noseWidth,noseHeight); //nose
fill(148,120,95);
stroke(148,120,95);
ellipse((4/10)*width,ebYaxis,ebWidth,ebHeight); //left eyebrow
ellipse((6/10)*width,ebYaxis,ebWidth,ebHeight); //right eyebrow
}
function mousePressed() {
mouthWidth = random(60,130);
mouthHeight = random(05,70);
noseWidth = random(10,50);
noseHeight = random(20,90);
eyeColor1 = random(170,255);
eyeColor2 = random(130,203);
eyeColor3 = random(150,255);
skinTone1 = random(235,255);
skinTone2 = random(195,215);
skinTone3 = random(160,180);
earWidth = random(20,60);
earHeight = random(40,80);
earColor1 = random(140,170);
earColor2 = random(85,110);
earColor3 = random(45,75);
hairWidth = random(200,400);
hairHeight = random(150,300);
hairColor1 = random(235,255);
hairColor2 = random(100,160);
hairColor3 = random(0,55);
ebWidth = random(20,60);
ebHeight = random(3,10);
ebYaxis = random(230,280);
}
A generative art piece I really like is Dreamline by Leonardo Solaas, shown below.
Dreamline was open to the public from 2005 until a few years ago; users could enter words from dreams/of dreams they would like to have, and then, the system searched the Web for related images and conjured them into an ambiguous painting. The work was developed in both Java and PHP; PHP script made the Google Image search from the word input, and Java received the images and placed them. No complete images are shown – the work is made up of 1500 pixels in constant motion.
I think this work is a strong representation of Solaa’s fascination with the subconscious: it generates an impermanent, moving image (just like a dream). I admire that he was able to harness minimal user interaction (entering words) to still create something vividly complex and individual. He was probably inspired by other systems that follow rules, but still maintain flexibility, like the drawing machines of Jean Tinguely.
I do wish that he would reactivate the art piece because he said he had to stop the project due to outdated technology. I also believe this work would have benefited form the ability to save individual images and categorize them in some way, though this deters slightly from the transient element.
http://www.digicult.it/digimag/issue-051/towards-the-edge-of-chaos-an-interview-with-leonardo-solaas/
http://solaas.com.ar/dreamlines/about.htm
function setup() {
createCanvas(600, 600);
}
function draw() {
background(245,198,213);
fill(202,148,92);
stroke(202,148,92);
strokeWeight(3);
rect(136.3,246,170,300); //hair rectangle left
ellipse(250,235,227,220); //hair blob left
rect(300,271,172,300); //hair rectangle right
ellipse(338,255,270,300); //hair blob right
fill(255,72,100);
stroke(255,72,100);
strokeWeight(5);
rect(230,450,138,200); //neck
rect(89.7,555,421.7,100); //main shoulder block
ellipse(200,550,219,100); //shoulder hump left
ellipse(403,551.4,218,100); //shoulder hump right
fill(255,226,206);
stroke(255,226,206); //outline for all circles in face
strokeWeight(4);
ellipse(300,300,275,350);
fill(255,226,206); //ear fill
ellipse(162,300,50,75); //left ear
ellipse(440,300,50,75); //right ear
fill(255,193,193); //cheek color
ellipse(226,340,90,90); //left cheek
ellipse(375,340,90,90); //right cheek
fill(255,226,206); //chin color - same as skintone
ellipse(300,425,115,115); //chin circle
fill(202,148,92);
quad(200,245,215,230,260,230,280,245);
quad(320,245,345,230,390,230,402,245);
fill(202,148,92);
stroke(202,148,92);
strokeWeight(3);
triangle(274,126,360,111,455,265);
triangle(155,179,163,258,268,127);
fill(255); //eyeball white fill
stroke(255);
strokeWeight(4);
ellipse(240,268,50,25);
ellipse(360,268,50,25);
fill(83,75,44); //eye line
stroke(255,226,206);
strokeWeight(.5);
ellipse(240,284,60,17);
ellipse(360,284,60,17);
stroke(0,129,172);
strokeWeight(4);
ellipse(241,270,20,20); //eye circle little
ellipse(360,270,20,20);
fill(255,226,206);
stroke(255,226,206);
strokeWeight(3);
ellipse(240,287,60,10);
ellipse(360,287,60,10);
fill(202,148,92);
stroke(202,148,92);
strokeWeight(3);
fill(255,196,170);
stroke(255,196,170);
strokeWeight(3);
triangle(280,375,300,300,320,375); //nose
fill(202,148,118); //nostril fill
stroke(255,196,170);
strokeWeight(6);
ellipse(315,370,14,14); //right nostril
ellipse(285,370,14,14); //left nostril
fill(255,70,105);
stroke(255,70,105);
strokeWeight(3);
ellipse(285,410,33,25); //lip bud
ellipse(315,410,33,25); //lip bud
fill(250,124,139);
stroke(250,124,139);
strokeWeight(3);
quad(268,410,275,425,325,425,332,410); //bottom lip
fill(232,172,96);
stroke(232,172,96);
strokeWeight(3);
ellipse(200,350,5,5);
ellipse(215,330,5,5);
ellipse(205,320,5,5);
ellipse(220,360,5,5);
ellipse(243,318,5,5);
ellipse(233,330,5,5);
ellipse(227,310,5,5);
ellipse(400,350,5,5);
ellipse(390,340,5,5);
ellipse(360,320,5,5);
ellipse(370,345,5,5);
ellipse(395,323,5,5);
ellipse(405,329,5,5);
fill(165,116,77);
stroke(165,116,77);
strokeWeight(5);
line(462,360,462,505); //start of right dark hair lines
line(450,385,450,501);
line(435,420,435,498);
line(420,435,420,498);
line(405,445,405,497);
line(390,455,390,497);
line(378,465,378,497);
line(145,360,145,503); //start of left dark hair lines
line(156,385,156,500);
line(170,420,170,496);
line(185,435,185,495);
line(198,445,198,495);
line(210,455,210,495);
line(220,465,220,496);
noLoop();
}
My goal from the beginning was to use the basic shapes in a way that would be interesting, rather than just boringly simple. I tried to stay within a color family of neutrals and pinks, and I mainly used ellipses for consistently round edges. My process was building upwards from the hair at the very back layer, to the face and the facial features, and finally some of the last detail elements like freckles and strands within the hair.
]]>21 Balançoires (21 Swings) is an interactive artwork installation set up each spring in Montreal. The project involves a giant swingset, and participants use their bodies to prompt the notes to play; the project encourages cooperation because swings moving in different alignments create different melodies. The colors of the swings indicate which instrument is playing (piano, harp, guitar, vibraphone) and the pitch is determined by the height reached. It’s a project from the creative group Daily Tous Les Jours, headed by Mouna Andraos and Melissa Mongiat, and their team of 30+ people including design, conceptual, technological, and programming experts. It uses custom software – each swing has a sensor that networks its position and relays this information to a computer via a fiber optic data link. Continuous monitoring allows for adjustment of volume depending on time of day.
I admire this piece because of its intent, which was to bring the drab urban environment alive with lots of people working together and conversing in pursuit of a playful, engaging goal. However, I do believe the placement of the swings could be even closer together, to promote more conversations and exchanges. The artists were probably inspired by previous works that focus on urban engagement, such as numerous billboard projects that film live crowds, or walkways that light up in various ways depending on crowd movement. For the future, I think this project shows that items that are often overlooked or ignored (like playground equipment) can be easily modified with technology to inspire strangers to partake in something outside the realm of their daily routines.
http://awards.ixda.org/entry/2013/21-balancoires/
http://www.dailytouslesjours.com/project/21-balancoires/
function setup() {
createCanvas(300, 300); //
background('red');
}
function draw() {
ellipse(150,150,100,70) // ellipse(x,y,w,h)
}