Project 04 – Alison Hoffman String Art

Alison Hoffman

//Alison Hoffman
//Section D
//achoffma@andrew.cmu.edu
//Project 04

lineWeight = 1;

function setup() {
    createCanvas(640, 480);
    background(235);

}
function draw() {
    // width/4 = 160
    strokeWeight(lineWeight); // standard line Weight 
    strokeCap(SQUARE); // sharp line edges
    //first curve
    var xLine = 1; // x starting postion
    var cG = 30; //starting green color value
    var cB = 120; // starting blue color value
	for(var i = 0; i < 160; i+=10){
		stroke(255,cG,cB);
		line(xLine*i,height/2,width/2,0); // just chaning x value
		cG +=  i/4;   // making the color lighter
		cB +=  i/4;   // making the color lighter 
	}

	// first curve second layer yellow
	var xLine2 = 1; // x starting postion 2 
    var cB = 60; // starting blue color value
	for(var i = 0; i < 160; i+= 28){
		stroke(255,255,cB);
		line(xLine2*i,height/2,width/2,0);
		cB +=  i/4; // change blue
	}
	//first curve blue
	var xLine3 = 1; // x starting postion 2 
    var cR = 0; // starting red color value
    var cG = 200; // starting gree
	for(var i = 0; i < 160; i+= 33){
		stroke(cR,cG,255);
		line(xLine3*i,height/2,width/2,0);
		cR +=  i/4 + 30; // change red
		cG +=  i/4;
	}
	//first curve repeated
    var xLine = 1; // x starting postion
    var cG = 30; //starting green color value
    var cB = 120; // starting blue color value
	for(var i = 0; i < 160; i+=10){
		stroke(255,cG,cB);
		line(xLine*i,height/2,width/2,0); // just chaning x value
		cG +=  i/4;   // making the color lighter
		cB +=  i/4;   // making the color lighter 
	}


	//second curve pink - right side layer
	var xLine4 = width; // x starting postion
    var cG = 30; //starting green color value
    var cB = 120; // starting blue color value
	for(var i = 0; i < 160; i+=10){
		stroke(255,cG,cB);
		line(width/2,0,xLine4-i,height/2); // just chaning x value
		cG +=  i/4;   // making the color lighter
		cB +=  i/4;   // making the color lighter 
	}
	//second curve yellow - right side 
	var xLine5 = width; // x starting postion
    var cB = 60; // starting blue color value
	for(var i = 0; i < 160; i+=28){
		stroke(255,255,cB);
		line(width/2,0,xLine5-i,height/2); // just chaning x value
        cB +=  i/4;   // making the color lighter 
    }
    // second curve blue - right side
    var xLine6 = width; // x starting postion
    var cR = 0; //starting red color value
    var cG = 200; // starting blue color value
	for(var i = 0; i < 160; i+= 33){
		stroke(cR,cG,255);
		line(width/2,0,xLine4-i,height/2); // just chaning x value
		cG +=  i/4;   // making the color lighter
		cR +=  i/4 + 30;   // making the color lighter 
	}
    //second curve pink - right side second layer
	var xLine7 = width; // x starting postion
    var cG = 30; //starting green color value
    var cB = 120; // starting blue color value
	for(var i = 0; i < 160; i+=10){
		stroke(255,cG,cB);
		line(width/2,0,xLine7-i,height/2); // just chaning x value
		cG +=  i/4;   // making the color lighter
		cB +=  i/4;   // making the color lighter
	}

	// third curve bottom left pink layer one
    var xLine8 = 1; // x starting postion
    var cG = 30; //starting green color value
    var cB = 120; // starting blue color value
	for(var i = 0; i < 160; i+=10){
		stroke(255,cG,cB);
		line(xLine8+i,height/2,width/2,height); // just chaning x value
		cG +=  i/4;   // making the color lighter
		cB +=  i/4;   // making the color lighter
	}
	// third curve bottom left blue layer 
    var xLine10 = 1; // x starting postion
    var cG = 200; // starting green color value
    var cR = 0; // starting red color value
	for(var i = 0; i < 160; i+= 33){
		stroke(cR,cG,255);
		line(xLine10+i,height/2,width/2,height); // just chaning x value
		cR +=  i/4 +30;  // making the color lighter
		cG +=  i/4;  // making the color lighter
	}
	// third curve bottom left yellow layer 
    var xLine9 = 1; // x starting postion
    var cB = 60; // starting blue color value
	for(var i = 0; i < 160; i+= 28){
		stroke(255,255,cB);
		line(xLine9+i,height/2,width/2,height); // just chaning x value
		cB +=  i/4;   // making the color lighter
	}
	// third curve bottom left pink layer two
    var xLine8 = 1; // x starting postion
    var cG = 30; //starting green color value
    var cB = 120; // starting blue color value
	for(var i = 0; i < 160; i+=10){
		stroke(255,cG,cB);
		line(xLine8+i,height/2,width/2,height); // just chaning x value
		cG +=  i/4;   // making the color lighter
		cB +=  i/4;   // making the color lighter
	}

	//fourth curve bottom right pink layer
	var xLine11 = width; // x starting postion
    var cG = 30; //starting green color value
    var cB = 120; // starting blue color value
	for(var i = 0; i < 160; i+=10){
		stroke(255,cG,cB);
		line(width/2,height,xLine11-i,height/2); // just chaning x value
		cG +=  i/4;   // making the color lighter
		cB +=  i/4;   // making the color lighter
	}
	//fourth curve bottom right yellow layer
	var xLine13 = width; // x starting postion
    var cB = 60; // starting blue color value
	for(var i = 0; i < 160; i+=28){
		stroke(255,255,cB);
		line(width/2,height,xLine13-i,height/2); // just chaning x value
		cB +=  i/4;   // making the color lighter
	}
	//fourth curve bottom right blue layer
	var xLine12 = width; // x starting postion
    var cB = 200; // starting blue color value
    var cR = 0; // starting red value
	for(var i = 0; i < 160; i+=33){
		stroke(cR,cG,255);
		line(width/2,height,xLine12-i,height/2); // just chaning x value
		cG +=  i/4;   // making the color lighter
		cR +=  i/4 +30; //making color lighter
	}

	//fourth curve bottom right pink layer
	var xLine14 = width; // x starting postion
    var cG = 30; //starting green color value
    var cB = 120; // starting blue color value
	for(var i = 0; i < 160; i+=10){
		stroke(255,cG,cB);
		line(width/2,height,xLine14-i,height/2); // just chaning x value
		cG +=  i/4;   // making the color lighter
		cB +=  i/4;   // making the color lighter
	}
}
function mouseDragged(){
	lineWeight += 0.1; // line weight changes if pressed
	if(lineWeight > 7){
		lineWeight = 0;
	}
}

