Month: January 2016

Introduction

This blog post will talk about my final project for the class Nature Of Code, called NY Zombies, in which the player has to kill as many zombies as he can, before dying from the zombie massive zombie horde. One of  my initial goals was to adjust many of the game’s components based on live weather data, but I did not really focus on this aspect since creating and perfecting the game itself took me a lot of time, but it was worth it in my opinion.

Creation Process

The programming part of the code was quite complicated since I had to use many different classes in order to make sure that the game works.

The first class I made is the player class, which controlled all the player related functions. The player’s initial position was the centre of the canvas, while for the player’s texture I used  some textures I found online. Next I had to make sure that player would always face the mouse’s position, in order to make sure aiming is correct and that it looks good. For that reason, after your help I managed to rotate the player in a certain angle, which depends on the mouse’s position. Even though I could create player movement in the player class, I actually did it in the draw function, since it is repeatedly called. This away, every time w, a, s ,d or the arrows are pressed the player moves the appropriate way.

The next basic step, was to make the bullet function. Therefore I had to combine it with the mouseReleased function, since the bullet would be fired every time the user clicks the mouse. Furthermore, I created an empty array that would contain each bullet every time its fired. Furthermore, for the bullets I used simple forces that were guides by the mouses and the players location, in order to move from the player towards the intended direction. It is important to notice that I would splice from the bullet array, any projectile that went out of the canvas, in order to make the game easier from the computer to process.

Furthermore, the hardest class of all were the zombies. Initially, I would make sure that the zombies spawn in random locations from the edge of the canvas and also make sure that they constantly move towards the player. In order to accomplish that, I used a similar technique with the bullet, but also by adding another function inside the class I constantly changed their direction of movement towards the player’s current position. Furthermore, by using similar technique with the player’s rotation, I made sure that the zombies would always face the player, giving the game a quite creepy look. It is important to notice that all the zombies that are spawned are added to the z array and furthermore, I made sure their zombie rate would slowly increase, thus making the game progressively harder, by using the random function as you instructed me.

The next part was collision, which surprisingly was quite easy. In order to achieve collision, I circled through the array of the zombies and for each zombie I would circle through all the bullets. This way, if the distance between a bullet and a zombie is less than 20 pixels, the zombie would be spliced from the array and the bullet would be converted to a blood splatter that would permanently stay on the ground in order to give a gorey filling in the game. Furthermore, I also added a splatter sound, every time a zombie was killed.

The next and last part was the interface. Before the game starts, a black screen with the controls is shows along with the soundtrack from the movie “World War Z” and the game would start every time the player presses enter. Similarly, every time a player dies another interface is shown, showing him his score and allowing him to press ENTER again to go back to the main menu and restart the game.

Feature

Despite the fact that the game is complete, I will soon add more features, such as a leaderboards scoreboard as well as create multiple maps and weather conditions depending on the live weather of different places. At the moment the game currently only shows the current temperature of NYC, by using the open weather API.

Conclusion

In conclusion, I would like to say that I loved working with creative coding and it is a field I would really love to work with in the feature.

Thanks for reading,

Christos

 

Introduction

---

 

My eighth blog post will talk about our class concerning vectors and physics as well as our visit to the New York Hall of Science  where we have seen many exhibits including the Connected Worlds Project.

The Bombing Game

---

 

 

My today’s idea for the physics linked project was to make a bomber plane that would drop bombs and the user would have to bomb drop at a red line marked on the map. If he succeeds, the bomb explodes, otherwise the bomb does not go of and the “MISSION FAILURE” message pops in the screen.

Creation

---

 

Despite the fact that the game might seem simple, it actually took me quite a while to make, since I encountered many bugs, which were hard to spot, because of JavaScript’s lack of error messages.

The first think I did after creating my board, was to create a Bomber class. In the class I would make the plane fly from the top right corner towards the top left, while moving relatively slowly, so the user will be able to aim and drop the bomb successfully. I only found a really nice plane PNG and therefore the plane looks quite cool as well.

