sketch-137.js

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/

http://www.dezeen.com/2014/10/15/marc-fornes-pink-aluminium-situation-room-installation-storefront-art-architecture-new-york/

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.

sketch-73.js

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

sketch

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/

sketch-41.js

function setup() {
    createCanvas(300, 300); //
    background('red');
}

function draw() {
   ellipse(150,150,100,70) // ellipse(x,y,w,h)
}