Self Portrait

I can’t decide if I really enjoy processing or find it really frustrating (probably both). Although, I played around with with the beginShape() endShape() functions and also the vertex() function, I couldn’t make them nice enough to include in the final sketch. So instead, I decided to stick to a simple version of myself made with all sorts of shapes (this part was fun).

void setup () {

size(400, 430);
background(255, 200, 200);

}

void draw() {
  
smooth();

// hijab?
fill(0, 0, 0);
ellipse(200, 240, 300, 400);

// face
fill(184, 153, 120);
ellipse(200, 195, 197, 235);

//eye
fill(200, 200, 200); 
ellipse(165, 150, 45, 22);
 
//eye
fill(200, 200, 200); 
ellipse(235, 150, 45, 22);

//pupil
fill(40, 0, 0); 
ellipse(165, 150, 20, 20);

//pupil
fill(40, 0, 0); 
ellipse(235, 150, 20, 20);

//eyebrow
fill(20, 0, 0);
arc(235, 132, 55, 15, PI, TWO_PI);

//eyebrow
fill(20, 0, 0);
arc(165, 132, 55, 15, PI, TWO_PI);

//nose
stroke(0,0,0);
strokeWeight(1);
fill(184, 153, 120);
ellipse(202, 200, 35,15);

//nose
noStroke();
fill(184, 153, 120);
ellipse(202, 192, 35,15);
 
//mouth
stroke(140,20,10);
strokeWeight(5);
noFill();
arc(202, 239, 72, 40, 0, PI);

//shoulders
fill(0, 0, 0);
noStroke();
rect(0, 350, 800, 600);

}

 

2 Blog Post on Readings

Her Code Got Humans on the Moon

I’m surprised I’ve never heard of Margaret Hamilton and what she was able to accomplish. With all the hardware (punching holes in stacks, hardwired, and indestructible memory, etc) and barely established software, Margaret was able to create an entire industry with her colleagues. The point about how Margaret wanted to extra features that could handle error was interesting. The way it was explained in the article, it seems like the P01 button was unnecessary, so I didn’t really understand why it was there in the first place if all it did was erase data which preventing the astronauts from getting back home. All in all, the main focus of this article seems to focus on how a women engineer was able to revolutionize a whole new industry.

“Emotion & Design: Attractive things work better”

I’ve realized that attractive things work better, but I’ve never looked or realized how that might be. What Norman claims about how being in a better positive state can result in people thinking of better solutions to use a product makes a lot of sense to me. Whenever someone is anxious or mad, they seem to not think about other solutions and instead continue to do the same thing over and over again and expect something to be different. When a design is unattractive, it can possibly put someone in a bad mood, which results in them not figuring out how to use something.

I thought the idea of using sound to break focus was very interesting because I never realized that it actually works (calling “fire” to get someone to notice that something bad is happening, having buzzing noises once something bad happens). I think these are all great ideas to get someone out of the negative affect.

Overall, from this reading, I feel more confused about how to create better designs since there’s so many aspects that I have to keep in mind. All the emotions that one feels when using a new product can change depending on ones mode makes it difficult to design. Norman says the reflective aspect is the hardest to work with especially since it prolongs with time. The visceral and behavioral levels are about the present, but the reflective one stretches into the future.

Self Portrait

The task for this week was to create a self-portrait using processing.  To solve this task, First, using ellipses, rectangles, and other primitive shapes from processing, I attempted to draw a human being as similar to myself as possible. After this, I realized that if I have full beard a look really different compared to when I am clean shaved so that’s why I decided to add the option that if the mouse is in the bottom part of my face then I beard will show up.  This interaction was created with an If statement and delimiting the pixels of the bottom part of my face. Then, also a blink interaction was added. Using the method as the beard, the user has the option that if he clicks in the eye section the eye will blink once. Finally, colors were added to the draw.

The biggest challenge for this assignment was setting up the location for the objects, I am not used to using this type of coordinates and I struggle with finding the correct coordinate where I wanted to put the object. My takeaway from this assignment is that the more organized and clear you set up your variables the easier will be to find the proper coordinates for the object and to later delimit areas to create interactions.

 

Reading Response- A Brief Rant on the Future of Interaction Design and Responses

Bret Victor talks mainly about making things more graspable, to maximize human capabilities in satisfying their own needs. When reading the “rant”, I realized that most of what he was stating was true as my own “visions” of the future is more advanced versions of the “flat” surfaces we have now. As much as I love my phone, laptop, and Ipad, I have to admit that they do not indeed maximize the full potential of activity that our hands and bodies can do. I do know as someone who paints and draws that the hand, alongside the arm and the shoulder it’s attached to can do so much more and deserves more interactivity than just sliding a flat surface.