Next I created a bomb class, which was also the most complicated one. The bomb would get coordinates inside the moving plane, since it has to be dropped from there. Furthermore, with the help of keyPressed class I made sure that this class would be created only if the user pressed CONTROL. Next, by using similar commands of the ones we used in class, I was able to make sure that the bomb would drop quite realistically via the help of an extra force, which is no other than gravity! Thus, the user will have to take this force into account, as well as the fact that the bomber is moving, therefore making the bomb drop quite realistic and resembling real circumstances of objects being dropped from other moving objects.

Furthermore, I also had to create a button variable which helped me trigger the functions inside the bomb class,  since they would be triggered continuously inside the draw function, every time button is “TRUE”. At this point I had also experienced my greatest difficulty in this part. The problem is that every time I called the bomb class for the first time inside the Setup or Draw function the bomb would stay inside the plane and not drop at all. After a couple of hours of struggling, I realised that if I call the function from the KeyPressed function then it would work perfectly. After solving this annoying bug with the help of Lucas (he saved me) I was able to finish the rest of the code.

Next, I used some parameters, so in case the x or y values of the bomb were inside the red line, the bomb would detonate and the user would win. Otherwise, the bomb would not detonate and the “MISSION FAILURE” text will appear, since the user missed hitting the correct bombing location.

I hope you enjoy playing my game and enjoy numerous victories while playing. In the next days I am considering to create a score system for time for every consecutive victories, while the red line would become smaller and smaller and the plane moving faster.

New York Hall of Science

---

---

 

In this part of the blog, I would like to talk about our visit to the NY Hall of Science, which was quite an interesting visit that I really enjoyed. Despite the fact that we’ve seen many amazing mind games in the Hall of Science as well as math and science exhibits, the one that impressed me the most as well as the rest of the class I believe, was the Connected Worlds exhibit, which myself found mind blowing. Despite the interesting concept of having different numerous worlds being dependent on each other what impressed me the most was the technology used. All the Kinects, the monitors and the thermal cameras connected with each other in order to produce a technological masterpiece, where even the logs on the floor could be used to control the water flow coming from the waterfall.

Conclusion

---

 

In conclusion I have to say that it was an interesting class, since we talked about Physics and Vectors, which are really interesting subjects, as well seeing the Connected Worlds project which really amazed me.

Thanks for reading,

Christos

 

 

 

Intro

---

 

This blog post will talk about my experience learning how to use APIs and JSON as well as describe my visit to Rockwell Group, as well as comparing the visit, with the visit to Second Story, which I described in my previous blog post.

Exchange Rates

---

 

Unfortunately, what seems to be a bug either from P5 or from my computer or either an error, made me lose my whole afternoon trying to figure out why. So, every time I would use the println command in P5, in order to print the whole JSON URL, the command line was just saying [Object : Object], which was incredibly annoying, since I could not find out what was going wrong. I even had registered to a website and obtained my API Key.

