Note: Deals with a few take-home points based on this project. You can get a live preview of the project here .
What exactly is p5.js?
Right from the creators of p5.js:
p5.js is a JavaScript library for creative coding, with a focus on making coding accessible and inclusive for artists, designers, educators, beginners, and anyone else!
For me, it was the canvas to mix in art and logic to bring a beautiful shade of creativity. p5.js is an amazing JavaScript library, where literally imagination is your limit. A combination of the art of CSS, the logic of Java, the simplicity of JavaScript.
The p5.js organization has it's very own web editor which I found extremely useful. For one you can substitute values as you learn- browse, through the concepts. Within the concepts covered in reference page you can find editor snippets so that you can experiment with different values. Furthermore the web editor allows various customization within itself. Whether it's changing the mode (dark/light), or the font size, type, the p5.js web editor has it all.
Like in CodePen you could easily fork pens (in p5.js terms duplicate sketches). Extending the CodePen metaphor, p5.js has a huge library of sketches as well. This proved especially useful when it came to adding features to my project. I could easily duplicate the sketch into my p5.js editor and with a little manipulation I was good to go.
I think the p5.js library is a very powerful tool, which is not only easy to learn (partly because of the great resources available), but also can bring to life a horizon of creativity.
Resources
Personally in my learning journey my go to resource (needless to say) was the p5.js reference page. Equally helpful I did find Daniel Shiffman's 'The Coding Train' YouTube channel. His videos had been exceptionally useful. I can quite confidently say that his videos are the best you can find on p5.js. Not only did I learn about p5.js concepts, but I got a good grasp of JavaScript concepts through his video. Definitely amazing content!
Building the Game
Points worthwhile mentioning on my journey of building my ninja-guy.
Getting Started
Getting a vision and a niche to your game outlook took a lot of time. It was a fine line between overdoing, and lacking details. Because lets be honest, small details could cost a lot of time. Choosing weather to include specific details should be done with careful consideration. I'd suggest to sketch it out in an editing software to see if the colors and theme blends in.
2-D Plane
One of the most taxing task was dealing with angles. Because one needs to realize that all the graphics we see on screen is actually on a X,Y coordinated plane. Adding a third dimension or even rotating objects needs to be considered in a careful eye. I think that had been the hardest bit of the entire process. In my case, I did not deal with three-dimensional objects, I only played with two-dimensional objects, with rotation and translation functions included.
Being Efficient
Getting the first drawing done is the main part of the game graphics. The graphics of the object can later be duplicated and featured on various parts across the game. Though one needs to make sure that the values and coordinates used should come from a relative value. That would make customization easy and efficient, removing the depiction of constant repetition.
Making it Dynamic
Furthermore I also used one of the JavaScript Object Oriented patterns- the Factory Pattern. This gives a good sense of dynamics to the game. The downside of this is, the process rate of the game dropped significantly. Which was evident when I removed the factory pattern.
Do it a Second Time Round?
Things I would reconsider, and re-evaluate if I were to do this a second time round. Here's something you need to think about if you plan on creating a game in p5.js. Would definitely wish I knew these tips earlier on.
Revise Mathematical Concepts
Well this is not something I exactly had a choice of, because at the time I didn't have the required mathematics knowledge. Later on on my first semester when the subject of matrices came up, only then did I realize the whole concept of the (X,Y) coordinated canvas. It is truly mind-blowing that everything we see is basically pixels with R,G,B values on different X,Y coordinates. Matrices are extremely important and make game development much more comprehensible.
Divide the JavaScript file into modules.
The project specification required that I submit a single file, with all the functions and classes to be in a single file. If I were to redo it all over again I'd choose to export each function and component as different modules. It also helps to keep the functionality organized.
Taken Breaks
It's amazing how a few X,Y coordinates could rip off your sanity. There were days I'd spend hours trying to figure positioning components, or rotating them to fit my design. Sometimes the solution was to step away, have coffee, get a good sleep, and voila it's as if the elves worked its magic. The answer lay right their. It boggles you how you'd not seen it right away. That, that's the power of perspective.
Asked Help.
Sometimes taking a step back and asking help, from a colleague, fellow coder or a friend can do a lot. It maybe that you are more proficient, and most probably would repeat things you already know, but trust me it does a lot. Once again the concept of perspective comes to play. If in case you don't have a fellow coder who you could reach out to, remember browsing through concepts is also a form of help, just that you help yourself. I've spend hours trying to achieve a design, only to find out that there already exists a functionality that does exactly what I spent days trying to come up with.
Final Notes
I wish I had enjoyed the process more. This game project was part of a college assignment, and while I did get inspiration from others' work, I became obsessive in trying to make mine better. I was angry at myself for not making progress, I became short-tempered around my family, I used to sweat over minor details, was insanely obsessive on making it perfect. Little did I know that my ninja-guy would prefer if I had taken it easy. If instead of being angry I saw how everything was brought to life (literally). Given that this was a assignment with deadlines, it is understood that it can be taxing, but I implore you to enjoy the process, that way your creativity would flourish and you'd perform better as well.
Happy Coding :) PS:
console.log ("We are in it together");
continue;