Self Portrait – Using Processing

The task was to: create a self-portrait. The fact that I have spent my break actually painting a self-portrait is just funny because, in comparison to that, this small animated version of me is as good as it gets with my skills at processing. I used basic shapes and then a text that changes when you click it just to add some element of interactivity to the portrait. I also added an easel and a pallet at the right because it felt like there had to be something “about me” rather than just an animated version of me.

This was the full version of what I made at the end.

boolean textHasBeenClicked = false;

int count = 1;
void setup(){
  size(1000,1000);
  background(255, 200, 200);
}
 
void draw(){
  background(255, 200, 200);
  fill(101,67,33);
  ellipse(225,270,250,400);
  fill(255,205,148); //color of big ellipse
  ellipse(225,200,175,200); //big ellipse\
  noStroke();
  fill(101,67,33);
  rect(165, 100, 120, 40, 7);
  fill(25.1,50.1,100.2);
  rect(116,300,200,300,7);
  fill(255);//white iris
  ellipse(200, 175, 30, 20);//eye
  ellipse(250, 175, 30, 20);//eye
  fill(0); //color of small ellipses
  ellipse(200, 175, 20, 20);//small ellipses
  ellipse(250, 175, 20, 20);//small ellipses
  fill(255,0,0);
  arc(227, 241, 75, 50, 0, 3.14); //smile
  fill(0);
  triangle(228, 209, 221, 217, 237, 217);
  fill(181,101,29);
  ellipse(700,150,200,200);
  fill(255,0,0);
  ellipse(700,100,20,20);
  fill(0,255,0);
  ellipse(650,120,20,20);
  fill(0,0,255);
  ellipse(700,150,20,20);
  fill(250,218,94);
  ellipse(750,100,20,20);
  fill(255, 200, 200);
  ellipse(740,181,50,50);
  fill(255);
  rect(578,263,200,250);
  stroke(0);
  line(631, 606, 677, 516);
  line(677,516,717,606);

  fill(0);
      if (textHasBeenClicked) {
        // display text 2
        text("I waste my time listening to music and painting <3" , 400,300);
      
    }
    else  {
        // display text 1
        text("Hello, I am Dhabia, click on the text please" , 400,300);
        
    }
  frameRate(12);
  println(mouseX + " : " + mouseY);
  
}
 
void keyPressed(){

}
 
void mouseClicked(){
textHasBeenClicked = ! textHasBeenClicked;
}

An artist I felt particularly inspired by while researching is https://www.sergioalbiac.com, as he uses code to make art.

Self Portrait

This week’s assignment was to create a self-portrait in Processing. It felt a little counterintuitive to draw using lines of code, especially regarding time. Why should I draw a shape for like 5 minutes coding the exact position of vertices, while I can open Illustrator and have the same shape done it a matter of seconds? The answer came when I wanted to add some cool effects. And that got me very excited for all the possibilities that opened with this initial exercise.

For this assignment, I mostly I used the beginShape() endShape() function but to get some practice, I experimented with triangles, rectangles, ellipses and all sorts of shapes. Definitely the hardest one to crack were arcs and its angles – though they are very simple, I had to revisit high school trigonometry for that which opened some painful memories. I also googled a lot and the game-changing hack was to track your mouse cursor using “print” so you know the exact coordinates. Cannot even say how much time this has saved me. Also smooth() function is very great as it makes the corners look less robotic and more finessed!

Overall I created a very simplified version of me with some pastel colours and lazy triangular pseudo shadows to add some structure. And when you put your cursor to my necklace my hair (and eyebrows) go crazy. Yay.

And the code:

//setting up the colors I'm going to use
color backgroundColorA= color(170, 196, 171);
color backgroundColorB= color(115, 144, 130);
color faceColor = color(225, 199, 186);
color lipsColor = color(214, 171, 154);
color shirtColorLight = color(207, 213, 213);
color shirtColorDark = color(180, 181, 181);
color necklaceColorLight = color(211, 181, 123);
color necklaceColorDark = color(211, 168, 85);

//colors for shadows
color shirtShadowColor = color(227, 234, 235);
color cheeksColor = color(226, 169, 175, 50);

//color integers for some cool effects later on
int hairColor;
int hairShadowColor;