Initially I though that the problem could be the URL itself, even if the JSON Chrome extension made it appear normally. Next, I used another currency exchange website with the following API: (http://api.fixer.io/latest), in which I had exactly the same issue. Then, I tried trying the weather API we used today in class and gave me exactly the same result. Suddenly, I decided to try the code you uploaded, where you created ellipses, with their size being dependant on London’s humidity. To my surprise it worked, despite the fact that I could not see the JSON commands on the command line of P5 and then I realised that my previous APIs would work as well, so I stuck to the second Currency Exchange API. My next aim, which failed was to make the user type the currency he wants to compare with the Euro and then the screen would show him the exchange rate.

In order to achieve that I wanted to use the createInput DOM, but for some unknown reason the following error was shown: “Uncaught not yet implemented” on Line 7. For that reason I will show you the code tomorrow in class in order to help me figure out what the problem is, since I am really interested in this field of coding.

Rockwell Group Visit

---

 

Today’s visit to Rockwell group was really interesting, since Rockwell seems to be a firm that works in awesome projects as well as quite prestigious ones, since for example they had to design for the Oscar Awards etc. The company other than the architectural part, seemed to be quite Similar to Second story and manage to integrate art and technology in an amazing way.

The main difference I could distinguish between the two firms is that Rockwell seems to be a more “commercial” company that seems to produce projects quite amazing but at the same time they also seem to be restricted, because of the fact the technology team seems to be overseen by other departments and mainly the one of the architect’s, which is the firm’s main focus. On the other hand, Second Story seems to be a more “free thinker” and seems to operate quite independently and focusing mostly on the artistic part of technology and not just on the architectural/design counterpart.

Furthermore, both of these firms seem to have a huge similarity as well, other than their projects. They both seem to be connected to people from many disciplines, who might affect the final products. For example, Second Story as they told us, operate with clients who do not seem to have any idea about technology, while Rockwell lab cooperates with its architects, who seem to dictate a big part of how many projects will be done, in order to fit their design.

On the other side of the coin, there seems to be no denial that Rockwell is a larger company and therefore it makes sense to be working more strictly, since they seem to work with quite prestigious hotels, restaurants and night clubs and therefore, they have be more careful and less free in what they produce. Furthermore, I personally know how big their projects are, since I myself happened to have visited one of the bar restaurants they made in Mykonos, an island that hosts some of the world’s most exclusive hotels bars and restaurants.

Conclusion

---

 

In conclusion, both of these firms produced really interesting and different projects and for that reason I would really like to work with them someday, because I really enjoy the way they manage to combine technology with art and design and produce amazing works, that sometime require state-of-the-art technology in order to be built.

Thanks for reading,

Christos

Introduction

---

 

This post will focus on how I applied what we have learned about images as well as talk about our visit to Second Story, which is a design and technology firm that is located in New York City, Portland and Atlanta.

Time Travel 2.0

---

 

As you can see in my previous blog post, I had created the time travel illusion, in which the goal of the animation was to reach our Planet with the Moon rotating. The problem though, was that Earth was just a blue circle and the Moon, was just a white circle rotating our the Earth and despite the fact that the stars looked pretty realistic, this inaccuracy was one of the biggest issues of my animations. For that reason, todays sketch was to replace these two circles with proper images in order to produce a better looking product from my previous assignment.

What I did is I initially found two images one of the earth and one of the moon online (PNGs) and by using the command reloadImage I was able to assign the earthimg and the moonimg variables to their appropriate images. Then I had to replaces the these too ellipses with the command image in order to create the two images. The only problem was that it was hard to find the appropriate coordinates for the images, so what I did was the use the imageMode (CENTER) command in order to make sure that the image of the Earth is exactly at the center of the canvas. The next issue was that the moon png seemed to show the dark side of the moon always rotating towards the earth, which is quite a serious issue. Therefore, I had to to rotate the image by 180 degrees in order to solve this issue and ensure that the dark side of the moon never faces towards the Earth.

This way, I was able to fix the previous assignment in order to look more realistic and aesthetically pleasing. Below you shall find the link for the assignment.

Link

---

 

http://cz930.nyuad.im/image_homework/

Second Story Visit

---

 

The second part of this blog is to talk about our visit to the design firm Second Story which is incredibly interesting as well as fun to see all the projects Second Story had made.

One of the first things that I really liked after going inside their offices  was the office’s decoration with a sort of a modern style as well as the fact that they had numerous projects and prototypes for the visitors to experience. Furthermore, the presence of the lab next to the presentation room was a really nice addition to the decoration of the office since it showed us some of the tools they used to build their projects (It was last January since I  last used the soldering tool so I was really impressed by that workshop they had).

Next, what I really impressed with was the event they had to organise when the worlds largest 4K monitor was released. Even if they did not focus on certain projects included in that exhibition, just from the video they showed us it seemed that they had done an amazing job and it made me feel jealous of the people who attended that event.

Furthermore, I really enjoyed the customised headphones they made in order to create a “storytelling” phenomenon between the actors and the visitors in one of the arts events they showed us.

Last but not least, the most interesting project they showed us in my opinion, was the opening of one New York office, which they filled with LEDs and touch screens for numerous projects in order to entertain the guests. The reason I loved the video about it is because they filled the whole building with LEDs that would change lights and thus gave the building an amazing futuristic feeling which is incredibly awesome in my opinion.

For that reason, since I really liked  the content of the company I might try to email them soon in order to get an internship for Second Story, since their field seems incredibly interesting.

Conclusion

---

 

This day, despite the fact that was quite busy, was also quite productive since we managed to learn how to use images, video files and the computer’s video camera, as well as made a really interesting visit to Second Story.

Introduction

---

 

In the last two classes, we had two museum visits, which I will talk about in this Blog Post. Furthermore, I found both visits quite interesting and entertaining as well and I am looking forward for today’s visit which is in Second Story Company.

Museum Of Math

---

The first thing that I really liked about the Museum Of Math was the fact that it interactively tried to teach us certain concepts. I also found this as the best aspect of the Museum of Math, since it made the visit quite entertaining. For example, I really liked the bicycle that had three completely unequal square wheels that were placed on a certain shaped floor that allowed it to move in a circular motion and at the same time providing the rider with quite a comfortable ride, despite the fact that the wheels were squares. Also, the other interactive exhibit that I found incredibly interesting was the first interactive possibility machine, since it is the first time I was able to see a practical application of statistics and therefore I found it quite impressive and interesting

The next thing I really liked about the Museum of Math was the exercise we did with the Fibonacci spirals, where we generated different spirals from certain angles. Initially, I found it quite a boring exercise, since I hate cutting papers with scissors, but as soon as Craig showed us how to create these different Fibonacci spirals I was quite impressed and interested. Therefore, I found this exercise quite useful as well as interesting. The other thing I really enjoyed about this exercise was the importance of the angle of 137,5 degrees in the Fibonacci spiral and sequence, since I never figured out you could do so many things with a simple angle.

One exhibit I would like to see though in the museum would be a small reference to φ, since it is a number that appears everywhere in nature and is also considered to bring the most aesthetically pleasing result, when an object’s analogies are linked to it. Furthermore, they could also provide images of famous structures as well as the human body in order to show how many times this number appears in nature.

American Natural History Museum

---

Next, I would like to talk about the visit to the American Natural History Museum, which is also the world’s largest private museum. It was an incredible visit as well as interesting, despite the fact that I had visited the museum in the past.

The first exhibit we watched, which was the Secret World Inside Us, was quite interesting, even if I totally hate Biology. The reason I really liked it even if I am a “Biology hater” was because we did not only see these amazing and well-crafted interactive tables, but also because we had a person who explained to us how they worked and therefore we mostly focused on the technical information of the exhibits, which was incredibly interesting since it accurately approaches what I would like to work with after I graduate.

One exhibit about Biology that would be awesome to exist would be to have a certain person in front of a projector that would show him directly on his own bodies the different types of microbes that live inside him, so it would help the guests realise how important are microbes for us and also that all humans provide microbes with the resources they need to survive and thus we provide them with the perfect living conditions for them, which also allow us the benefit as well.

Next, I would like to talk about the exhibition department we visited. I really liked the fact that we had someone to show us what happens “behind the scenes” of all these exhibits we see in the museums as well as show us how they are really made. What really surprised me though, is that they still build the exhibits by hand, which sounds quite hard and time-consuming since now 3D printers exist that could print 3D models of whatever the exhibit is. On the other hand, the fact that they still use the same techniques they used in the past is quite interesting, since its nice to know that all these exhibits are made by hand, thus giving them a different touch.

Conclusion

---

 

In conclusion, I would like to say that both of these excursions were quite interesting and rewarding since I learned a lot of things and I am really looking forward for the next visits to come.

Thanks for reading,

Christos

 

 

Introduction

---

 

As you might have noticed from my previous Blog Posts, all of my sketches are inspired by failures of other plans I had and this sketch is no exception. In my previous work, I created the apocalypse, but this time I have built a time travel sketch. Of course by time travel I do not mean going back to a different period of time, but travelling faster than the speed of light. Furthermore, I have combined what we learned from the class about arrays in order to create a universe zooming effect, similar to what we watched on the Planetarium today, which I found really interesting, since cosmology and the universe are some of my greatest interests.

Time Travel

---

 

As I mentioned earlier today’s sketch started with a little failure, since my initial plan was to build explosions that would trigger when a user clicked on a specific part of the screen. The explosions would involve fast moving particles that move in random different directions, in order to create a unique feeling to all different explosions. The problem was that I could not overwrite the previous particles and therefore after numerous attempts I realised that when I increased the size of the array to 2000+ and made sure the colour of all the small spheres were white, there seemed to be a universe effect, which is quite similar to some of the effects we observed to the Planetarium today.

Furthermore, I was highly interested with this effect, despite being coincidental I decided to work on it and improve the effect and in my opinion the results are quite interesting.

Firstly, the first main function I created called Explosion is the basis of the whole effect, since it creates a circle (ellipse) to the centre of the canvas  and then it changes its coordinates by random x and y velocities, in order to make the circle move in random direction. Furthermore, even the circles size is random, in order to make the “universe” effect more realistic and interesting. In this process, I also created another trick to make the effect look more interesting. All the circles initially are black and they slowly turn whiter and whiter, in order to show how they become brighter and brighter the closer they are approached. Also, the fact that they change colour, makes the “speed” effect more real since the light is being “warped” because of the “faster-than-light” speeds.

The second function used, is the one I also used on my Apocalypse sketch and for that reason I added Planet Earth as the destination of our “intergalactic” trip. Therefore, the “faster-than-light phenomenon” has as a result the approach to planet Earth and the Moon rotating around it. Of course, such an approach would require some sort of timer that would trigger the Earth function as soon as a certain amount of time is passed, which for my example is 30 seconds.

In order to accomplish that I was lucky enough to find a certain function online that would allow me to create a counter. As soon as the timer was created, also created a timer on the canvas, that would show the user in how much time the Earth would be approached in, which in our case was thirty seconds, or thirty minus the counter since I had a second counter. Also, the text would disappear after 30 seconds and then the Earth with the rotating moon would appear on screen.

Moreover, by using an array, I call the function 2500 times, in order to have enough random stars that slowly disappear into the abyss of the universe and that is also the reason why the program becomes “laggy” when executed.

It is important to notice that my time selection was not random. After thirty seconds most of the initial circles had disappeared from the screen and thus, only a few stars would appear on screen, thus providing us with an interesting result.

Time Travel

---

 

Conclusion

---

 

In conclusion, the array topic was really interesting and important since it allowed us to create way more things that we initially could as well as helped us call certain functions numerous times, instead of typing the same code again and again. I really hope that you enjoyed the time travel effect, which I would really like to improve even more soon.

Thanks for reading,

Christos

Intro

---

 

Our fourth lecture today was one of the most interesting ones, since we learned not only more advanced animation techniques such as rotation, but also how to create objects, which make programming incredibly easier as well as produce a way more organised code, which makes the programmer’s life easier. Despite the fact, that I am still getting used to the use of JavaScript, I was able to understand the new concepts and syntax, which is one of my main difficulties in this new language.

Creation of Destruction

---

 

For todays assignment, I wanted to create an explosion animation using the object techniques we learned today. My starting goal was to create this animation by shooting numerous small balls in all directions any time the user would click somewhere on the screen. Initially, I was able to create random projectiles that would be shot in random directions, but I encountered a huge bug. Even if I included the mouseClicked function, the program would take it as TRUE as soon as I started the program and thus the projectile was shot right away. Another problem I encountered was how to shoot numerous different projectiles that had different values for  x, y, xaccel, yaccel in order to be shot in all directions.  Unfortunately, because the only way I could thing of (I just figured out another way that I could use) to fix it was with the use of arrays which we will learn tomorrow, I managed to create this animation by having fast expanding yellow and red circles, which give the sense of a fiery explosion. On the other hand, the first object I created called Kaboom, which includes the creation of the explosion, since it allows the circles to expand just like a destructive Super Nova. Initially, I also gave the acceleration a negative value in order to make the small circle initially to shrink, in order to give the flashing animation before any nuclear explosion and thus make my animation more realistic. Furthermore, the BOOM function in Kaboom object would occur if the user pressed CONTROL, which is the secret button to destroy our planet. This way, the BOOM animation would occur only if the user pressed CONTROL after the program started. For that I used the KeyPressed and the KeyCode commands in order to check if CONTROL is pressed.

The next object I created is Earth, which includes three functions; planet, Moon and message. The first one planet, is quite simple, since it just creates planet Earth which is located in the centre of the canvas. The second, Moon is quite a complicated one, since the moon is designed to rotate around the first circle, which is planet earth. In order to create Moon’s orbital movement, I used the translate( ) function as well as the angle technique we discussed and practised today in class. This way, I was able to make the Moon orbit around the Earth and thus build the basic animation of today’s work.

Next, in order to finalise my assignment I had to add to texts. The first one was added in the earth object and included the text “PRESS CONTROL FOR A BIG BOOM” in order to show the user which button he needs to press in order to trigger the animation. The next text was a little more complicated, since I wanted to show the text “YOU HAVE DESTROYED PLANET EARTH” after the explosion was triggered, but not immediately, so it would not disrupt the user from viewing the animation. In order to solve this issue, I used the “if” command and therefore the text would be shown only if the x.pos variable was beyond a specific value. This way the text was shown when the screen was almost yellow, which is the colour of the inner expanding circle in the explosion animation. This way I completed my sketch, which you can view below.

Apocalypse

---

Conclusion

---

 

Last but not least, today’s assignment was quite fun and entertaining as well as challenging and destructive (in my case). In conclusion, I hope to learn even more interesting techniques tomorrow that will allow me to create even more interesting sketches and animations, as well as some small video games.

Thanks for reading,

Christos

Intro

---

 

Today in the class we covered more advanced programming techniques including the creation of buttons, functions and recursion as well as better techniques for the creation of the common bouncing ball  sketch we have seen in class.

Today’s Game

---

My sketch for today is actually more than a sketch. It is a small video game, which I call FingerSpeed. FingerSpeed of course is more than a game, it measures your click speed. Your goal is to click the red  button as fast as you can, in order to raise the falling ball to the ceiling as fast as possible. Of course, I did not make the game easy and for that reason I actually made it hard to win, so the user will have to do quite a lot of clicks before winning (still not sure if the game is fun or annoying!). In case, the ball touches the ground the user loses and thus the game is over showing the appropriate message (You lost!). On the other hand, in case the user makes the ball touch the top of the sky, the player wins and thus the appropriate message along with the high score appears.

Creation

---

 

In order to code the game, I firstly created a simple ball on the middle of the canvas, that was falling with a certain speed (velocity). Then, I built the ground using a simple rectangle on the bottom of the canvas.

The next step, was to build the button which is a big red button on the bottom right of the canvas. Then it was the time to add texts in order to help the user realise what is going on. First I used the text command in order to add the text “Click the mouse as fast as you can!” and then I added the “Click Here!” text on the button in order to show the user where he/she has to click in order to play.

My next part, which was the most challenging was to activate the button in order to raise the ball every time it was clicked. On the other side of the coin, this should not happen if the click happens anywhere else on the canvas. For that reason I created two consecutive if commands, one that checks if the mouse is clicked and one that checks if the distance of MouseX, MouseY is within the radius of the button. In case both of these conditions are true the ball is slightly raised.

Moreover, I also had to add two more animations, one of them that would trigger if the user loses and one of them that triggers in case the user wins. This part was relatively easy. With a simple if statement in case the ball touches the floor, the background will become black and the message “You Lost!” will appear. On the other hand in case the value of the y-coordinate becomes less or equal to zero, then the background will become white and the message “You Won!” will appear as well as the high score.

The high score was a more complicated story. Initially I wanted to use the second() function, which contains the value of the current second and then I would reuse it at the moment the user won. This way the difference of these two values would be the high score and therefore the least the value, the better the score. Unfortunately the second() function did not seem to work for me so I used a simple counter and would permanently increase the value of the score by 10 continuously. This value along with the text “Your highscore is:” will appear when the user wins. Of course that means that the faster the user wins, the lower his score is, which is something wrong. For that reason, I would change the value of score with one more variable called highscore and thus the final value that would appear is the the number 10000 minus the score, in order to give higher scores to the users that finished faster and therefore clicked faster. You shall able to try the game below in the Game section.

Game

---

 

Conclusion

---

In conclusion, I hope that you enjoy playing my (annoying) game and have the highest possible score. It was quite fun to make and I hope to make even better games in the future, as I am a big fun of video games.

Thank you for reading,

Christos

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