Concept

It’s really hot outside, and I can’t help but think about relaxing in a pool, resting on a floatie with a popsicle in my hand. That, and my love for ducks, inspired the rubber ducky floaties popping around, with the background color representing a swimming pool.

Highlighted code

// beak
fill(255, 115, 25);
triangle((this.x - 195), (this.y - 140), (this.x - 130), (this.y - 180), (this.x - 105), (this.y - 140));
triangle((this.x - 195), (this.y - 140), (this.x - 130), (this.y - 125), (this.x - 105), (this.y - 140));

While the shape of the duck looks simple, there are actually a lot of different shapes that make up the object. When it comes to creating a shape that moves, it becomes difficult to make sure all the shapes have the correct coordinates so that they look like they are “stuck” together instead of floating around, because then it would no longer look like a duck. That is why I am most proud of this part of the code. It required a lot of time to figure out what to add or subtract from the x and y variables in order to keep the whole object together as it moves.

 

How this was made

I used what we learnt in class and the p5.js reference to create this project. I first started off with creating shape of the rubber duck floatie and then proceeded to add the shadows to add some more depth to it. I also made sure to picks specific colors to add another layer of realism, that background color was picked to simulate a pool and I used this color guide to pick it.

Reflection

I am happy with what I was able to achieve. However, in the future I would like to learn how to create an actual hole in the shape rather than filling it in with the background color, so I can create a more realistic floatie.

However, I faced a small step back when I realized that the floatie was too big and one floatie took up the whole canvas. Instead of going back and trying to scale down every coordinate manually, I used the reference to learn how to use the scale()function. It was a bit challenging to understand at first, but once I experimented with different values and learned how to stop the function from repeating with the use of the resestMatrix() function, I was able to scale the floatie down only once.

 

 

Reading Reflection

I found it very interesting when Crawford talked about how in a conversation you need to apply all three steps (listening, thinking, and speaking) in order to have a successful interaction. What stood out to me was the idea that if one of these is missing, doing well in the other two does not really make up for it. As Crawford explains it “is like a weak link in a chain. The chain breaks regardless of the strength of the rest of the links.” I liked this comparison because it makes the idea very simple and easy to understand.

I also really liked the way he describes the difference between interaction and reaction. He uses the idioms “apples and oranges, horses of different colors, tigers of different stripes,” which I thought was a very interesting and memorable way of showing that the two are completely different things.

Concept

I was inspired by the scratch pads that I loved drawing on as a child, the hidden gradient background is what influences the use of changing flashing colors. I also wanted to bring elements of childhood by using simple shapes such as stars and circles.

Reference

Highlighted code

//changing colors
background(paletteLerp([
  ['blue', 0.3],
  ['red', 0.6],
  ['yellow', 0.4]
], millis() / 1000 % 1));

I was determined to use the changing colors effect rather than a still color gradient, therefore I used the p5.js reference to learn how to use the paletteLerp() function to rapidly change colors. It was quite difficult to use at first however with lots of trial and error I eventually achieved the result I wanted.

 

How this was made

Starting off with the main element, the stars, I was able to use the for() loop tool successfully to join the circles in a certain way to create the stars pattern. I then moved on to learning how to use the paletteLerp() function to change the color of my background; I was also able to pick the duration of each color and the speed. For the finishing touch, I wanted to further challenge myself by adding smaller circles by combining the nested loop and click feature, this way I was able to add another layer of interactivity to my work. I referred to the p5.js reference to learn how to create the star shape and use the click response.

Reflection

Overall, I am proud of what I have achieved. I was able to play around with the nested loop to create shapes within shapes. In the future, I would like to also experiment with randomness, and how randomness can be used to create slight deviations which gives some sort of a shaking effect.

 

 

Reading Reflection

text

Concept

This is my first IM class and my first time working with JavaScript and therefore this assignment took longer than expected. My aim was to create a self portrait of myself wearing my favourite light blue colored abaya and included elements like my glasses to make the character more realistic. I also wanted to include an interactive elements, which is why I added my glasses that appear when the mouse is clicked.

Highlighted code

strokeWeight(2)
stroke('#d17a7a')
fill('#ffb3be')
arc(280,428,40,25,PI,PI-PI);
arc(320,428,40,25,PI,PI-PI);
arc(300,428,80,35,PI+PI,PI)
line(260,429,340,429);

I am most proud of the mouth. Though it looks simple, it took me a while to try and figure out the coordinates, and it took especially longer trying to figure out the correct arc angle. I am proud of the outcome and I think I did a great job without relying on AI and by using the resources provided.

 

How this was made

I used the skills we learnt in class and the p5.js reference to help me create my self portrait. The main shapes where ellipse, used for the eyes, glasses, and hijab, and the arc, used for the nose and lips. I also experimented with adding an interactive elements using the if() tool. I added my glasses, which appear when the mouse is clicked, and I implemented what we learnt in class about colors and transparency to bring the glasses to life.

Reflection

Although it looks like a human, I don’t think it looks like me. If I had to do this again I would have a reference photo of myself to refer to as I was working instead of freestyling it. In the future, I would also like to add more details, like drawing the eyebrows arc and more realistic pupils. I would also love to experiment with interactive elements, like changing backgrounds or moving elements.