void setup() {
  size(500, 500);
  smooth();
}

void draw () {
  background(backgroundColorB);
  noStroke();
  ellipseMode(CENTER);
  fill(backgroundColorA);
  ellipse(width/2, width/2, 450, 450);


  if (mouseX>240 && mouseX<260 && mouseY>370 && mouseY < 390) {
    hairColor = color(random(255), random(255), random(255));
    hairShadowColor = color(random(255), random(255), random(255));
  } else {
    hairColor = color(102, 94, 91);
    hairShadowColor = color(80, 75, 70);
  }


  //hair in the back
  fill(hairColor);
  rect(175, 240, 150, 150);


  //head and neck
  fill(faceColor);
  rect(160, 100, 180, 150, 10);
  rect(230, 240, 40, 40, 10);

  //shirt collar
  fill(shirtColorDark);
  rect(215, 294, 70, 5, 10);
  fill(shirtColorLight);
  rect(210, 275, 80, 20, 10);

  //shirt body
  fill(shirtColorLight);
  beginShape();
  vertex(215, 299);
  vertex(90, 320);
  vertex(90, 400);
  vertex(410, 400);
  vertex(410, 320);
  vertex(285, 299);
  endShape(CLOSE);

  //arms
  ellipseMode(CENTER);
  ellipse(90, 360, 20, 80);
  ellipse(410, 360, 20, 80);

  //shirt shadow
  fill(shirtShadowColor);
  triangle(380, 327, 409, 362, 397, 336);
  triangle(98, 369, 153, 388, 103, 380);
  triangle(261, 282, 279, 287, 276, 280);

  //necklace
  stroke(necklaceColorLight);
  strokeWeight(2);
  line(215, 299, 250, 370);
  line(285, 299, 250, 370);

  noStroke();
  fill(necklaceColorLight);
  ellipseMode(CORNER);
  ellipse(240, 370, 20, 20);

  fill(necklaceColorDark);
  ellipse(245, 370, 10, 10);


  //hair
  ellipseMode(CENTER);
  noStroke();
  fill(hairColor);

  //letf shape of hair
  beginShape();
  vertex(158, 108);
  vertex(128, 168);
  vertex(135, 258);
  vertex(125, 331);
  vertex(141, 367);
  vertex(176, 372);
  vertex(194, 315);
  vertex(181, 231);
  vertex(193, 167);
  vertex(204, 133);
  vertex(265, 110);
  endShape(CLOSE);

  //top of the head
  arc(323, 110, 100, 70, -PI, 0);
  arc(218, 110, 120, 70, -PI, 0);
  rect(251, 100, 40, 10);

  //right shape of hair
  fill(hairColor);
  beginShape();
  vertex(323, 102);
  vertex(313, 183);
  vertex(305, 281);
  vertex(315, 371);
  vertex(369, 328);
  vertex(386, 242);
  vertex(373, 109);
  endShape(CLOSE);

  beginShape();
  vertex(303, 104);
  vertex(322, 141);
  vertex(331, 97);
  endShape(CLOSE);

  //hair shadow
  fill(hairShadowColor);
  triangle(311, 255, 320, 344, 322, 286);
  triangle(168, 139, 167, 171, 154, 193);
  triangle(324, 84, 356, 104, 345, 90);
  triangle(173, 254, 187, 312, 170, 283);
  triangle(368, 147, 376, 229, 365, 183);
 


  //eyes
  stroke(lipsColor);
  strokeWeight(5);
  arc(220, 170, 20, 5, -PI, 0);
  arc(280, 170, 20, 5, -PI, 0);

  //lips
  stroke(lipsColor);
  strokeWeight(5);
  noFill();
  arc(250, 215, 30, 20, 0, radians(180));

  //chin
  strokeWeight(1);
  line(240, 250, 260, 250);

  //eyebrows
  stroke(hairColor);
  strokeWeight(3);
  noFill();
  beginShape();
  vertex(270, 150);
  vertex(280, 148);
  vertex(295, 150);
  endShape();

  beginShape();
  vertex(230, 150);
  vertex(220, 148);
  vertex(205, 150);
  endShape();

  //chubby cheeks
  fill(cheeksColor);
  noStroke();
  ellipseMode(CORNER);
  ellipse(190, 188, 30, 40);
  ellipse(282, 188, 30, 40);

  //cursor tracker
  print(mouseX);
  print(" ");
  println(mouseY);
  
  saveFrame("me_####.png");
}

 

Response to “Her Code Got Humans on the Moon”

