Concept:

For this project, I couldn’t really think of anything in particular that satisfied the requirements, so I took another approach where I thought of elements I wanted to have in my work and I slowly expanded from there to satisfy the requirements. Whenever I feel stuck or uninspired, I’d turn to cats because I just love cats, and thus I started brainstorming this project with cats. After many considerations on the user interactivity and my artistic preference, I ended up with the idea of ‘Choose’ your destiny but as a cat. The work revolves around a day in the life of a cat in a cafe where it’s cozy, calm, and full of ‘ambiance’, something I personally enjoy as well. I wanted the work to have as many ‘senses’ as possible, and to me that would mean sound and visuals, so throughout the work, I intend to create a cozy, natural world through constant sounds that’s not abrupt and well designed. However, different from my initial design, I decided to remove the weights from the choices to make the work more “experience-based” so the users don’t rush through the story to get the weighted result, much like what people used to do with the Buzzfeed quizzes. Therefore, I kept the options purely as the design or story line and sounds, and nothing else, so that  the users can really immerse and focus on the ‘cat life’ they imagine/want to see, instead of rushing through. 

A highlight of code I’m proud of: 

I’m particularly proud of my animations, the two cats I ‘drew’, as well as the rescaling of the coordinates for elements to appear nicely according to window height and width:

A snippet of the rescaling I did: 

square(width / 3, 135, 200);
  fill("#a77952");
  rect(width / 3, 290, 195, 40);
  fill(255);
  noStroke();
  //right cloud
  circle(width / 3 + 153, 180, 48);
  arc(width / 3 + 196, 174, 60, 60, HALF_PI, PI + HALF_PI, OPEN);

My animation sprite and the code for it to move:

 

 

 

//initialize cat frames arrays
  sitCatFrames = await Promise.all([
    loadImage("sitCat 1.png"),
    loadImage("sitCat 2.png"),
    loadImage("sitCat 3.png"),
    loadImage("sitCat 4.png"),
    loadImage("sitCat 5.png"),
  ]);

sittingCat = new sprite(sitCatFrames, width - 250, height - 270, 200, 200, 9);

 

Embedded sketch:

 

‘How Was This Made’:

I started by organizing the class and the functions I want to have. After getting those figured out, I started drawing out each scene then moving them to their designated draw functions so I could call on it, however as the scenes increased, this method stopped working that well, because I had to go through the work itself (the buttons and everything) just to see the updated versions of the specific scene, which was very annoying. So instead of drawing beforehand, I would change the starting scene index to the one I’m working on right now and draw within that scene’s function and see the updates, so essentially a little reversed work. So with that,  I just gradually placed everything in place, drew buttons and texts, etc and then used the coordinates of the elements to design the click detections. After I got comfortable and grasped a good sense of work flow, I started adding other media like my animation sprites. Everything went pretty smooth, until I started working on the rescaling for window width and height.

Changing canvas: 

Changing the canvas size made the draw functions I made very disorganized because they all had very specific coordinate values and because the values were made for a 600 x 500 canvas, so they were all concentrated in that top left corner. This means, I have to now ‘scale up’ all of the elements’ size, coordinates, etc. to match the new canvas size. For text and drawings, it was fairly simple, however, it’s the click detections for the buttons that really threw me off, so I really had to go through all the specific values for the buttons and update them to the new ones that’s proportional to the window size.

I made the text right aligned, so the x & y coordinate is for the right top corner, which is the opposite of how we usually imagine positioning elements, which made the positioning of the next button very difficult as it uses the conventional way of positioning, thus i had to “reverse” calculate and it finally worked and fixed in a position I liked.

Before:

After adjusting: 

And with that, rescaling came with difficulties in click detections because now I don’t have the precise values and have to calculate respective to the window’s height and width, which is extra difficult when some elements are in mode(center/right/left) :

Wrong calculation making click detection not precise:

Correct values:

With the rescaling done, the rest was mostly smooth and mostly about my own aesthetic preference like the font distinction between the owner and the cat as well as the prompt for the restart page. I picked a specific font for the storyline to play into the atmosphere, tone and overall story line I had in mind, which was very cozy and all, but for the restart page, I found that font not too ‘useful’/’optimal’? It was abrupt and didn’t feel like a good design so I went with this typing machine kind of font to make it more ‘cold’ and ‘machine’. 

