Reading Reflection – Week#2

Casey Reas’ Eyeo talk on chance operations highlights two important themes- chaos and order. He uses a mix of both chaos and order in many of his projects. It is very interesting when he uses chaos and order to visualize aspects of reality, such as biological data, specifically proteins communicating with a cancer cell through signals. A point I captured in this video is that adding a slight bit of noise keeps it more homeostatic and away from order – I understand it as a way to create a sense of randomness, or more objectively, pseudo-randomness. Tuning a group of objects with the same rules creates “behavior”  for that group. I am surprised to see how incorporating pseudorandomness into multiple groups with different behavioral rules adds a layer of complexity. I was struck at the consideration of observing the visualizations of the paths these objects take, rather than the placement of each object at a given moment; not only does this suggests I should consider art visualizations from multiple perspectives (not just position in multiple timeframes but velocity over time) but also acts as inspiration for a potential future project.

Casey Reas mentions that we can actually control how much we want to tailor or customize and leave to chance. This means we can decide the balance between total randomness and complete control, by setting quantitative figures on scalar, angle or colour randomness. As I considered where I feel is the optimum balance between total randomness and complete control, I was left with a question instead: is there an optimum balance between the two? I personally felt there is no wrong balance as long as tuning the two allows the artist to obtain the objective of the artwork.

I would like to incorporate randomness in my work specifically through incorporating randomness in the scaling of spirals, as well as amount of tilt. Beyond the visual arts, this video did raise a surprising idea of experimental music by random chance operations, such as in duration or pitch, which could be a great idea to try out in the future.

Assignment 1 – Self-Portrait

1. Concept

I started by brainstorming ideas about some things I like to give my self-portrait some fun personality. I thought about netball, but wasn’t sure about the other things to add yet.

Then I tried making a sketch on my tablet to plan out what I wanted my piece to look like. I understood that the planning process is really important because it will save time in the long run as I have a direction to stick to. A big consideration as I decided how to draw the different objects in the sketch was the types of shapes or lines I could use in p5 js. Starting with my face, I drew a circle for the head, arcs for my hair outline, arcs for both outlines of my eyes, circles for my eyes, as well as arcs for my eyebrows, nose and lips. I liked my red sweater, which had a high neckline, so I added a line around my neck.

I tried thinking more about what I like, and with the help of online sources, I realized pets and travelling are two of them! I like dogs, so I wanted to draw a simple dog. I could use ellipses for the eyes and ears, triangle for the nose, arcs for the mouth. I would need a large ellipse for the dog’s body, as well as ellipses for the dog’s legs. For the tail, I could make an arc. A good way to show I like travelling is through trains. I like mountains, especially thorugh my experience travelling and hiking in Wales. Specifically, snowy mountains are special for me. At first, the train was a small icon to the right of me, but then with some inspiration from Dev Kalavadiya’s Self Portrait, I realized the mountains could be in the background. So I changed the structure of the work, placing the mountains to the top-left, the netball and pole to the right. I thought it would be cool to have the train be directed toward the mountains.

2. Challenges with Code Highlight

It’s my first week using p5 js and we got practice in-class to make shapes and lines, but I’m unfamiliar with animation. Thus, I expected a challenge with the animating, particularly in the snowfall. But I thought it will be fun to try.

I also realized that my nose is more appropriately drawn with a spline curve rather than arc(s). I faced trouble making the spline curve, however, with it being too small, but was able to resolve it with help of AI.
I realised that if I want my hair to be coloured in, it is simpler to use a shape and fill it in rather than use arcs and fill in what’s inside. I decided to use ellipses and rotate them as needed. However, my attempt didn’t work:
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
// Top right hair outline
angleMode(DEGREES);
let right_hair = ellipse(width / 2 + 40, height/2, 100, 50);
right_hair.rotate(45);
// Top right hair outline angleMode(DEGREES); let right_hair = ellipse(width / 2 + 40, height/2, 100, 50); right_hair.rotate(45);
// Top right hair outline
angleMode(DEGREES);
let right_hair = ellipse(width / 2 + 40, height/2, 100, 50);
right_hair.rotate(45);

Turns out that ellipse() doesn’t return an object I can rotate. Instead, I need to use p5.js transformation functions. It’s important to push() and pop() so that rotations don’t accumulate in case I rotate other shapes:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
// Top right hair
angleMode(DEGREES);
push(); // Save the current transformation state
translate(width / 2 + 40, height / 2); // Move to where we want to rotate around
rotate(38); // Rotate by 38 degrees
fill(55, 22, 13);
noStroke();
ellipse(0, 0, 100, 50); // Draw at (0,0) since we've translated
pop(); // Restore the transformation state
// Top right hair angleMode(DEGREES); push(); // Save the current transformation state translate(width / 2 + 40, height / 2); // Move to where we want to rotate around rotate(38); // Rotate by 38 degrees fill(55, 22, 13); noStroke(); ellipse(0, 0, 100, 50); // Draw at (0,0) since we've translated pop(); // Restore the transformation state
 // Top right hair 
angleMode(DEGREES);
push(); // Save the current transformation state
translate(width / 2 + 40, height / 2); // Move to where we want to rotate around
rotate(38); // Rotate by 38 degrees
fill(55, 22, 13);
noStroke();
ellipse(0, 0, 100, 50); // Draw at (0,0) since we've translated
pop(); // Restore the transformation state

After shifting around my code so that the neck and body comes after the top back hair but before the eyes, I was shocked to find out that the eye outlines somehow disappeared. I tried experimenting with removing and putting back code to find out what the issue was. Since the code for neck was relatively simple, I realized the issue must be with the body. I had an idea to use push() and pop() just like for the hair, and phew, it worked!

To make the mountains, I printed mouseX and mouseY in draw() function, hovered over the points I wanted the vertices of the triangles to be in in order to get the approximate coordinates of the triangle vertices for triangle().

Making the train tracks was especially time-consuming, as I was needed to ensure I drew the horizontal train tracks using quadrilaterals progressively bigger as it goes more downward on the page. I had to consider and ensure the spacing between the train tracks were reasonable, and I used maths calculations to help me with this. Phew, after about 30 minutes working on this, I was done.

Trying to create the netball allowed me to experiment with arcs, getting more familiar with what each parameter is used for.

3. Embedded Sketch

4. Reflection and Ideas for Future Improvement

Due to the time constraint, I decided not to draw the dog; nevertheless, my main goal to draw a self-portrait and things I like are completed. Through this experience, I learned more on layering, p5.js transformation functions, special lines extending beyond the class material, such as spline curves and bezier curves. A challenge I faced personally was being patient especially while drawing the train tracks, so this experience was a valuable opportunity to develop my resilience.
Future ideas for improvement would be adding in the animations, especially snowfall and the train moving, as well as adding interactivity such as buttons for the user to click.