Intro
In our first lecture we learned about P5.JS which is a web editor and works similarly to Processing. Compared to Processing though it is based on JavaScripted, which is a new programming language, but is quite similar to Python, which I learned in my Fall semester. In the class we focused mostly on creating shapes as well as animating them, which is quite interesting and can be quite entertaining as well.
Static Shape
My first creation was to build a static shape. Since I just came back from Christmas, which is also my favourite holiday I decided to build a Christmas, which also involves numerous shapes and thus makes a good practice for P5.JS, which I used for my first time. Of course such a shape as you will see below involves good coordination of the shapes, since the tree part need to be connected with the base and the small sphere on the top. I also drew four moons on the edges of the canvas for extra practice and to also give the drawing a more artistic look (I’m really bad at drawing so it’s something!). In order to solve the issue with connecting the shapes or which points to use before drawing any shape, I used the mouseClicked function, so I could see the coordinates of the point in the Canvas I wanted to draw and thus adjust them to the shapes accordingly. This way I managed to create a green triangle (the tree!), a sphere thats connected to the top of the triangle and the base of the the tree (a brown rectangle!). On the other hand, the four arcs (the four “moons”!) on the corner of the canvas were a little more complicated since they required a bit of trigonometry, since I wanted them to look like a fourth of circle in order to fit nicely in the corner of the canvas. Furthermore, despite the fact that they all covered 90 degrees, I had to use different angles in order to adjust them accordingly to each of the four corners of the canvas. Below you can see my creation. Merry Christmas (Despite being a little late)!
Kinetic Shape
After we finished practicing with static shapes, our second part of our assignment was to practice working with animated and moving shapes. My initial thought was decide to build a bouncing ball that moves and bounces around the edges of the canvas. In order to this successfully the code would have to check whether the x-coordinate or the y-coordinate were outside of the canvases’ boundary and if yes, the certain coordinate would be multiplied by minus one, in order to have this bouncing effect. I decided that the speed for each projectile would be random each time the program was executed. Furthermore, my initial shape was a simple circle or a ball, that has multiple changing colours in order to look more cool.
After I finished working with the first ball I decided that I should add more circles. Unfortunately, I do not know how to use the for function yet in JavaScript, so I decided to use a more unorthodox way, which was to randomly put other circles next to the initial location of the first ball. I failed badly, because the x,y coordinates of the new spheres seemed to depended on the initial ball and for that reason they spheres were reappearing randomly (in a radius of 30 pixels) around the initial ball. After adding more and more balls I surprisingly noticed that the ball would look like an atom, which was a quite interesting and nice shape and therefore I decided to add even more surrounding circles to make it look even nicer. Therefore, the main ball can be perceived as the nucleus of an atom and the surrounding fast rotating circles can be perceived as the electrons of the atom, that rotate around different directions. This way, I luckily created a really interesting atomic effect as well as a “bounce” effect every time the atom would hit the canvases’ boundaries.
Conclusion
In conclusion, I believe I learned really interesting things in our first class, as well as coding for my first time in a web editor. Furthermore, I believe that I will be able to create even more interesting creations in the future when I will be able to get deeper into P5.JS and JavaScript.
Thank you for reading my blog,
Christos
It might be interesting to try playing with the number of circles that appear around the nucleus as a variable. What happens when there are no circles, 5, 10, 100? Great work!