Story font:

Changed to this: 

 

Reflection for future improvements:

I found the wireframe very helpful, drawing the scenes out helped ground my work flow and gave me a sense of ‘assurance’ for reference. However, with that said, I wish I went and made it more detailed? So that things can be even more organized, maybe including the desired text and button positions, etc. because at some point I had a little contemplation on where I should place them but I quickly figured it out after experimenting. Overall I really enjoyed working on this project, especially on the animation, I really enjoyed drawing them!

 

References:

P5js library

owner cat pic

For the inspiration of picture:

Gemini generated: 

 

Pinterest inspo cat window sprite:

cat sleeping by window

cat sprite

inspiration

left kid holder image

 

Right customer image, generated by gemini to match the kid’s art style:

 

All sound files from freesound :

Background music,       meow,     hungry meow,       door bell,        eating

Concept:

For this project, I couldn’t really think of anything in particular that satisfied the requirements, so I took another approach where I thought of elements I wanted to have in my work and I slowly expanded from there to satisfy the requirements. Whenever I feel stuck or uninspired, I’d turn to cats because I just love cats, and thus I started brainstorming this project with cats. After many considerations on the user interactivity and my artistic preference, I ended up with the idea of ‘Choose’ your destiny but as a cat. The work revolves around a day in the life of a cat in a cafe where it’s cozy, calm, and full of ‘ambiance’, something I personally enjoy as well. I wanted the work to have as many ‘senses’ as possible, and to me that would mean sound, so throughout the work, I intend to create a cozy, natural world through constant sounds that’s not abrupt and well designed. To make the ‘choose your destiny’ design intentional and purposeful, I plan on weighting the choices so there will be a result (cat name/ nick name) displayed at the end of the game that reflects on the choices users made. However, one fun twist of this is that while the result is reflective of the user’s choices, it’s not really a destiny that they ‘chose’, but rather the opposite: an ‘already-decided’ destiny that you got to know about in the end. The result explains the user’s choices through the cat name. This feature is just a concept I personally find interesting.

sketch:

 

Design:

For the visual design, I plan to just play into the cozy vibe as much as possible so that might mean warm tones, winter/rain, plants, and really anything that seems like an ‘ideal cafe’ for me. For the user interaction aspect, users will mainly interact with the work through choices/options to ‘choose your destiny’, but I plan to add other elements into the cafe where the user can interact with in different ways to discover sounds, images, etc. just to make the ‘cafe’ more ‘alive’.

I plan to make the scenes into a class to make the code more concise and efficient, and also to explore the specific built-in function/ interactivity design as I work on the project just to experiment and see which is better for the result, which is pretty subjective to my artistic decision.

Most frightening part:

To me, the most frustrating part would be the sound design, because really, the main way the story is delivered is through sound and to make sound “prevalent” without making it noisy and overwhelming is something I’d need to spend time to refine, especially given the specific mood I want to achieve. Another part would probably be the scene transitions but I think I’ll have a better idea once I start experimenting.

Actions to minimize risk:

For the sound engineering part, I plan to limit the variations of sound and manipulate the volumes to make sure it’s not overwhelming and noisy while appropriately cultivating the ‘cafe world’ and achieving the feeling and tone I want. I also will research and experiment with the different transitions i can utilize to make the work more coherent and ultimately the user experience more smooth and enjoyable.

Creative reading response:

I think a major difference between computer vision and human vision is the way we process things and how we’re able to process visual information. The computer needs to have recognition ’manually’ set up in order to process the visual data, but humans don’t, we have a built-in innate processor—the brain. Before answering this question, I never really thought about this, because in hindsight, computer vision ‘sees’ things, or else how would there be videos right? Then I realized, no, it doesn’t ‘see’ things, I only assumed so because I see it, but the computer only recorded it as a data, as pixels, it has no concern on the content, in fact, it’s unable to recognize the content unless I define what’s content, which means the specific lighting, color, motions, etc., which again contradicts how we process because this action of ‘defining’ is in of itself restricting and ‘predictory’ already; contents can appear in any light, form, color, and motion. This is quite fascinating to me because this complex machine of a computer can be so precise but still not more precise than our brain, and how I’m able to have vision and recognition without ‘programming’.

