Concept
For this first assignment, I had a clear idea to create a cartoonish/fashion-styled sketch using coding. My goal was to create a visual card, which can be comprehensive and rememberable for the audience. With simple shapes and colors, I wanted to show something specific to me, for instance, ginger hair, interest in fashion sketching ( e.g. many curved lines used to draw body and hair), and two of my favorite colors used in the background. You can see the second color by clicking on the mouse 
Approach and Code Highlights
As I was initially drawing out some sketches, I thought that I’d use pretty basic, easy-to-do shapes. However, as I began coding, I immediately understood that I couldn’t do things I drew, as I was only aware of how to use ellipses, circles, and other functions of basic shapes we learned during our first class. At first, I decided not to worry about it and tried my best to do a portrait with those basic functions, however, it led me to a huge disappointment in both the work and myself. Below are my initial sketch vs. my first attempts to do a self-portrait:
I decided to challenge myself and take a risk in doing something I’d never done before. After a couple of videos, readings, and attempts to understand how different functions work, I decided to try out the beginShape(), and bezierVertex() functions to create more complex shapes and curved lines. I spent a lot of time trying to understand which points to choose and how to make smoothly curved shapes. The most time-consuming was to create a shape of wavy hair, which I am very proud of! Below you can see one of my failed attempts and the code I used to create the final result:
//hair fill(148, 60, 33); beginShape(); vertex(166, 123); bezierVertex(125, 120, 110, 152, 126, 168); bezierVertex(133, 173, 136, 186, 130, 203); bezierVertex(124, 215, 110, 225, 89, 240); bezierVertex(48, 266, 29, 286, 19, 306); bezierVertex(12, 338, 26, 370, 85, 385); bezierVertex(328, 398, 365, 374, 360, 338); bezierVertex(348, 310, 280, 290, 287, 258); bezierVertex(294, 230, 323, 206, 316, 176); bezierVertex(304, 148, 274, 146, 254, 138); bezierVertex(242, 131, 240, 118, 238, 110); bezierVertex(236, 100, 229, 86, 198, 87); bezierVertex(186, 88, 173, 98, 166, 123); endShape();
The biggest problem when using these functions was identifying what anchor and control points are and how they work to create a certain shape I want. For better understanding, in the beginning, I separately drew out every shape and recorded every point with its coordinates in my sketchbook. It is a method I used mostly in creating my portrait:
As I was looking through other students’ portraits, I was curious about how to incorporate interactive elements into my work. Initially, I was planning to have falling leaves behind my portrait in the background, as a way to show that my favorite season is Autumn + I was born during this season. After watching a couple of videos on how to create an array of falling points (you can find this resource at the end of the post) and multiple attempts at doing this, I couldn’t figure out a way to manipulate a bezierVertex function with animation, so I wasn’t able to achieve that. However, I’m planning to learn how to do it next time. Nevertheless, I wanted to include some interactive components, therefore I changed my concept a little bit to include another aspect of myself, which is two of my favorite colors: light pink and light blue. To execute this, I used the following part of the code, which I am particularly proud of:
function draw() {
//change background color when mouse is pressed
background(246, 215, 230);
if (mouseIsPressed) {
background(215, 233, 246);
}
Reflection and Future Thoughts
I am proud of my first attempt to code an artistic sketch using JavaScript language. I understand now how learning how to code can be helpful for the design of posters and animations, which I would like to make one day. As I think about what could I have done better the first idea is to use variables. After learning how to create variables during our second class, I understood how easy it would be to utilize the bezierVertex() functions that I used a lot in my code. Instead of hardcoding and constantly changing every single coordinate point in bezierVertex(), I would have saved time and energy by using the Weight and Height variables, adding or subtracting as much as I wanted. So, it’s a note for myself for future projects. Also, as I mentioned previously in this post, I would love to learn how to code animations like falling stars/snowflakes/leaves, etc. Unfortunately, this was out of my league for this first project, but as I learn new functions in P5JS, I definitely can learn how to do these cool things too!
Resources used for this project
- The most important one: https://p5js.org/reference/#/p5/
- Somewhere to choose the RGB colors: https://imagecolorpicker.com/color-code/d7e9f6
- Snowfall: https://www.youtube.com/watch?v=cl-mHFCGzYk&t=258s
- TheCodingTrain channel: https://www.youtube.com/@TheCodingTrain
- Book by Rune Madsen called Programming Design Systems: https://programmingdesignsystems.com/shape/custom-shapes/index.html#custom-shapes-pANLh0l