Author: shariqs@andrew.cmu.edu

Shariq Shah – Project 02 – Variable Faces

shariqs_VariableFaces-02

// Shariq M. Shah
// Section C
// shariqs@andrew.cmu.edu
// Assignment_01

//setting up variables

var eyeWidth = 20
var eyeHeight = 20
var eyePosL = 240
var eyePosR = 340
var mouthC = 80
var backColor = 200
var earPos = 280
var nosePos = 320
var faceWidth = 220

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

function draw() {
  background(230, backColor, 211);
  noStroke()

  fill(250, 200, 0)
  ellipse(300,600,600,300)

  strokeWeight(2)
  rect(220, 400, 150, 150, 15)

  //Face
  fill(200, 162, 132)
  rect(170, 180, 250, 250, 30, 100, 150, 150)

  fill(0,0,0)

  ellipse(300,180, faceWidth, 150)
  rect(150, 180, 300, 80,30)

  //Left Spec
  noFill()
  stroke(300)
  ellipse(240, 290, 60, 60)
  ellipse(240, 290, 55, 55)


  //Left Eye
  stroke(300)
  fill(300)
  ellipse(240, 290, eyeWidth, eyeHeight)
  fill(0)
  ellipse(eyePosL, 290, 15, 20)
  ellipse(eyePosL, 285, 2, 2)


  //Right Eye
  stroke(300)
  fill(300)
  ellipse(340, 290, eyeWidth, eyeHeight)
  fill(0)
  ellipse(eyePosR, 290, 15, 20)
  ellipse(eyePosR, 285, 2, 2)

  line(175, 180, 425, 180)

  //Right Spec
  noFill()
  stroke(300)
  ellipse(340, 290, 60, 60)
  ellipse(340, 290, 55, 55)

  line(310,290, 270, 290)
  line(310,285, 270, 285)

  line(210,285, 170, 280)
  line(210,290, 170, 280)


  line(370,285, 420, 280)
  line(370,290, 420, 280)

  //Nose
  noStroke()
  fill(240, 171, 142)
  triangle(290, 300, 290, nosePos, 310, 360)
  fill(214, 171, 139)
  triangle(290, 300, 290, nosePos, 270, 360)

//Mouth
	fill (300);

	ellipse (290, 382, mouthC, 42);
	fill (200, 162, 132);

	rect (220, 360, 120, 21);

  //Ears
  ellipse(425,earPos, 20, 80)
  ellipse(165,earPos, 20, 80)


  fill(300-backColor)



  //Logo
  bezier(105, 20, 10, 10, 90, 90, 15, 80)

  //Collar
  bezier(220, 460, 300, 650, 150, 650, 370, 460)
}



function mousePressed() {

    eyeWidth = random(15, 50);
    eyeHeight = random(20, 35);
    eyePosL = random(240, 250);
    eyePosR = random(340, 350);
    mouthC = random(30, 90);
    backColor = random(100, 200);
    earPos = random(300,310)
    nosePos = random(320, 360)
    faceWidth = random(220, 250)


}

In this exercise, I explored multiple ways to vary the way different shapes and colors that change as a result of the mousePressed() function. The result is a strange, expressive, and colorful face that alters itself randomly, with constraints, as a result of pressing on the image.

Shariq Shah – Project – 02 – Variable Faces

shariqs_VariableFaces

shariqs_VariableFaces

// Shariq M. Shah
// Section C
// shariqs@andrew.cmu.edu
// Assignment_01

//setting up variables

var eyeWidth = 20
var eyeHeight = 20
var eyePosL = 240
var eyePosR = 340
var mouthC = 80
var backColor = 200
var earPos = 280
var nosePos = 320

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

function draw() {
  background(230, backColor, 211);
  noStroke()

  fill(250, 200, 0)
  ellipse(300,600,600,300)

  strokeWeight(2)
  rect(220, 400, 150, 150, 15)

  //Face
  fill(200, 162, 132)
  rect(170, 180, 250, 250, 30, 100, 150, 150)

  fill(0,0,0)

  ellipse(300,180, 250, 150)
  rect(150, 180, 300, 80,30)

  //Left Spec
  noFill()
  stroke(300)
  ellipse(240, 290, 60, 60)
  ellipse(240, 290, 55, 55)


  //Left Eye
  stroke(300)
  fill(300)
  ellipse(240, 290, eyeWidth, eyeHeight)
  fill(0)
  ellipse(eyePosL, 290, 15, 20)
  ellipse(eyePosL, 285, 2, 2)


  //Right Eye
  stroke(300)
  fill(300)
  ellipse(340, 290, eyeWidth, eyeHeight)
  fill(0)
  ellipse(eyePosR, 290, 15, 20)
  ellipse(eyePosR, 285, 2, 2)

  line(175, 180, 425, 180)

  //Right Spec
  noFill()
  stroke(300)
  ellipse(340, 290, 60, 60)
  ellipse(340, 290, 55, 55)

  line(310,290, 270, 290)
  line(310,285, 270, 285)

  line(210,285, 170, 280)
  line(210,290, 170, 280)


  line(370,285, 420, 280)
  line(370,290, 420, 280)

  //Nose
  noStroke()
  fill(240, 171, 142)
  triangle(290, 300, 290, nosePos, 310, 360)
  fill(214, 171, 139)
  triangle(290, 300, 290, nosePos, 270, 360)

//Mouth
	fill (300);

	ellipse (290, 382, mouthC, 42);
	fill (200, 162, 132);

	rect (220, 360, 120, 21);

  //Ears
  ellipse(425,earPos, 20, 80)
  ellipse(165,earPos, 20, 80)


  fill(300)



  //Logo
  bezier(105, 20, 10, 10, 90, 90, 15, 80)

  //Collar
  bezier(220, 460, 300, 650, 150, 650, 370, 460)
}