Because a computer only recognizes data, we have to manipulate the data it receives and the way it interprets it so that we can display an output that makes it seem like it understood the ‘contents’. That means we need to set up ‘mathematical’ comparisons between the values of pixels and frames, a bigger component of pixels, and specify the kind of values we want to focus on, like a specific color, specific ‘motion’ or a specific brightness. To make it easier for the computer, we can ‘sell-fulfillingly’ manipulate the physical space the camera is placed in to achieve the ‘recognition’ we set up. For instance, if I made the recognition to focus on the difference of brightness, I can make the space all white so that my ‘target object’ can be more easily found because of the intense contrast between the brightness, or I can even make the space ‘illuminated’ so they’re emitting light, which our desired object shouldn’t be able to do, or else there’d be a small slip-up.

This also makes me fascinated in the way surveillance is incorporated into artworks because surveillance/ tracking places a higher demand on the computer since it’s done in ‘secret’ and thus means we can’t manipulate the physical space or the target object but yet surveillance and tracking is still existent, and even used in interactive art. I wonder if that ‘shortcoming’ helps make the art or are they sufficient enough? I don’t know, because intuitively, we always want to have better and more intelligent and upgraded devices, but sometimes artists would purposefully find ‘outdated’ and abandoned things to make their point so I guess my opinion is that while the physicality of devices and equipments affects a lot on the work, it’s not a determining factor to ‘artistic expression’ in the sense that anything less of the best would not make art, which I think is why people like Myron is still able to make something as good as videoplace in a time ‘tech’ wasn’t that prevalent.

Concept:

The second I heard about the data visualization assignment in class, I thought of color data and the embodiment of them “visually”, because embodying something “conceptual” is just something that fascinates me. So when I settled those thoughts, I began brainstorming the specifics of how I would present the data visually. Inspired by the demonstration in class, I really wanted to do something translucent: not too opaque, form a new color when 2 shapes overlap, and just this “gradient” or colors all over the canvas.

Highlight of code I’m proud of:

I’m pretty proud about the loop, conditionals, and overall execution of the “shapes” and colors because they were disastrous at first and I was finally able to piece them together properly so that shapes of different colors don’t clump together and appear all at once (I keep forgetting draw is a loop function in of its own..)

function draw() {
  if (currIndex < num_rows){
    
    let i = currIndex;
    
    let sw = map(age[i], minAge, maxAge, 0.5,10);
    strokeWeight(sw);
    
    let x = random(10, width-10);
    let y = random(10, height-20); 

    let c = color(favColor[i]);
    c.setAlpha(135);
    fill(c);
    
    stroke(favColor[i]);
    
    if (gender[i] == 'Male'){
      rect(x, y, age[i], 50);
    }
    else if (gender[i] == 'Female'){
      ellipse(x,y, age[i], random(5,50));
    }
    else if (gender[i] == 'Other'){
      square(x,y, age[i]);
    }
    else {
      circle(x,y, age[i]);
    }

    currIndex++;
  }
  else {
  noLoop(); }
}

Embedded sketch

How Was This Made :

First I briefly visualized in my mind how I wanted the work too look like and went to search in the data library for data sets related to keywords like “favorite colors”, “colors of countries”, etc. and landed on this not so big data set of favorite colors of people of different age, country, and gender. Because the country was not so diverse and didn’t have “values” I could make use of, I removed it along with other location related columns. So eventually, I only had the age, gender, and favorite color columns which I used for size, shape, and color respectively. 

I also contemplated a lot on which shape to assign for each gender, especially with the gender “other” and blanks (no gender input). Initially, I hesitated in keeping the empty gender rows because I didn’t know how I would “call” for it or refer to it in my code but I also wanted to keep them to diversify my shapes, so I kept it to experiment with it, and if it didn’t work then perhaps I’d remove them because it’s just 2 rows with empty gender. After I randomly decided the shapes for each gender I started to initialize the artwork: uploading the edited csv file, loaded the file, and assigned variables with values based on the file.  

