Name: Nishra Ranpura

  Critical Computation

  MFA Design and Technology 

Portfolio Link: https://cc-potrtolio-nishra.glitch.me/

​

Assignment 1: Lost and Found

​

Project Partner: Minghui Ju

​

Partner's lost object: Snoopy dog toy

​

Description of the Lost Object:

This toy dog is around 24 cm tall, it’s a “big” friend for me since I was little.

    1.  Color: The main body of the toy dog is all white, except the eyes, nose, mouth and ears, which are black. It has a blue hat on its head and a blue backpack on the back; I used to store some secret stuff in the small backpack.

    2.  Material: It’s made by cotton, the cotton brought a faint scent, which I remembered as the flavor of my childhood. Also, it covered with soft fur, it’s really enjoyable to give it a hug.

    3.  Details: The eyes of it look like peas and the nose is solid, it seems like there is something very hard inside its nose. It has two big ears, I used to play with them to make different ear styles. Its hands and feet have two lines made by black wool, which is used to distinguish its fingers and toes. It can sit firmly on its own, which is one of the most impressive gesture it left to me.

​

Initial Sketch of Minghui's Lost Object - Snoopy dog toy based on the description: https://drive.google.com/file/d/1PPwLXMyzjVOQURXO66Qh4cB-bEIz4Cl8/view?usp=sharing

​

Pseudocode:

1. Start with a Background.

2. Create a basic silhouette of the toy's form. (Add shadows and highlights if appropriate)

3. Add details and other body parts.

4. Draw the Blue Hat and Backpack.

5. Draw the remaining details that overlap the hat and/or backpack. 

​

(P.S. My Reflections for this design process are mentioned after the following code.)

*/

​

function setup() {

  createCanvas(400, 400);

  background(173, 194, 195);

  angleMode(DEGREES);

}

​

function draw() {

​

  noStroke(); // For almost all forms, and also because this is a 3D object

​

  // Background

  push();

  fill(100);

  ellipse(210, 340, 270, 70);

  noLoop();

  filter(BLUR, 12); // To give visual depth and bring the object into focus

  blendMode(MULTIPLY);

  fill(96, 64, 42);

  rect(0, 240, 400, 160);

  pop();

​

  // Body - Silhouette 

  fill(245); // To not creat a stark contrast  

  beginShape();

  curveVertex(100, 150);

  curveVertex(130, 70);

  curveVertex(198, 85);

  curveVertex(253, 90);

  curveVertex(287, 120);

  curveVertex(265, 168);

  curveVertex(215, 195);

  curveVertex(208, 205);

  curveVertex(220, 220);

  curveVertex(252, 256);

  curveVertex(255, 295);

  curveVertex(288, 295);

  curveVertex(311, 275);

  curveVertex(330, 286);

  curveVertex(340, 306);

  curveVertex(331, 336);

  curveVertex(319, 339);

  curveVertex(294, 333);

  curveVertex(250, 340);

  curveVertex(212, 347);

  curveVertex(179, 324);

  curveVertex(171, 294);

  curveVertex(190, 255);

  curveVertex(195, 222);

  curveVertex(175, 195);

  curveVertex(150, 183);

  curveVertex(130, 177);

  curveVertex(112, 160);

  curveVertex(100, 120);

  curveVertex(105, 100);

  curveVertex(130, 70);

  curveVertex(130, 70);

  endShape();

​

  // Ear

  push(); 

  fill(0);

  translate(-30, 30);

  rotate(345);

  ellipse(128, 160, 85, 125);

  pop();

​

  // Eye

  push(); 

  fill(0);

  rotate(15); 

  ellipse(218, 60, 10, 12);

  pop();

​

  // Nose

  push(); 

  fill(0);

  ellipse(290, 120, 20, 20);

  pop();

​

  // Feet (Definition)

  push(); 

  stroke(215); // This is more for distinguishing shapes and parts, and not as a part of the physical object 

  strokeWeight(2);

  noFill();

  arc(235, 275, 40, 100, 45, 90); // To distinguish Torso from feet

  beginShape(); // To differentiate the two feet

  curveVertex(250, 310);

  curveVertex(250, 310);

  curveVertex(293, 308);

  curveVertex(312, 291);

  curveVertex(330, 287);

  curveVertex(400, 300);

  endShape();

  pop();

​

  // Hat

  push();

  fill(57, 89, 170);

  beginShape(); // Use of curveVertex() is to give dimension to the hat

  curveVertex(140, 125);

  curveVertex(90, 125);

  curveVertex(85, 100);

  curveVertex(65, 80);

  curveVertex(110, 36);

  curveVertex(130, 50);

  curveVertex(150, 70);

  curveVertex(90, 125);

  curveVertex(85, 125);

  endShape();

  blendMode(MULTIPLY); // To help with perspective

  rotate(45);

  ellipse(110, -22, 12, 65);

  pop();

​

  // Backpack

  push();

  fill(57, 89, 170);

  rotate(12);

  rect(193, 175, 35, 130, 15, 15, 15, 5); // Played with different rounded edges to make the bag look connected

  rect(174, 230, 20, 75, 20, 20, 5, 20);

  pop();

    // Details such as zippers and stitch lines 

  push();

  stroke(57, 89, 170);

  strokeWeight(5);

  strokeCap(SQUARE); 

  noFill();

  blendMode(MULTIPLY); 

  line(170, 215, 160, 258);

  strokeWeight(2);

  line(140, 270, 127, 337);

  arc(158, 270, 34, 10, 0, 180);

  pop();

    // Strap

  push();

  stroke(57, 89, 170);

  strokeWeight(10);

  noFill();

  beginShape(); // Use of curveVertex() is for the free form of a bag's strap

  curveVertex(180, 250);

  curveVertex(180, 250);

  curveVertex(206, 230);

  curveVertex(230, 250);

  curveVertex(195, 310);

  curveVertex(170, 302);

  curveVertex(170, 302);

  endShape();

  pop();

​

  // Hand (Outline)

  push();

  stroke(215);

  strokeWeight(2);

  point(200, 249);

  point(205, 290);

  beginShape();

  curveVertex(200, 250);

  curveVertex(200, 250);

  curveVertex(205, 290);

  curveVertex(200, 315);

  curveVertex(210, 325);

  curveVertex(230, 315);

  curveVertex(225, 290);

  curveVertex(221, 250);

  curveVertex(221, 250);

  endShape();

  pop();

​

  // Wool stitch lines for Mouth, Feet, Hand (kept last to incorporate the hand's stitch lines, as the hand appears to be the front layer, overlapping bag strap.)

  push();

  stroke(0);

  strokeWeight(3);

  noFill();

  arc(228, 180, 34, 12, 30, 180); // Mouth

  arc(338, 312, 25, 25, 170, 270); // Right foot

  arc(330, 304, 25, 25, 190, 290); // Right foot

  arc(318, 292, 25, 25, 190, 290); // Left foot

  arc(210, 321, 4, 25, 150, 270); // Hand

  arc(220, 320, 4, 25, 150, 270); // Hand

  pop();

}