For this project I really wanted to keep the composition simple and just focus on learning how draw with for loops. I played around with CMYK color and how they can interact, but again my goal was to keep it simple and clean. I tried to make it more dynamic by adding gradient color and a mouseDragged function, so whenever the mouse is dragged the stroke Weight increases.

Alison Hoffman Looking Outward 2

For this post I looked at the work of Memo Akten. His series on Simple Harmonic Motion immediately stood out to me. His instillation at the Blenheim Palace, Simple Harmonic Motion for Light #11,in particular is rather fascinating. I admire how he uses something as abundant as light to create something so unique and complex. Memo uses a generated a simple harmony to create the movement of the light beams. While the mechanics are simple, the end product is nothing short of complex due to the natural properties of light. The harmonic motion is generated by an algorithm, but the refraction of light due to cloud coverage makes the work unpredictable.Memo used openFrameworks, a C++ ‘toolkit’, to create the algorithm for this piece.

Alison Hoffman – Project 2

sketch-89.js

//Alison Hoffman
//Section D
//achoffma@andrew.cmu.edu
//Project 2

var head_w1 = 240; // x coordinate of the face, left
var head_w2 = 460; // x coordinate of the face, right
var top_h = 72; // top of the head
var head_h = 60; // head height y coordinate 
var jaw_w1 = 260; // x coordinate of jaw, left
var jaw_w2 = 410; // x coordinate of jaw, right
var jaw_h = 340; // y coordinate of jaw
var bottom_h = 400; // bottom y coordinates
var eye_diam = 25;
var colorR = 140;
var colorG = 30;
var colorB = 230;
var brow_stroke = 6;
var brow_arch = 130;
var lip_stroke = 8;
var bottom_lip_x = width/2
var bottom_lip_y = height/2 + 100