After initialization, I started working on the specific for loop and the if statements in it, which is where I began my recurring mistake of loops inside the draw loop. Half way though the if statements, the work started to display and I realized that things were clumping together; different color of the same shape but different size were clumped together like this:

And then I asked Gemini to help me debug and turns out it had to do with the placement of x and y outside of the for loop so I simply placed them inside the loop and it was able to display as separated shapes:

However, this was still not what I wanted because everything just came all at once and I didn’t like that, as well as the opacity of the shapes. I began with the opacity. I first searched for the “alpha” values of each shape but I couldn’t find, not sure if i remembered things wrong, but I then resorted to asking Gemini on how to change the opacity of all the shapes and I landed on setAlpha(), so I just assigned the color[i] to a variable c, and then used c.setAlpha and adjusted the opacity to this:

Then I started solving the loop issue, and after examining the code, I realized that it probably has something to do with the “draw” loop, because this has been something that repeatedly happened in my work so at this point I’m pretty familiar with it. I tried to look for ways to stop it, one of them being the noLoop () in draw and loop() in mousePressed that was demonstrated in class, but unfortunately that’s not what I wanted for my art work (although probably would’ve been really useful in my previous work). Finally, I resorted to removing the for loop and entirely relying on the draw function to loop through the file, and it finally worked 😢: 

 I also wanted to incorporate the feature of map() so I used maxAge and minAge to map the age values to the range 0.5 to 10 for the stroke weight so that the shapes could have another factor to embody the age values other than the size. So you can tell relatively what age corresponds to what color. But one mistake I’ve made during this process was that I forgot to give the map a specific value from age  ( age[i] ) and just gave the entire column ( age ) instead, so the stroke wasn’t really visible. However, after I used Gemini to debug, I was able to realize that (along with many other bugs).

Before:

After:

I used Gemini to debug and referred to the p5js reference library for details on the functions and parameters. 

Reflection and improvements:

I really enjoyed this work and the process of examining the data, interacting with them and ultimately embodying them visually with each visual component to say something about the data. I do see that this work is perhaps “too simple” but artistically speaking, I don’t know/ don’t see how I could add more things to the work that would be meaningful to the embodiment of the data so I just didn’t force it. I’m really satisfied with this work and the process and hopefully moving forward, I’ll gain more familiarity with the functions and will be able to have more keen senses on my bugs.

Creative Reading Response:

I think one recurring answer for me on the topic of “difficult tech/design” would be Notion. I’ve repeatedly given myself and Notion a “second-try”, which really went on to be more than two tries, just so I can get on the “trend” and make use of all the great, highly productive, convenient, and efficient functions that it’s known for. However, it’s exactly its variety of functions that trips me over and frustrates me immensely. Whenever I’m trying to customize my pages, it’s just confusing, then I turn to templates which work for a while but then becomes confusing again when I wish to edit some features to better suit my habits and lifestyle. The “advanced” functions also made me feel “inferior” in the sense that even if I watch tutorials and follow other people in making my own templates, I just can’t seem to “figure it out” and make the experience less like untangling a yarn ball, while the other people, who are the reason I wish to use Notion, just seem like they’ve got it all figured out and under control. Talking about control, that’s also something I find really important in my experience with Notion. Oftentimes, when I’m exploring or setting up pages and links, they just suddenly become messy and “wrongly organized” and hard to “undo”, which makes me feel very “powerless” and frustrated. However I do think it could be improved, or perhaps some products are just not meant for everyone, which brings me to my opinion on what the text mentioned about how consumers shouldn’t accommodate products but rather products should accommodate consumers.

While I totally agree with this point, I also see the difficulty in juggling an advanced variety of features in the product and consumer experience. I think it’s almost like calculators, you need a certain level of “knowledge” to know how to use it and make it to the full use, like me and Notion: yes, you can stop with the basics of 1+1 but once you know there’s tools for graphs and derivatives, you just can’t help but to want more from the product and end up struggling with it. Or perhaps I‘m wrong and that Notion could in fact be better in accommodating consumers like me but who am I to say that when people are doing just fine with it. Or perhaps it’s the “peer pressure” getting to me and that people don’t actually find the experience that enjoyable but I wouldn’t know and frankly, I’m just fine without Notion.

