Author: Sara Jahanian

Project-03-sjahania

sketch

var skyColor = 150;
var sunY = 50;
var lightsOn = false;
var starsX = 100
var starsY = 320


function setup() {
    createCanvas(640, 480);
    background(0, skyColor,255);
}

function draw() {

	//sky color
	strokeWeight(1);
	var skyColor = mouseX/(640/225);
	background(0, 225 - skyColor, 225);
	
	//sun
	fill(255,228,0);
	ellipse(2*mouseX, sunY + (.2*mouseX), 80, 80);

	//moon
	fill(219,220,226);
	var moonY = 2*(-mouseX+480)
	if (moonY < 80) {
		moonY = 80;
	}
	arc(width/2, moonY, 80, 80, HALF_PI, PI + HALF_PI, CHORD);

	//stars
	fill(219,220,226);
	strokeWeight(10);
	if (mouseX > 400) {
		starsX = random(0,640);
		starsY = random(0,100);
		point(starsX,starsY);
	}


	//grass
	strokeWeight(1);
	var grassColor = mouseX/(640/177);
	noStroke();
	fill(0, 177 - grassColor, 0);
	rect(0, 420, 640, 60);


	//house
		//house part
	fill(165, 0, 0);
	rect(400, 270, 175, 180);

		//roof part
	fill(0);
	triangle(350,270,487,200,625,270);

		//door
	fill(0);
	arc(487,450,40,150,PI, TWO_PI)

		//door handle
	fill(255,228,0);
	ellipse(500,430,10,10);

		//window color
	if (lightsOn == true) {
		fill(255,228,0);
	} else {
		fill(0);
	}

		//windows
	ellipse(487,300,30,30);
	rect(430,320,40,40);
	rect(505,320,40,40);
	stroke(0);
	line(525,320,525,360);
	line(450,320,450,360);
	line(505,340,545,340);
	line(430,340,470,340);



}

function mousePressed() {
	if (lightsOn == true) {
		lightsOn = false;
	} else {
		lightsOn = true;
	}
}

I had trouble coming up with an idea, so I settled for something easy because I’m artistically challenged. The sun and moon set and rise respectively when the mouse goes left to right, the colors change, the house lights turn on with a mouse click, and the stars come out when it’s dark.

LookingOutwards-02-sjahania

Roman Verostko created an arm that holds a pen and uses algorithms to draw beautiful images. In one project, appropriately named the “Three Story Drawing Machine,” he projected the eight-hour drawing process on a three-story building.

What amazes me the most about this project is Verostko’s ability to see drawings in algorithms. In order to tell the arm what to draw, he had to think like a computer in addition to thinking like an artist. It looks like in order to make certain parts of the image darker, he has the arm draw over areas more than once.

Another aspect of this project that I admire is the way the artist integrated sound into the presentation. Each direction and speed combination projected a sound for the audience, which must have had an interesting effect. I was unable to find a video of the sounds, so I wonder if they were actually appealing or not.

According to Verostko, the project “marries mind and machine with cyberforms celebrating algorithmic form.”

website link: http://www.verostko.com/shows/n-spark/n-spark.html

Project-02-Variable-Face-sjahania

sketch

// Simple beginning template for variable face.
var eyeSize = 20;
var faceWidth = 175;
var faceHeight = 150;
var noseWidth = 50;
var noseHeight = 30;
var pupilX = 0;
var pupilY = 0;
var faceRedness = 190;
var noseRedness = 220;
var earSize = 50;
 
function setup() {
    createCanvas(640, 480);
}
 
function draw() {
    background(180);
    fill(255);

    //ears
    fill(noseRedness, 180, 184);
    ellipse(width / 2 - faceWidth / 3, height / 2 - faceHeight / 3, earSize, earSize)
    ellipse(width / 2 + faceWidth / 3, height / 2 - faceHeight / 3, earSize, earSize)

    //face
    fill(faceRedness, 113, 166);
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);

    //eyes
    fill(255);
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    ellipse(eyeLX, height / 2, eyeSize, eyeSize);
    ellipse(eyeRX, height / 2, eyeSize, eyeSize);

    //pupils
    fill(0);
    ellipse(eyeLX + pupilX, height / 2 + pupilY, eyeSize * .65, eyeSize * .65);
    ellipse(eyeRX + pupilX, height / 2 + pupilY, eyeSize * .65, eyeSize * .65);

    //nose
    fill(noseRedness, 180, 184);
    ellipse(width / 2, height / 2 + faceHeight / 4, noseWidth,noseHeight);


    //nostrils
    fill(0);
    var Lnostril = width / 2 - noseWidth / 4
    var Rnostril = width / 2 + noseWidth / 4
    ellipse(Lnostril, height / 2 + faceHeight / 4, 10, 10);
    ellipse(Rnostril, height / 2 + faceHeight / 4, 10, 10);

    //speech bubble
    fill(255);
    noStroke();
    rect(450, 75, 150, 125, 25);
    triangle(425, 250, 460, 195, 480, 195);

    //hamburger
    fill(255,201,77);
    arc(525, 125, 80, 60, PI, TWO_PI);
    fill(224,37,33);
    rect(485, 125, 80, 10, 15);
    fill(255,201,77);
    rect(485, 135, 80, 6, 15);
    fill(74,207,0);
    rect(485, 141, 80, 6, 15);
    fill(68,37,33);
    rect(485, 147, 80, 15, 15);
    fill(255,201,77);
    rect(485, 162, 80, 15, 0, 0, 15, 15);




}
 
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.
    faceWidth = random(150, 250);
    faceHeight = random(100, 200);
    eyeSize = random(10, 30);
    noseHeight = random(20,40);
    noseWidth = random(30,70);
    pupilX = random(-2,2);
    pupilY = random(-2,2);
    faceRedness = random(179,255);
    noseRedness = random(216,255);
    earSize = random(40,60);





}