I can’t even imagine what it must have felt like to be a woman working in IT in 1960s. Great amount of prejudice, underrepresentation, pushback, judgement or any other form of sexism are still extremely  pressing issues nowadays not only in IT and STEM fields but in any working environment in general. And although the article only subtly touches the gender related struggles of Hamilton’s experience and mostly advocates for retrospective recognition of her great achievements, it still strikes me of how far we have come and how far we still have to go regarding this matter.

After finishing the article, I felt a strong sense of admiration for Hamilton. Her story is very similar to thousands of other women who had to get out of the rigid boxes that society put them in. It captures the struggles they, equally qualified employees, had to go through while their male colleagues did not. And how much less space they had for creating any mistakes. Let’s say Hamilton was male. Would they have still considered the code she wanted to add as unnecessary?

What is more, Hamilton achieved a breakthrough in a field that did not even exist at the time – she succeeded in it before they managed to declare it a male dominated industry that she would have no place in. And the fact that her, and probably many other women helped set foundations to software as we know it today, puts the whole “IT is a man’s world” argument into question.

Self-Portrait

For this project, I made a self-portrait using processing. I decided to create a fairly basic human-looking face and incorporated a few features that I thought were very characteristic of me. This includes my really big eyebrows, along with my hair which frequently changes.

When any key is pressed, the hair changes between three different states: a top hat, a mohawk, and bald. I added more interaction by allowing the user to control which direction my mohawk was going in through the use of the mouse. Lastly, my pupils follow the mouse as well when the user moves it around.

I found it difficult to use the arc tool at first, but I was able to get it to do what I wanted more or less, though I still cannot say that I mastered it.

Here is the code I used for the project:

boolean hair1 = true;
boolean hair2 = false;
boolean hair3 = false;

int state = 0;

void setup() {
  size(400, 500); 
  rectMode(CENTER);  
  background(131, 206, 210);
}


void draw() {
  background(131, 206, 210);
  //create my white t-shirt
  fill(255, 255, 255);
  noStroke();
  beginShape();
  vertex(0, 500);
  vertex(160, 421);
  vertex(241, 421);
  vertex(400, 500);
  endShape(CLOSE);
  //hair 1 back of head
  if (hair1) {
    fill(0, 0, 0);
    strokeWeight(10);
    ellipse(200, 140, 80, 80);
  }
  //neck
  fill(224, 192, 134);
  noStroke();
  rect(200, 370, 80, 105);
  //ears 
  strokeWeight(14);
  fill(242, 160, 147);
  stroke(234, 192, 134);
  ellipse(100, 220, 40, 40);
  ellipse(300, 220, 40, 40);

  // face 
  noStroke();
  fill(234, 192, 134);
  ellipse(200, 250, 200, 250);

  //mouth
  strokeWeight(10);
  stroke(205, 115, 115);
  arc(200, 290, 60, 60, 0, PI);  // upper half of circle
  //more of hair 1 (on top of hair)
  if (hair1) {
    fill(0, 0, 0);
    noStroke();
    strokeWeight(20);
    arc(200, 145, 125, 50, 0, PI, OPEN);
    ellipse(200, 140, 105, 30);
  }
  //eyes
  noStroke();
  fill(255, 255, 255);
  ellipse(155, 220, 35, 35);
  ellipse(240, 220, 35, 35);

  //pupil
  strokeWeight(7);
  stroke(0, 0, 0);
  fill(139, 69, 19);
  ellipse(constrain(mouseX, 152, 158), constrain(mouseY, 217, 223), 8, 8);
  ellipse(constrain(mouseX, 237, 243), constrain(mouseY, 217, 223), 8, 8);

  //eyebrows
  strokeCap(ROUND);  
  strokeWeight(14);
  fill(0, 0, 0);
  line(125, 190, 178, 190);
  line(215, 190, 268, 190);

  strokeWeight(6);
//assign states of hair to change
  if (state == 0) {
    hair1 = true; 
    hair3 = false;
  } 

  if (state == 1) {
    hair1 = false; 
    hair3 = false;
  }  
  if (state == 2) {
    hair3 = true; 
    hair1 = false;
  }    
  if (hair3) {
    strokeWeight(20);
    line(160, 140, constrain(mouseX, 70, 210), constrain(mouseY, 60, 80));
    line(175, 140, constrain(mouseX, 90, 230), constrain(mouseY, 60, 80));
    line(190, 140, constrain(mouseX, 110, 250), constrain(mouseY, 60, 80));
    line(205, 140, constrain(mouseX, 130, 270), constrain(mouseY, 60, 80));
    line(220, 140, constrain(mouseX, 150, 290), constrain(mouseY, 60, 80));
  }
}

