For this assignment, I wanted to push myself out of my comfort zone and create something a bit more complex than what I typically make. By using a combination of arrays and object oriented programming, I was able to create an art piece that combines animation and user interaction to create a piece of art. My main concept came about when I was looking for inspiration on the internet. I knew I wanted to do something ‘nature’ related as it is something I love. When I came across the user Drea007’s work of a 2D solar system (see reference link at the end of the sketch), I knew what trajectory my sketch was going to head to.
The image above was directly taken from Drea007’s sketch, which has been linked at the end of this post.
The main concept of the sketch was space, specifically the solar system. I wanted to emulate the ways in which the solar system worked but put a twist on it. Instead of the planets moving around the sun, as seen in Drea007’s work, I made them move around on their own in an unorganized way. Thus, I call this piece, ‘Cosmic Chaos’, due to the fact that the planets are moving around chaotically and in a non-synchronous manner.
The process of creating this sketch involved a lot of practicing the material, especially object oriented programming. Through practicing, I was able to better understand how object oriented programming works within a sketch. I will also say that I learned a lot about movement with this assignment, particularly mouse or pointer movements. What I mean by this is that I have learned how to integrate user interaction into my sketches in a different way than I am used to. Through utilizing the command, ‘mousePressed’, I was able to allow users to directly engage with the objects within the sketch. By employing this command, I was able to essentially manipulate the objects in the sketch to follow the movements of the mouse cursor. To do this though, I needed to understand how to integrate mathematical principles within my code and utilize them to my advantage. The ones I learned how to incorporate were ‘atan2’ and ‘sin’ and ‘cosine’. Understanding these mathematical concepts in the context of p5js, I was able to conceptualize and compute angles in my sketch, enhancing the responsiveness and flow of user interaction within my sketch. Due to this new found skill, this is the part of my code that I am most proud of.
You can see the code here:
function mousePressed() {
// When mouse is pressed, make planets move towards mouse position
for (let i = 0; i < planets.length; i++) {
let dx = mouseX - planets[i].x;
let dy = mouseY - planets[i].y;
let angle = atan2(dy, dx);
planets[i].xspeed = cos(angle) * 20;
planets[i].yspeed = sin(angle) * 20;
}
}
My final sketch:
In terms of difficulties, I was having a lot of trouble with navigating how to begin the sketch as a whole. I had an idea of what I wanted to do but never knew how to execute it. I was having trouble wrapping my head around using the different classes and functions at the beginning but started to get a hang of it when I practiced. It was only when this happened that I felt like my creativity was able to flow. Therefore, in a sense, this assignment forced me to explore animation styles and effects on a deeper level as I wanted to incorporate elements that I do not know much about. Although I keep saying this, I think by actually exploring different elements of p5js with this assignment, I was able to feel more comfortable doing more complex things with code, something I was hesitant with doing. I was able to add a combination of complex shapes, features, styles, and user interaction, creating something that is interactive yet complex at the same time. This really helped me overcome my misconception that a sketch can simultaneously be both complex and interactive for users. I really enjoyed this process and am really happy that I pushed myself out of my comfort zone by creating something complex yet interactive.
References:
https://editor.p5js.org/Drea007/sketches/5-vqHY3Te