Exploring this opinion really made me reflect on myself both personally and academically: am I too comfortable with what’s already in the “market” and am I lacking opinions in the way I see popular designs and tools? Perhaps that’s what I should learn: to have a stronger opinion, and believe that things could always be better even if they’re widely accepted, just like the unreasonable doors.

Overall, I find the text very interesting, and very closely tied to our previous reading on what’s interactive. Both made me realize the importance of “experience” and that a good design should be enjoyable. Looking back, many of the products mentioned in the text have given me a difficult time yet I never really thought about the way it could be better and in fact, what factor is lacking. I really enjoy the idea of signifiers and affordance in the way that it ties to the human mind’s “modelling”. For instance, when he mentioned the sliding doors and how the door handle in fact gave a signal of push or pull but instead worked as a slide. This made me think of how it could’ve been better so the signifier is natural and leads to discovering the affordance, and I thought perhaps it should’ve made a vertical dent where people can place their fingers to grasp and slide the door, which was a thought that surprised me and made me feel good. 🙂

Creative Reading Response:

I began the reading assuming I knew how to ‘define’ interactivity, however, as the author started giving counter examples of what’s not interactive, like the fridge and the books, I began to reflect on whether I really ‘know’ how to define interactivity or do I just recognize interactivity, because knowing is very different from recognizing; the former is active and genuine understanding and the latter is passive and intuitive/ shallow understanding. Throughout the text, I was just in this cycle between contemplation and realization.

On one hand, I strongly resonated with Crawford’s metaphor of interactivity as a ‘conversation’ between the user and computer, because indeed, that’s the traits I find in successful interactive art works; the art ‘speaks’ to you, ‘listens’ to your reaction, process them and then in response, speak to you again. However, on the other hand, when he began talking about user-interface designers and graphic designers, I grew confused and began to question what he meant by integrating “form with function”. I thought of it in 2 ways: first, the shallow way, in which by function he means literal computer function where the “thinking” is supposed to happen, like in AI; second, perhaps he means every ‘form’/ ‘visual design’ is supposed to be functional in a way that contributes to the interaction. Both ways of thinking feel a bit weird, in the sense that I don’t know if artworks should ‘think’, but perhaps he wasn’t talking about art works, and I just automatically assumed so because of my experiences with art works. It would make a lot more sense if he addressed, perhaps designers, than artists, but again, artists can be designers. Overall, I think I learned a lot in terms of expanding my view on the topic of interactivity and what it really means to make my works interactive, whether as a designer or an artist.

Concept:

When I first thought of art works based on class and object oriented programming, I thought of algorithmic drawings of trees, which I found very interesting and pretty, thus, I decided to base my work on nature, and specifically trees. I made the work to be interactive where the user can “build” a forest with trees of varied heights depending on where they press their mouse and also random colors of green so the forest doesn’t look like one whole block of green, and has more depth and layers. 

Highlight of codes I’m proud of:

I’m really proud of the tree class, especially the specific values of the circles, where each shifts a little based on the trunk’s center. I’m also very happy about the height manipulation where mouseY is used to determine the height of the tree!

class Tree{

  /* using the same x, and different y for the trunk 
  and the size for the tree bush and colors so i can change colors */
  constructor(x, startY, endY, size, colors){
    this.x = x;
    this.startY = startY;
    this.endY = endY;
    this.size = size;
    this.colors = colors; 
  }
  /* using the variables and slight value changes to 
  draw the trunk and circles */
  show(){
    strokeWeight(40);
    stroke('#804242');
  line(this.x,this.startY,this.x,this.endY);
    noStroke();
    fill(this.colors);
    circle(this.x+30,this.endY, this.size);
    circle(this.x+30, this.endY+50, this.size);
    circle(this.x-30, this.endY+50, this.size);
    circle(this.x-20, this.endY-10, this.size);
  }
  
}

Embedded sketch

How Was This Made