function setup() {
    createCanvas(640, 480);
 }

function draw() {
	background(0);
	//face shape
    stroke(255);
    strokeWeight(9);
	//top of face
	fill(0);
    beginShape();
    curveVertex(160,180); 
    curveVertex(160,180);
    curveVertex(head_w1,head_h);
    curveVertex(width/2,top_h);
    curveVertex(head_w2,head_h);
    curveVertex(480,180);
    curveVertex(480,180);
    endShape();
    //lower face
    fill(0);
	beginShape();
    curveVertex(160,180);
    curveVertex(160,180);
    curveVertex(170,240);
    curveVertex(200,280);
    curveVertex(jaw_w1,jaw_h);
    curveVertex(width/2, bottom_h);
    curveVertex(jaw_w2,jaw_h);
    curveVertex(420,280)
    curveVertex(460,240);
    curveVertex(480,180);
    curveVertex(480,180);
    endShape();

    //eyes
    stroke(255);
    strokeWeight(12);
    fill(colorR,colorG,colorB);
    //left
    ellipse(250,180,eye_diam);
    //right
    ellipse(380,180,eye_diam);
    //lids
    stroke(colorR,colorG,colorB);
    strokeWeight(brow_stroke);
    noFill();
    //left
    beginShape();
    curveVertex(210,160);
    curveVertex(210,160);
    curveVertex(240,brow_arch);
    curveVertex(280,160);
    curveVertex(280,160);
    endShape();
    //right
    beginShape();
    curveVertex(350,160);
    curveVertex(350,160);
    curveVertex(390,brow_arch);
    curveVertex(430,160);
    curveVertex(430,160);
    endShape();

    //nose
    stroke(255);
    strokeWeight(4);
    beginShape(); 
    curveVertex(width/2,height/2 - 25);
    curveVertex(width/2,height/2 - 25);
    curveVertex(width/2 + 25, height/2+20);
    curveVertex(width/2,height/2 + 30);
    curveVertex(width/2,height/2 + 30);
    endShape();

    //mouth
    stroke(colorR,colorG,colorB);
    strokeWeight(lip_stroke);
    fill(255);
    beginShape();
    curveVertex(260,height/2 + 60);
    curveVertex(260,height/2 + 60);
    curveVertex(bottom_lip_x,bottom_lip_y);
    curveVertex(350, height/2 + 80);
    curveVertex(360, height/2 + 60);
    endShape(CLOSE);
}

function mousePressed() {
    head_w1 = random(180,240); //randomize line curve width 
    head_w2 = random(400,460); //randomize line curve width
    top_h = random(60,72); // face height 
    head_h = random(top_h,71); // randomize line curve height
    jaw_w1 = random(205,260);
    jaw_w2 = random(380,415);
    bottom_h = random(380,400);
    jaw_h = random(285,bottom_h);
    eye_diam = random(25,50);
    brow_arch = random(115,170);
    brow_stroke = random(5,18);
    lip_stroke = random(9,22);
    bottom_lip_x = random(265,385);
    colorR = random(50,230);
    colorG = random(30,240);
    colorB = random(50,255);
    bottom_lip_y = random(height/2+80,height/2+140); 

}

Alison Hoffman Looking Outwards Week-01

