Introduction

node + express + p5

In the INTP-362 course of SAIT, the student should pick one technical topic, self-study the subject and then have two technical presentations in front of the classmates. My topic was node.js and this was my demo project to show a simple integration of node.js, express and p5.js.

How to run the file

1. Clone the repo
2. Run the command window onto the folder
3. node server
4. Go to http://localhost:3000 in your web browser
5. Click the screen

Explanation

Briefly, the structure of this project consists of the node_modules folder to use the modules and the public folder for audio, image, and p5 files. When the node.js and express implement the server, p5 draws the images and turns on the music following the way I wrote on the sketch.js file. Since it was for the last week of the class, I tried to make it as the closing credits of the class, you can see all the classmates' topics on the signages. For the harmony of music and image, I converted every image as a pixel-art so that it could give the reminiscence of a retro city.

Reference

1. https://app.monopro.org/pixel/ - To convert your image as a pixelart, go for it!
2. https://youtu.be/0S43IwBF0uM - In visual-wise, the idea is inspired by this music video directed by Michel Gondry.