p5.js is an open-source JavaScript library available for web designers and developers to do creative coding. You can import this library in your file using <script> tag using the <src> attribute having the value set as "https://cdn.jsdelivr.net/npm/p5@1.5.0/lib/p5.js" inside your HTML file or alternatively, you may use the p5.js Web Editor online on the following website: https://editor.p5js.org
If you are new to p5.js and want to work over some already built samples, then you may head onto the Examples section in the website.
Choose any of the examples and you may directly start working upon its specified code. Here, in this repository which I've created, I'm using the Keyboard example in order to develop a simple and artistic web app.
After successfully running the code in your system, click on the image to give it focus. You will see a similar screen like this.
Now, press the letter keys to create forms in time and space. Each key has a unique identifying number. These numbers can be used to position shapes in space.
Note that it blinks only when one of the 26 alphabet key is pressed. If any other key is pressed, the background gets cleared back to what it primarily was.
- Your Keyboard app is now successfully working,
- Make updates & changes to the code in accordance to your wish and have fun 🎉