Author: Adilbek Tursynbek

Concept
This work is inspired by how nature shows similar patterns at both tiny and huge scales. Think about how electrons circle around an atom’s nucleus, and how planets orbit stars or how galaxies spin. Even though these things are super different in size and controlled by different forces, they look kind of similar, “stuff moving around a center point”. It’s like nature has a favorite design that it uses over and over.

In this art work I tried to show this idea with a cool, spinning spherical shape that changes colors (It also reminded me of Tony Stark creating a new element). It is meant to make you think of both the super small world of atoms and the massive universe at the same time. The changing colors are supposed to represent the constant energy and movement in both atomic and space masses.

Code snippet
Here’s a bit of code I’m pretty happy with. It’s what creates the spherical shape using nested loops and some tricky math from geometry books:

for (let theta = 0; theta < 180; theta += 2) {
  for (let phy = 0; phy < 360; phy += 2) {
    let x = radius * (1 + settings[0] * sin(settings[1] * theta) * sin(settings[2] * phy)) * sin(1 * theta) * cos(phy);
    let y = radius * (1 + settings[0] * sin(settings[1] * theta) * sin(settings[2] * phy)) * sin(1 * theta) * sin(phy);
    let z = radius * (1 + settings[0] * sin(settings[1] * theta) * sin(settings[2] * phy)) * cos(1 * theta);
    
    stroke((hueShift + theta + phy) % 360, 80, 88);
    vertex(x, y, z);
  }
}

This code makes points on a sphere, but with some extra wiggles to create cool patterns. The ⁠ settings ⁠ array helps easily change how complex the shape is. The colors change based on where each point is and a shifting overall color, which makes it look vibrant and always changing.

Sketch

Reflection and ideas for future improvements
Working on this sketched helped to better understand 3D graphics and using math to create complex shapes. The hardest part was getting all the numbers just right to make it look good and match my idea.

For making it better next time, I have some ideas:

1.⁠ ⁠Let users change the ⁠ settings ⁠ array and add more interactive while it’s running to see how it changes the shape.
2. ⁠Put in some sliders or buttons to change colors, how fast it spins, and other stuff.
3.⁠ ⁠Try making multiple shapes that connect to each other, like a bunch of molecules or solar systems.

These changes would make it more fun to play with and give a better picture of how small and big things in nature can look similar.

Concept
For this project, I decided to create a more abstract, cartoonish self-portrait. The simplified shapes give the drawing a cute and playful look, which fits well with the style I am aiming for. The strawberry-shaped hat I featured in the portrait is an item I gave to my little sister for her birthday, which adds a personal touch to the project. (She made me wear this hat for days) The background is inspired by Astana, which has the most beautiful sky I’ve seen, which makes this project even more meaningful to me.

Code snippet
A piece of code that I’m particularly proud of is the implementation of eye blinking on the character. The eyes alternately open and close, creating a simple but effective animation. Here’s the relevant code snippet:

if (millis() - lastBlink > interval) {
  push()
  fill(0);
  stroke(0);
  strokeWeight(3);
  line(295, 400, 335, 400);
  line(355, 400, 405, 400);
  pop()

  if(millis() - lastBlink > interval + blinkDuration) {
    lastBlink = millis();
  }
  
} else {
    fill(0);
    circle(315, 400, 25)
    circle(385, 400, 25)
}

This block of code is responsible for the blinking logic, checking the elapsed time and switching between drawing closed eyes (lines) and open eyes (circles).

Sketch

Reflection and ideas for future improvements
Creating this project helped me get more familiar with p5.js, especially in terms of working with different forms and layers. The biggest challenge was figuring out how to draw curves correctly and how to handle time intervals in p5js. However, this project gave me the confidence to experiment further with p5.js and possibly add more complex animations or interactive elements in the future.

In the future I would like to add interactivity to the sketch, such as making the eyes follow the cursor, or adding background changes depending on the time of day. I also plan to refine the background, adding more details that more accurately convey the atmosphere of Astana.