This was hard because I don’t know how to draw faces. I ended up using simple circles to draw pigs, and made the eyes, nose, face color, and face size/shape change. I added a hamburger for fun.

LookingOutwards-1-sjahania

Anne Cleary and Denis Connolly are artists that focus on perception and the relationship between the world and its inhabitants. They created the “Meta-Perceptual Helmets,” which allow humans to see the world from the point of view of different animals.

I find this interesting because humans have never truly been able to experience the perspective of another animal. The artists questioned why our eyes are positioned the way they are, and what kind of limitations or advantages we have over other creatures. The project was intended to be an interactive art exhibit, but I think it could be used for science as well. Seeing from the perspective of animals can help us understand more about the creatures themselves and can allow scientists to develop tools that allow us to see differently.

Website link: http://www.connolly-cleary.com/Home/helmets.html?utm_source=DesignTAXI&utm_medium=DesignTAXI&utm_term=DesignTAXI&utm_content=DesignTAXI&utm_campaign=DesignTAXI

Project-1-Face-sjahania

sketch

function setup() {
    createCanvas(200, 200);
    background(0,83,124);
}
function setGradient(x, y, w, h, c1, c2) {

  noFill();

  // Top to bottom gradient
for (var i = y; i <= y+h; i++) {
  var inter = map(i, y, y+h, 0, 1);
  var c = lerpColor(c1, c2, inter);
  stroke(c);
  line(x, i, x+w, i);
 }
}

function draw() {
	//bow
	fill(255,95,60);
	stroke(0);
	strokeWeight(0.5);
	triangle(80,85,85,55,110,75);
	triangle(120,85,115,55,90,75);
	ellipse(100,65,8,10);

	//hair
	noStroke();
	fill(55,22,0);
	rect(75,90,50,80);

	//highlights
	c2 = color(255,206,69);
	c1 = color(55,22,0);
	setGradient(75,120,50,30,c1,c2)

	//neck
	fill(255,213,161);
	rect(88,120,24,20);
	arc(100,140,24,29,0,PI);

	//jawline
	noFill();
	strokeWeight(.5);
	stroke(0);
	arc(100,103,40,60,0,PI);

	//face
	noStroke();
	fill(255,213,161);
	ellipse(100,100,50,60);

	//bangs
	fill(55,22,0);
	arc(90,90,45,50,PI-QUARTER_PI,TWO_PI-QUARTER_PI);
	arc(110,90,45,50,PI+QUARTER_PI,QUARTER_PI);
	fill(255,213,161);
	arc(100,100,45,50,QUARTER_PI,TWO_PI-QUARTER_PI);
	arc(100,100,45,50,PI+QUARTER_PI,PI-QUARTER_PI)


	//whites of eyes
	fill(255);
	ellipse(90,100,10,7);
	ellipse(110,100,10,7);

	//eye color
	fill(55,22,0);
	ellipse(90,100,7,7);
	ellipse(110,100,7,7);

	//eyebrows
	noFill();
	stroke(55,22,0);
	strokeWeight(1.75);
	arc(89,94,15,4,PI,TWO_PI-QUARTER_PI);
	arc(111,94,15,4,PI+QUARTER_PI,TWO_PI);

	//nose
	noFill();
	stroke(55,22,0);
	strokeWeight(1);
	arc(100,110,8,8,PI,TWO_PI);

	//mouth
	noStroke();
	fill(0);
	arc(100,118,12,9,0,PI);

	//tongue
	fill(255,133,159);
	arc(100,120,8,5,0,PI);

	//shirt
	fill(255,95,60);
	noStroke();
	rect(60,145,80,60,25,25,0,0);

	//shirt collar
	stroke(0);
	strokeWeight(.5);
	arc(93,152,20,20,QUARTER_PI,PI+QUARTER_PI);
	arc(107,152,20,20,TWO_PI-QUARTER_PI,PI-QUARTER_PI);

	//arm holes
	fill(0,83,124);
	triangle(75,200,75,170,78,200);
	triangle(122,200,125,170,125,200);
	noStroke();
	fill(255,213,161);
	triangle(88,145,100,159,112,145);



}

I had a lot of trouble at first, especially since I have no eye for aesthetic, but eventually I got the hang of figuring out where things should go. I also added something from the p5.js website that allowed me to put a gradient in my hair.