My interests in Computation

Earlier this year, I learned a little bit about how to build websites. I think using p5.js could be a fun way to make a website visually appealing and interactive to users. Some of my interests are interactive storytelling, I can imagine using computation to manipulate images, create animations and awesome interactive experiences.

I know I love drawing and animation. With my little website background, I think I can imagine making a website where the user can get to create any form of avatar they want, and make it do it whatever they want like fly, dance, sing or even tell a story and watch it play live on the screen. It could be a fun game or experience for children.

Creating my Spaceship sketch

My experience of using the p5.js web editor was fun. It was my first time. It seemed relatively easy to manipulate numbers and adjust the diagrams on the canvas.

I started out with idea of creating a monster, specifically, Mike Wazowski from Monster Inc.

I got the face right, but I couldn’t figure out how to draw the legs or the horns or the arms. I wanted to improvise and use the triangle command to draw the horns but I could not figure out how to move it from its’ position.

From my half-drawn picture of three circles, I decided to try out a spaceship which ended up looking like BB-8 from the Star Wars franchise. I had to resist the urge of sketching BB-8 and stick to my spaceship drawing. I got the spaceship inspiration from google images.

 

One of the pitfalls I encountered was centering the ellipse. I had previously watch Daniel Shiffman videos where he used ‘rectMode’ to center the rectangle on his canvas.  I wanted to try the same thing with the ellipse, so I looked it up on the p5js references. I found the ‘ellipseMode’ which I decided to use but it didn’t work. I tried it at least three times, my ellipse did not shift. So, I used my eyes and just started randomly typing in the numbers till my ellipse was in the center. It was not an efficient way, but it got the job done.

My spaceship drawing was going smoothly until it was time to draw what looked like poles sticking out from the spaceship. There were three poles. It is similar to the antenna of my spaceship. The only command I could think of using was the line command but I could not figure out how to position it to the bottom of the spaceship.

After tweaking, and changing figures, I managed to get it to one side of the spaceship. I still could not figure out how to get it to other side. I figured my problem was that I did not understand the X and Y coordinates.

My final drawing can be found here.