As a Decision Science student you learn that there are three main types of decision making theories- Normative (what decisions we should make), Descriptive (what decisions we do make), and Prescriptive (how we can make better decisions). Personally I tend to be more interested in studying prescriptive theories because the by the nature there is more room for creativity. Nudging is one common type of prescriptive theory that allows people to make better decisions by making the optimal decision more effortless.

In a freshman year course, a professor showed a video showing a Volkswagon campaign using a nudge. In order to get more people to take the stairs rather than the escalator they turned the stairs into working a piano. The stairs worked as keys, playing notes as people walked up and down. By making the stairs interactive and fun, Volkswagon was able to get people to make a better, more beneficial decision.

I found this installation fascinating. While it took real time and effort to write the script and build the hardware to turn the stairs into a working piano, and Volkswagen made absolutely no profit from this, it was a great experiment to show how interactive design can influence behavior, and in the case, influence decision making. I admire how effective this project was. Moving forward in my academic career, I would like to explore how design and digital interaction can influence and improve consumer decision making. This project has shown me that can be effective.

Alison Hoffman Project-01

sketch

//Alison Hoffman
//Section D
//achoffma@andrew.cmu.edu
//Project-01



function setup() {
    createCanvas(600, 600);
    background(0,204,204);
}

function draw() {
	noStroke();
	//background hair
	fill(202,179,62);
	ellipse(width/2,height/2+100,400,630);
	//face base
	fill(255,218,185);//neck
	rect(width/2 - 80, height/2 +100,160,340);
	fill(75,75,75);
	ellipse(width/2,height/2+10,290,375); //shadow
	fill(255,218,185);//face
	ellipse(width/2,height/2,300,380);
	//shoulders 
	fill(255,218,185);
	ellipse(width/2,height/2+306,434,180);
	//shirt
	fill(153,0,0);
	rect(168,588,257,40);
	stroke(153,0,0);
	strokeWeight(18);
	strokeCap(SQUARE);
	line(168,532,168,600);	//left strap
	line(430,532,430,600);
	//face
	//eyes
	fill(0);
	noStroke();
	ellipse(width/2 - 55,height/2 - 25,44,26);
	ellipse(width/2 + 55,height/2 - 25,44,26);
	fill(255);
	noStroke();
	ellipse(width/2 - 55,height/2 -20,40,28);//left
	ellipse(width/2 + 55,height/2 -20,40,28);//right
	fill(0,140,180);//iris
	ellipse(width/2 - 55,height/2 -18,20);//left
	ellipse(width/2 + 55,height/2 -18,20);//right
	fill(0);//pupils
	ellipse(width/2 - 55,height/2 -18,12);//left
	ellipse(width/2 + 55,height/2 -18,12);//right
	//nose
	stroke(223,184,150);
	strokeWeight(4);
	line(width/2,height/2 - 2,width/2 + 9,height/2 +66);
	line(width/2 - 14,height/2 + 66,width/2 + 11,height/2 +66);
	//mouth
	fill(219,111,111);
	noStroke();
	triangle(width/2-42,height/2 + 120,width/2+20,height/2+120,width/2+24,height/2+106);
	triangle(width/2+8,height/2+120,width/2+20,height/2+120,width/2+40,height/2+90);
	fill(239,133,133);
	triangle(width/2-42,height/2 + 120,width/2+20,height/2+120,width/2+20,height/2+122);
    triangle(width/2+16,height/2+122,width/2+22,height/2+122,width/2+40,height/2+90);
    //bangs
    fill(202,179,62);
    ellipse(width/2,height/2 -156,200,70);
    triangle(width/2 -174,height/2-10,width/2+25,height/2-122,width/2-30,height/2-155);
    triangle(width/2 -174,height/2-10,width/2-110,height/2-150,width/2-20,height/2-155);
    triangle(width/2 +174,height/2-25,width/2+25,height/2-122,width/2+110,height/2-161);

    noLoop();
}