function mousePressed() {

    eyeWidth = random(15, 50);
    eyeHeight = random(20, 35);
    eyePosL = random(240, 250);
    eyePosR = random(340, 350);
    mouthC = random(30, 90);
    backColor = random(100, 200);
    earPos = random(300,310)
    nosePos = random(320, 360)

}

Shariq M. Shah – Self Portrait01


Using basic geometric shapes and a subtle color palette, this exercise allowed me to explore different ways of arranging shapes in p5.js. Although the image looks simple, the functions that allow it to look minimal and composed will have uses in more complex programs.

shariqs_Portrait

// Shariq M. Shah
// Section C
// shariqs@andrew.cmu.edu
// Assignment_01


function setup() {
  createCanvas(600, 600);
}

function draw() {
  background(230, 211, 211);
  noStroke()

  fill(250, 200, 0)
  ellipse(300,600,600,300)

  strokeWeight(2)
  rect(220, 400, 150, 150, 15)

  //Face
  fill(200, 162, 132)
  rect(170, 180, 250, 250, 30, 100, 150, 150)

  fill(0,0,0)

  ellipse(300,180, 250, 150)
  rect(150, 180, 300, 80,30)

  //Left Spec
  noFill()
  stroke(300)
  ellipse(240, 290, 60, 60)
  ellipse(240, 290, 55, 55)


  //Left Eye
  stroke(300)
  fill(300)
  ellipse(240, 290, 30, 20)
  fill(0)
  ellipse(240, 290, 15, 20)
  ellipse(240, 285, 2, 2)


  //Right Eye
  stroke(300)
  fill(300)
  ellipse(340, 290, 30, 20)
  fill(0)
  ellipse(340, 290, 15, 20)
  ellipse(340, 285, 2, 2)

  line(175, 180, 425, 180)

  //Right Spec
  noFill()
  stroke(300)
  ellipse(340, 290, 60, 60)
  ellipse(340, 290, 55, 55)

  line(310,290, 270, 290)
  line(310,285, 270, 285)

  line(210,285, 170, 280)
  line(210,290, 170, 280)


  line(370,285, 420, 280)
  line(370,290, 420, 280)

  //Nose
  noStroke()
  fill(240, 171, 142)
  triangle(290, 300, 290, 340, 310, 360)
  fill(214, 171, 139)
  triangle(290, 300, 290, 340, 270, 360)

//Mouth
	fill (300);

	ellipse (290, 382, 70, 42);
	fill (200, 162, 132);

	rect (250, 360, 89, 21);

    ellipse(425,300, 20, 80)
    ellipse(165,300, 20, 80)


  fill(300)



  //Logo
  bezier(105, 20, 10, 10, 90, 90, 15, 80)

  //Collar
  bezier(220, 460, 300, 650, 150, 650, 370, 460)



}

 

Shariq M. Shah – Looking Outwards – 01

Holger Lippmann is a generative artist working at the intersection of art and technology whose work, through processing, seems to challenge perceptible reality. Initially training as a traditional visual artist, Lippmann later moved to Berlin in the middle of the electronic music boom. These interests in the visual arts and in electronic music merged into explorations in digital and computational art. Key works from his ‘noise warp’ collection use collectives of elongated shapes to define highly organic and warped field conditions. Lippmann draws inspiration from the flowing brushstrokes of Van Gogh, even drawing from the color palettes of his various paintings. A central concept of Lippmann’s works seems to be the aggregation of a relatively simple shape or element, i.e a line or rectangle, into varying densities and arrangements where they, as a collective, articulate complex and nuanced field conditions. As an architecture student, these visualizations provoke thought and introspection as spatial possibilities can be speculated. Explorations upon the responsiveness of such systems could have aesthetic as well as practical implications.

Holger Lippmann Website:

http://www.lumicon.de/wp