Work Log

Create a "self" portrait using 2D primitive shapes. Play with symmetry in your portrait. Shapes include – arc(), curve(), ellipse(), line(), point(), quad(), rect(), triangle() – and basic color functions – background(), colorMode(), fill(), noFill(), noStroke(), stroke(). Remember to use createCanvas() to specify the dimensions of your window and wrap all of your code inside a setup() function.  Document the process of creating your sketch. What pitfalls did you run into? What could you not figure out how to do? How was the experience of using the web editor? Did you post any issues to github?

1. I created a sketch of what I wanted on a piece of paper.

   

2. I calculated quadrants of major points of the bodice and head on manual sketch and made a crude outline.

   

   • code: ICM_SelfPortrait01_body outline

3. The hair was difficult. I didn’t know the function arc() existed and I had a difficult time figuring out how to use curve() functions. After I took a look at how other peers were doing, I got an idea: (Thanks Amelia!🙂)

   • That I don’t have to start out with an outline but I could create different block shapes to jumble into one I wanted!

     

   • so I went and did that, and did a lot of adjusting…

     

   • code: ICM_SelfPortrait01_hair

4. For the face there had to be a lot of guessing for the right quadrants. I would start with a rough guess for points on paper, then adjust the x’s and y’s on screen by how they looked.

   • the sketches with the quadrants..

     

   • the eyes: I experimented with different angles and thickness of the lines

     

   • the smile: I had to do a long workaround.. by this time I had figured out a process of using guidelines to place my shapes

     

   • since I moved things around so many times adding and subtracting, I went over to Figma to check if things were symmetrical.

     

5. For my pose and hairpin I used the guideline process I developed above and arranged the order of the code for placement.

   

   

   • code: ICM_SelfPortrait01_face and hand
   • code: ICM_SelfPortrait01_final

6. After the ICM help session, I picked up that the arc() function could handle my smile issue more elegantly and I also wanted my pin & pose to be like a presentation so I put in a slight time lag to draw these two parts a bit later.

   Screen Recording 2024-09-09 at 7.46.55 PM.mov

   • code: ICM_SelfPortrait01_final_cleanup

   • my smile ended up being a bit wider, but I like it.

     

     

     I think it looks pretty similar to my original sketch! 😊

Questions

• [ ] If x and y starts at a certain point why doesn’t it belong in the setup() but before that?

  // Code that describes the starting position of a shape that will move
  let x = 50;
  let y = 0;
  
  function setup() {
    // Code to create a 400x400 canvas
    createCanvas(400, 400);
  }
  

• [ ] I get emulating an image via code Accurately but what would Precisely mean? That how I code to do a certain thing look similar in form?

  Reproduce the above image with code. Be as accurate and precise as possible.

• [ ] It would be nice if

  • I had recommendations for the functions
  • I could know the current setting or the default setting of a certain function (e.g. strokeWeight)

• [ ] I did my version control on the web editor. How might I do that on gitHub?