Assignments – Page 2 – Creative Coding

Final Project Inspiration

For my final project, I want to use the p5js library p5.play to make a game. I don’t have an concrete idea about what exactly I’d like to make, but I think I want to create a game that teaches children how to recycle. I found a sketch on openprocessing, a pong game that someone created using p5.play. Basically, it works like traditional pong, where there are 2 paddles on either side and a ball bouncing from side to side, except in this sketch the user controls both paddles and tries to get as many hits as possible. I think this is a great example of a game created with p5.play, and there a couple elements in it that I can see myself incorporating into my own game. For example, the paddles are mapped to the mouse, so they followed the mouse up and down no matter where it is on the x-axis. For my game, I want to have a character in the middle who is mapped to the mouse, so that the character is able to move from side to side and drop items into either a trash, recycling, or compost bin. I also really like the simplicity of the pong game, as there aren’t too many interactive elements that might confuse the user. I want to employ the same simplicity into my own sketch, but also make it visually appealing and fun to interact with. Similar to the hit counter in the middle of the pong sketch, I’ll probably try to create some sort of counter to keep track of points when the user puts an item in the correct bin.

For my project, I’ve started looking through some examples on the p5.play website, and think I’ll have to create some sprite animations for the final result. So, when I actually start creating my game, I’ll first have to figure out which parts need to be animated so I can draw those first, and then start the coding process, which I still haven’t quite thought through.

Pong sketch:

-https://www.openprocessing.org/sketch/518779-

Dom assignment

For this assignment , I made burger order menu with using checkbox in order to choose specific ingredients that customer would like to put inside of burger. I am going to use the DOM library that can implement html input types and other elements. In this canvas I am going to use createCheckbox() to create the input checkbox for ingredients and have a order submit button that will delete all the elements and create a text that says ‘thank you for your order’.

Library

Ever since my midterm project, I wanted to incorporate sound into my sketches. Especially after seeing many presentations in class demonstrating the intersection of music and digital design, I’d really like to possibly explore this area as well. And so after scrolling through the p5.js website, I’m thinking about using waveforms to supplement music through this library: https://p5js.org/reference/#/p5.FFT or maybe similar to previous week’s research post with BlokDust, I’d like to possibly make an interactive soundscape through: https://p5js.org/reference/#/p5.Part or https://p5js.org/reference/#/p5.Phrase

Library

When searching through the P5.js libraries, one stood out to me: p5.scenemanager. Scenemanager is amazing, because it allows you to have multiple setup and draw functions, as long as they’re put into different scene classes. This could be used in many different ways. I could create an animation with multiple scenes, or even a game with multiple different levels. I also like this library because it seems like it could be easily combined with other libraries, and I could get creative…especially with the use of multiple draw functions. I’m able to essentially have multiple canvases, with different sketches.

Libraries

https://p5js.org/reference/#/libraries/p5.sound

http://ability.nyu.edu/p5.js-speech/

I’m interested in visualizing the sound. P5 sound library let users detect the volume and the frequency of the sound.

Library

I was looking through the libraries on the p5.js website and was having a hard time deciding between p5.bots and p5.play. I am really interested in working with Arduino, controlling sensors, motors, and LEDs, but I also love to illustrate and animate, which is why I think I want to work with p5.play. I’ve always been interested in animation/game development, and would really like to create a game in the future with this library.

Data

I think one of the hardest parts of this assignment was getting access to the APIs; either I didn’t have a key, or there was some linkage problems going on in within my sketch. For example, sometimes when I linked an API, my sketch would be stuck on “Loading…”. Because I had to cycle through a lot of different APIs, I had to come up with different ideas of sketches, but I finally settled on getting an API from google books. I wanted it so that the title of the books linked would appear. Their font size would be determined by how many pages they have, and their font color would be determined by their average ratings. However, I am having problems with creating functions and linking it to the API, and so none of my elements in the draw function work.

Data post

For the data sketch, I found an API from the GitHub list that listed threats to the Atlantic Puffin. There was a lot of information in there that I could use, but I really just wanted to represent the threats to the puffin in a visual way. So the information I used was the “name” of the animal and the “title” of each one of the threats. Other data included timing, scope, severity, among others, which were mostly classified as “Unknown,” which I didn’t think would fit in my sketch. I counted 17 threats listed in the API, but I only chose 9 that I thought could be represented in an aesthetically pleasing manner. Also, some threats were ambiguous and couldn’t be incorporated into the sketch, such as “Other impacts”, and “Type Unknown/Unrecorded.” In the end, I created visuals for the puffin and 9 of its threats. I placed the puffin on the left and pulled the name from the API and placed it right under. On the right side, I created 3 sets of ellipses, each of which would randomly changed into 1 of 3 different threats every time the sketch is reloaded, for a total of 9 threats.

Openprocessing link:

API Link:

http://apiv3.iucnredlist.org/api/v3/threats/species/name/Fratercula%20arctica/region/europe?token=9bb4facb6d23f48efbf424bb05c0c1ef1cf6f468393bc745d42179ac4aca5fee

Midterm Reflection

I felt like reading chapters 10 and 11 validated some of the lessons that I began to learn over the course of working on the midterm. At the start of the project, my code was deeply disorganized. I was thinking of the whole project as one still image and not thinking more seriously about how to make the individual components work best. That said, as I continued working, I began to see the importance of organizing my code, which is underlined in chapter 10. I created way too many classes as a means of keeping my code clean, which is not quite what the book meant, but is along the same lines. If I had read the chapters before my project, I would’ve thought more about the individual components of the matchmaker, and I would have thought to do things like create a loop for lines instead of drawing 40 individual lines.

Chapter 10 and 11

Reading these chapters, I began to think about how I might want to practice planning out my code more systematically. Until the mid-term sketch, I would just throw in a bunch of ideas into a long set of main code and organize them as I am revising the code. This method worked for me because I never start my code with a clear idea of what I want to create, probably because I am still getting myself used to Processing. However, I think I should start getting in the habit of beginning object-oriented sketches with multiple classes rather than a single tab of codes since that will help me in the future when I write more complicated code.

The debugging chapter was interesting, especially the use of println(). Separating the code into smaller sections, commenting out, and testing with a new sketch are steps that I naturally followed whenever I was faced with a problem. Indicating the location, color, array and etc. is something that I should keep in mind when some objects do not appear on the sketch. Previously, when this happened, I would just copy the code for the specific object on to a new sketch and play around with it until it works.