I first gained my momentum by laying out the bush class because it was relatively easier in shapes and positioning. I first created the class and all the parameters that’s needed and then tested out the show() method by giving them values on the sketch page and after tweaking the coordinates and it all, I translated the value relationship (the coordinates between each shape) back into variables in the class. 

With that experience, I did the same with the trees class where I laid out possible parameters first and then tested them out in the sketch and refined them after testing. For instance, during the testing, I realized that there wasn’t a need to include an endX parameter because the x coordinate for the tree doesn’t move; the trunk’s x coordinate stays the same and the leaf clusters are based on the trunk’s coordinates. Therefore, I removed that parameter and updated the class. Then I started working on the responsive height feature where when the user presses on the screen, the coordinate of the mouse will be used as the height for the tree. To implement this, I relied on the p5js reference library to check on the mousePressed() function. After I placed in all the values, I tried to run it but ran into some confusing problems, which turns out is because of the parameter editing I did previously; I forgot there were only 4 parameters and I entered 5, which then caused the following error where leafs got way too big:

Entered mouseX as a parameter twice because I forgot I removed the “endX” from parameter, therefore mouseX got entered as the “size” value. 

After fixing that I was pretty done with the technical aspects, but as I furthered my “experiment”, I realized that as the user grow more and more trees, the trees start blending into one another because of the lack of borders and same colors. To solve that I tried adding back the strokes, but they didn’t look good, so instead I decided to give the trees random colors by using an array.

Before: Trees blended with each other because too many overlapping of same color

After:

Lastly, I instantiated the bush class and switched the order of drawing so that the bushes are drawn after the trees and stays on top of them. 

Reflection for future work/ improvements: 

I hope to learn more complex features that allow me to expand the forest and allow me to play with more “details”. Also, I should keep track of the classes and their parameters so I don’t make the same mistakes when the parameters increase.

Concept:

When I began brainstorming for the assignment, I first thought of words like “life”, “loop”, and “infinity”. So I really wanted to do something that represents the repetition of daily life in the short run but also the uniqueness in our path in the long run.

To me, some days just seem like a loop that passes by in the blink of an eye, leaving me with nothing. However, that’s not true and I’m just too accustomed to life in the short run. As I grew, I realized that many of the valuable things I acquired in this stage of my life are due to those “looping” days I found meaningless before, thus I wanted to create an artwork that would display different “courses of life”, where each shape represents someone. I also incorporated many elements of randomness to reflect on what I believe to be life—unknown starting line, unknown direction, and unknown endings.

Highlight of code I’m proud of:

I’m particularly proud of this section where I struggled a lot before finally figuring out. After I figured out this part, all the rest were downhill.

//rectangle
  for(let rep = 0; rep < 2; rep+=1){
    fill('#2fb63f')
    noStroke();
    rect(x1,y1,random(1,50), random(1,50));
    x1+=random(1,10);
    y1+=random(1,10);
}

The reason I struggled so much at first is because I couldn’t wrap my head around the fact that draw() function is in of itself a loop, which is why my for loop never “ended”, when, in fact, it did, but the draw function just kept on calling it, creating “nonstop” loops. After I realized what was happening, I stopped being stubborn and played along: using the for loop as a manipulation for how many shapes I want to draw per call, indirectly manipulating the speed for each shape’s path, which again plays into the idea of “life”.

Embedded sketch

 

How Was This Made:

I started the work by brainstorming a general idea I wanted my artwork to convey, which was a display of different “life” paths in this case. After I settled the shapes and concepts, I began experimenting with the loops and values.

At first, I wasn’t aware of the role that the draw() function played in “continuing” the loops I wrote and kept on triggering infinite loops. However, as I proceeded with my experiments—trying all the ways that “might” work–I finally realized there wasn’t something I could change like in other computer programs I’ve done before, because it was just how draw() worked. Then I began to think how I could put for/while loops in this “loop”, and ended up observing the shapes in different frame rates to see when my loop “stops”, which led me to realize that the condition I put in for loops determines how many shapes are drawn in each frame.

I then decided I could use the for loop as a way of manipulating the speed and direction of each shape’s path and let draw to continue the looping of the for loop.

