Author: Fasya Rahmadhani

Concept

The inspiration started with the for loop lesson where we made a pattern in grid format, and in class I made a repeating pattern of an orange laid out in rows and columns. As opposed to the black and white designs from computer art magazines provided for reference, I wanted to do something more colorful and fun. Brainstorming from the ‘orange’ idea, I thought of a picnic setting! So I went onto Pinterest and looked it up for inspiration. Then I found this:

In my head, it was possible to recreate the iconic red pattern look of the picnic blanket using the for loop we learnt in class, so that’s exactly what I did. Red blocks displayed in a grid format using for loops, with lighter red blocks on the right and bottom of the red blocks to give the effect of overlapping strips of red fabric.

Highlight

For the cake, I’ve always wanted to learn how to rotate shapes on p5js so I challenged myself into making the cake with strawberry toppings which are repeated ellipses in a for loop that increase in angle of rotation each iteration. And I also got to use the translate function in the process!

I learnt how to rotate from here!

 // strawberry toppings

angleMode(DEGREES);
translate(200, 200);
noStroke();
fill("rgb(238,96,67)");
for (angle = 0; angle <= 360; angle += 45) {
rotate(angle);
ellipse(0, 40, 20, 25);
}

Sketch

Psst! Try hovering over the bottom right of the cake 😉

Link to the “Want a Slice?” p5js code.

Reflection

I really enjoyed making this piece because I learnt so many new functions, like the translate and the angleMode function, as well as applying what we learnt in class (for loops, if statements, movement of shapes).

In the future, I would love to learn how to make it less glitchy (like the strawberry here looks as if it isn’t moving in sync with the slice of cake in the back), and also maybe challenge myself into making my own version of the designs from the old computer art magazines instead of sticking to manually building images using colorful shapes!

The video opened my eyes to the possibility of making art with the random function. I’ve used the random function before in my code for my computer science class in high school, like to generate a random number for a user to guess; but I never thought of it to be used in code to make art. After watching Casey Reas’ video, I was reminded of a TikTok video of someone using code to make an image from a single branch and over time branches off into a tree. I didn’t think much of it at the time, but now that I know what ‘randomness’ can do, I think a random function was used in the making of that tree. If I could find that video again, I’ll definitely take a closer look and see how randomness was used in the making of that art piece.

What interested me the most is how you can combined technology and non-technological ideas to make art. In the example from the video, it’s biological ideas. From an interpretation of nervous systems to computing art; this pipeline is one that I have not seen before and definitely not one I’ve thought of. So it’s something I want to explore myself. Maybe not with nervous systems, but what came to mind is how massive objects have a higher gravitational force compared to less massive objects (think sun vs planets) and it would be interesting to make code and make art using this idea.

Concept

I love cats. I don’t have one but I would love to have one in the future. One of my favorite type of cats are orange cats; they’re silly and funny to me. Hence, I decided to create a silly orange cat with their tongue out making a silly face. The cat is also seen to be waving their paw as if to say hello!

Process

I started making the head using a circle and planned on using triangles for the ears, but soon found it difficult to make it look neat so I opted for a long rectangle pointing from one side of the circle to the other to act as ears. This way the ears are more symmetrical.

Highlight

I particularly liked how I made the mouth section where I used different sizes and orientations of ellipses and combining them with layering in mind to form the shape of the cat’s snout.

// mouth
fill('rgb(255,114,38)')
ellipse(200, 270, 15, 30)
fill('rgb(255,182,49)')
ellipse(190, 250, 35, 30)
ellipse(210, 250, 35, 30)
fill('#FF9700')
ellipse(200, 240, 20, 15)

Sketch

function setup() {
  createCanvas(400, 400);
}

function draw() {
  
  background('rgb(178,223,250)');
  
  // body
  fill('orange')
  rect(90, 260, 220, 400, 100)
  fill('rgb(255,182,49)')
  rect(115, 290, 170, 400, 100)
  fill('rgb(255,151,0)')
  
  // arm
  rect(115, 310, 50, 400, 100)
  fill('#FF9700')
  circle(140, 340, 55)
  fill('rgb(255,182,49)')
  circle(140, 340, 35)
  stroke('orange')
  circle(125, 339, 15)
  circle(133, 327, 15)
  circle(147, 327, 15)
  circle(155, 340, 15)
  
  // head
  noStroke()
  fill('orange')
  ellipse(200, 220, 200, 180)
  rect(100, 140, 200, 80)
  
  // streaks
  fill('#FF9700')
  rect(192.5, 130, 15, 50, 10)
  rect(170, 132, 15, 40, 10)
  rect(215, 132, 15, 40, 10)
  
  // ears
  fill('rgb(255,182,49)')
  ellipse(115, 170, 15, 50)
  ellipse(285, 170, 15, 50)
  
  // eyes
  fill('black')
  circle(155, 220, 25)
  circle(245, 220, 25)
  
  fill('white')
  circle(160, 215, 10)
  circle(250, 215, 10)
  
  // blush
  fill('rgb(255,116,44)')
  ellipse(125, 250, 50, 20)
  ellipse(275, 250, 50, 20)  
  
  // mouth
  fill('rgb(255,114,38)')
  ellipse(200, 270, 15, 30)
  fill('rgb(255,182,49)')
  ellipse(190, 250, 35, 30)
  ellipse(210, 250, 35, 30)
  fill('#FF9700')
  ellipse(200, 240, 20, 15)
  
}

Reflection

Though I did use a variety of shapes, my sketch is still very simple. So in the future, I’d like to incorporate more shapes and learn how to animate them as well to make it more interactive and lively; like maybe make the cat’s paw move!