Author: Akhat Suleimenov

I am 22 years old. Alumni of 42 Software Engineering School in Silicon Valley. Born and raised in Astana, Kazakhstan. As hobbies, I workout, travel, and play volleyball, and chess.

Assignment 2: Colorful Illusion

This week I used for loops to create a popular illusion. Looking at the sketch you can see that some of the white circles start seeming as if they are black while all of them are white. This is a common illustration of optical illusion called lateral inhibition. Since the whole illusion can be done in the setup function, I wanted to add some complexity. When clicking on the screen, the circles randomly change their color. A bit of a playful element I guess.

The code that I’m proud of is the way I connected all the variables to the offset variable. By changing offset you can get either more of smaller circles with similar size of lines or less of bigger circles with bigger lines. Also, the user can change the window size and the sketch will still make perfect sense.

I’m proud of the fact that creating the illusion only took me 2 loops with singles lines.In the future,  I would like to make the interaction less random. As in making the circles change color one by one in a timely manner. Also, include the user interaction with keys and mouse movements.

Assignment 1: Self Portrait

I learned the basic concepts of p5.js, such as circles, ellipses, and colors, through online tutorials, practice coding, and experimentation. I started out by learning how to create basic shapes using the ellipse and circle functions and then moved on to manipulating more complex shapes such as hair and eyes. I then experimented with different colors to create a more life–like image. After mastering the basics, I began to understand how to use conditionals to create an animation. I then began to experiment with different speeds and directions to create a more dynamic animation. With each new concept I learned, I was able to create a more realistic self–portrait that accurately captures my personality.

This p5.js code is a moving self–portrait of me. It is a creative piece of code that uses mathematical concepts such as conditionals, variables, and geometry to create an animation. The code is comprised of a setup and draw function and uses variables for the coordinates, directions, and speed of the animation. The setup function creates a canvas of 400x400 pixels and sets the starting positions and speeds of the animation. The draw function uses the variables to draw the self-portrait, which consists of a head with eyes, hair, a nose, and a tongue. The head will move from side to side and bounce up and down when it hits the boundaries. This code captures my playful and creative spirit, as it animates me in a unique and amusing way.

The part of the code that I am most proud of is the part of moving and boundary detection. I was able to connect all pieces of the face into one variable so that all of them move simultaneously. Also, the ternary operator is my way of showing my CS skills(jk).

Reflecting on this project, I am proud of my progress and the creative outcome of the code. I am now confident in my ability to use the fundamental concepts of p5.js to create engaging visuals. However, I am also aware that there is still room for improvement and further exploration. I plan to add user interaction to the animation, for example, allowing users to move the portrait with their mouse. Additionally, I would like to incorporate video sensors to create a more life–like animation. This could be achieved by tracking a user’s facial movements and incorporating them into the animation. As I continue to explore the limitless possibilities of p5.js, I look forward to creating increasingly complex animations and engaging interactive experiences.