I also heavily relied on the p5js reference library during the process.

Reflection and future improvements:

I wish I could rest better before engaging in experiments and work because I think a big part of my struggle in this assignment stemmed from mental fatigue which made me unable to think clearly.

 

Creative Reading Response:

Two things I found really interesting in this video were the different inspirations that led to many of the art works, as well as the part in 29:40 where Casey Rea talks about how he would “coax” the program of randomness to display effects he liked. Both cases expanded my perspective on both the concept of randomness and “art” in general. An example of the first case was when Casey mentioned how one of his works was inspired by cell communication, which was really fascinating to me in the sense that I never knew “communications” can manifest as visual trails, let alone as colors and artworks. This made me reflect on my perception of the world and how shallow I am in my knowledge of art. Then Casey Rea displayed another work of his towards the end of the video and mentioned how he’d slightly manipulate the code so that the randomness remains but also displays different effects he wanted. This made me question what true randomness is. Conventional definition of randomness is something unexpected, uncontrolled, and obeying “chance”, however in this case, Casey Rea is saying he can “control” and “expect” the outcomes while allowing the smaller component of the work maintain “randomness”. Is the mix of randomness in micro level and control on the macro level really considered randomness? Or is randomness always entirely “independent”? Or are we still able to call an art work a work of “chance” if it’s a mix of both? I think I will be holding these questions while I continue to explore art.

Concept

For this assignment, I chose to draw my favorite cartoon character “Luo xiaohei”, a black cat, as my spiritual character. At first, I was quite indecisive on which character best represents me as a self-portrait, but as I tried to look around, I just saw my xiaohei keychain and found myself thinking of how relatable (and adorable) he is. To fully utilize the skills acquired during class, and even further challenge myself, I decided to draw him being annoyed, where he would frown and his eyelids become slanted, forcing me to experiment/practice more with the arc function.

Some code that I’m really proud: 

The front legs where I did multiple experiments with the arc diameter, width, and height!

//legs
  arc(225, 353, 90, 170, PI, PI+QUARTER_PI);
  arc(210,350,90,170,PI+HALF_PI+QUARTER_PI,0);
  arc(183,356,64,160,PI+HALF_PI+QUARTER_PI,0);
  arc(251.5,353, 64, 163, PI, PI+QUARTER_PI);

As well as the ears, where I kept on experimenting with layers and arc values (as you can see the complex PI values, the QUARTER_PI/8, and the green part last)

//ears
 arc(270,175,90,130,PI+HALF_PI+QUARTER_PI/8, 0);
 arc(279,141,50,60,PI,PI+HALF_PI);
 arc(160,147,130,60,PI+HALF_PI,0);
 fill('#c1f0b7')
 arc(165,187,49,140, PI, PI+HALF_PI);

Embedded Sketch

How this was made

I started the assignment by drawing the sky and grass. Because Xiaohei is a young cat, he’s pretty small, so I made the grass section bigger than the sky to create this lower vision point. Originally, I started drawing the head first like how I’d usually do, but then realized drawing the head first makes drawing the torso difficult because I used arcs for the torso and it’d create a “hill” on top of the head, so I switched order and made the torso drawn first and then other body parts, so the torso could be “covered” and things would look more natural. After I was done with the body, I began to do the tail, where I gradually practiced my arc functions.

I drew the tail in 3 sections: one half oval for the tail connected to the body; one half circle as the tail turn; one half oval for tail end.

Then I began drawing the eyes and ears. With the eyes, I first drew 2 slanted lines for the “frown” and then experimented with the pupil and “white” part of the eyes in the way they are tilted. After I’m done figuring out the tiltness, I switched the order of the line and the eye part to make things more natural. Same applied to the ears: I kept experimenting with the width, height, and arc angles.

I referenced this picture “Xiaohei“ and also sought help from the p5js reference library “reference library”

Reflection and future improvements

I think one thing I could do better in the future is perhaps draft out the parts of the drawing and dissect the parts into orders of layers (which gets to drawn first and which last), so I can make the process a bit smoother, in the sense that I wouldn’t need to spend the time on that but rather on the finer details like the angle of the eyes and ears.