void keyPressed() {
    state += 1;
    if (state == 3) {
      state = 0;
    }
  }

 

 

Self Portrait

For this “self portrait”, I mainly just tried to add face features and use the right colors for them, but I wasn’t able to actually draw it the way it actually looks since that was a hard. The one additional aspect I added was that the eyes sort of blinks after a few seconds. This was achieved by modulating the frameCount and whenever the value is between 0 and 50, the eyes will not show, therefore, creating the visual effect of blinking. This project just involved a lot of trial and error for placing shapes and it was a great learning experience. I think the arcs are still a bit confusing but after remembering middle school math, I think I’ve gotten the hang of it.

void setup() {
  size(460, 500);
  frameRate(30);
}

void draw() {
  noStroke();
  background(104, 193, 200);
  fill(0);
  rectMode(CENTER);
  rect(width/2, height/2 + 30, 270, 300);
  
  //shirt
  fill(17, 103, 168);
  ellipse(width/2, height/2 + 285, 280, 300);
  
  //face and neck
  fill(239, 198, 107);
  ellipse(width/2, height/2 - 30, 250, 300);
  rect(width/2, height/2 + 130, 50, 50);
  arc(width/2, height/2 + 140, 90, 50, 0, PI);
  
  //eyes
  if (frameCount % 50 > 0 && frameCount % 50 < 50) {
    noStroke();
    fill(255);
    ellipse(width/2 - 55, height/2 - 50, 50, 20);
    ellipse(width/2 + 55, height/2 - 50, 50, 20);
    fill(102, 82, 34);
    ellipse(width/2 - 55, height/2 - 50, 20, 20);
    ellipse(width/2 + 55, height/2 - 50, 20, 20);
  } else {
    noFill();
    arc(width/2 - 55, height/2 - 70, 50, 10, 0, PI);
    arc(width/2 + 55, height/2 - 70, 50, 10, 0, PI);
  }
  
  //nose, arm line
  stroke(0);
  line(width/2, height/2, width/2, height/2 - 35);
  line(width/2 + 80, height/2 + 250, width/2 + 80, height/2 + 180);
  line(width/2 - 80, height/2 + 250, width/2 - 80, height/2 + 180);
  
  //eyebrow
  noFill();
  arc(width/2 - 55, height/2 - 70, 50, 10, PI, TWO_PI);
  arc(width/2 + 55, height/2 - 70, 50, 10, PI, TWO_PI);
  
  //mouth
  fill(0);
  arc(width/2, height/2 + 40, 100, 70, 0, PI);
  arc(width/2, height/2 -100, 270, 230, PI, TWO_PI);
  fill(229, 87, 87);
  arc(width/2, height/2 + 59, 80, 30, 0, PI);
}

Response to Norman’s “Emotion & Design: Attractive things work better”

I must admit that prior to reading Norman’s chapter, I was thinking of attractiveness of design as a bonus – something that makes some people feel more comfortable using it, but never as something that has direct biological ties. That beautiful design is perceived to be easier to use (almost like a placebo effect – which is still a valuable one) rather than to actually be easier to use. Therefore, to me, it was quite eye-opening to read Norman’s scientific reasoning (communicated in a very simple and approachable way) on why, from evolutionary perspective, making people feel good and relaxed or stressed and tense has an effect on how they use and experience the product. And in result, how it shapes the usability of the product itself.

Yet it all sounded a way too good, a way too simple and I got very skeptical. As if there was a general pattern based on the way all of our brains are wired to follow when designing. Then Norman saved it a little and added crucial points about how some of these mechanisms are “predispositions rather than full-pledges systems” and “one person’s acceptance is another one’s rejection.” And though the points on visceral, behavioural, reflective experience introduce a new, more strategic and thoughtful way of designing not only the product but the experience with it as well, the conclusion is left very open.

To me, it raised many more questions: if there is a clash, is it the fault of the product or of the individual using it? Where is the line and what is the extent to which the designer is supposed to predict one’s affect and adjust the final product to it? Is it even possible to do it? And while Norman’s chapter offered really great points and fresh perspective for consideration, it feels like another extra kilo was added to the burden that designers carry. Norman introduced more factors (though very crucial ones) to consider, which make a designer’s job even more impossible than it was before because humans are diverse and confusing.