​

/*

My Reflections:

​

About Minghui’s description:

​

Minghui’s lost object is a (Snoopy dog) toy. The description expresses Minghui’s meaningful bond with the object, as he often evokes his sensory memories while describing it, such as how the object smells and feels to touch. He describes bits of his nostalgic experiences as well, about his interactions with the toy. This helps to paint a picture in one’s mind about the object’s interactions with the physical space- such as floppiness of the dog’s ears by the way he used to play with it, it being able to sit on its own, and the functionality of its backpack. In addition to using his personal experience to get one familiar with the toy, Minghui has fairly described the visual appearance in terms of colors of the different parts of the toy. Moreover, the mention of textures and materials such as soft cotton fur body, woolen lines for fingers and toes, and hard stuffed nose aids in connecting one’s haptic memories to the objects image.  

​

Even though the description is fairly clear and quite informative, it might fail to form an accurate image in one’s mind if one is unaware of the basic form or look of the character Snoopy Dog. The very same description can be easily applied to any type of a stuffed dog toy, which would end up looking completely different than Minghui’s lost object. 

​

Image Interpretation and Translation to code + Design Process:

​

Nonetheless, at a first glance, Minghui’s description processed quite coherently in my mind to form an image of a Snoopy dog toy wearing a blue hat, with a blue backpack, since I am aware of the character’s appearance. However, the very next stage is when the questions arose. What kind of a hat is it? Or is it a cap? Does the hat cover the ears? Is the hat sown to the head? What is the shade of the blue- light blue, cobalt, navy? How does the backpack look? Does it have a zipper, or a flap? How big are the sizes of the backpack and the hat? Is the backpack lose, or sown to the toy? Snoopy has a tail in the comics; did Minghui’s toy not have a tail? And these are merely some examples of doubts I started having even after being familiar with the character of Snoopy. This surely raises a question about how much information is lost while communicating, and what information is important or not important enough to receive an accurate message from the sender to the receiver. 

​

The previously mentioned questions intensify further when one starts to translate a mental image on to a visual one. Translating a conversational description into a visual image highlights the lack of specifics. While minds can fill in the gaps unconsciously while forming an image (probably drawing references from millions of past visual aids), a program (at least one that’s still a seed) cannot. In this assignment, the P5.js editor cannot create a blue hat and a backpack from its memory, as it doesn’t have one yet. Hence, it demands information, and this in turn makes the one ask the same questions consciously to oneself. And this is where one might consciously decide to introduce one’s personal inputs to fill the missing gaps.

​

1. Once a draft or a sketch of how the object looks was prepared, the next step included identifying the appropriate functions to duplicate the sketch to an efficient P5 sketch.

The first challenge was Snoopy’s silhouette, which was a free form. This was achieved using the curveVertex() function along with beginShape(), endShape(). This was established after exploring the arc() and bezier() functions for the same, where there were limitations in terms of fluidness and number of coordinates.

​

2. The simpler shapes to draw Ear, eye, nose, mouth, fingers, toes, were created using 2D Primitives, to make the code less complex. The arcs for mouth and fingers/toes were given thickness to show bulges from stitches. 

​

3. Hands and Feet were defined with linework on the silhouette, instead of separate shapes. This was to maintain the concept of a fluid stuffed 3D Toy with no prominent joints. curveVertex() was again used to address the free flowing nature. These were just used as outlines with no fills to avoid layering, even though not visible.

​

4. Blue hat, in order to give dimension to it, was created using curveVertex().blendMode() is used to give the hat a little dimension.

​

5. Blue backpack was drawn using 2D Primitives, for efficiency; and it strap with curveVertex(), for a free form. blendMode() is used to give the backpack a little dimension and details.

​

6. Since it is a toy, a Background that represents a desk and walls is used, but with not a lot of details, to keep the focus on the man object. A filter(Blur) function is explored with the shadow to give depth.

​

7. Layering and overlapping was kept in mind while deciding the order of the code, as it is a representation of a 3D form.

​

An attempt was made to incorporate shadows and highlights to the toy, using 2D shapes, to represent the 3D toy using curveVertex() and filter(Blur). However this surplus detail, which can probably be efficiently achieved using various advanced and yet unexplored 3D functions appeared to be unnecessary and out of place with a sketch that is more in 2D.

*/