Inspiration Day
Welcome to the wonderful world of JavaScript! This day will be devoted to exploration and fun.
Your quest: Decide what you would want to make if you could make anything.
Creative Coding with p5.js and OpenProcessing
p5.js is a friendly tool for learning to code and make art. It is a free and open-source JavaScript library built by an inclusive, nurturing community. p5.js welcomes artists, designers, beginners, educators, and anyone else!
Click here to check out some of the wild possibilities of p5.js on OpenProcessing.
The coolest thing about these projects is that they are all open source - that means you can look at the code, and even copy it for your own project!
Learning
Click here for a p5.js tutorial.
There are also some smaller examples to help you start coding with Processing.
Example: Embers
Click here to view the Embers.
Try to modify the code to make it your own! You can change the color, size, and anything else. For a fun challenge, try turning the embers into snowflakes - instead of floating up, have them fall down!
Example: Waves
Try to modify the code to make it your own! You can change a lot of different stuff.
3D Worlds with A-Frame
It is surprisingly easy to start building a 3D world on the web. A-Frame is a great tool for doing so, and you can create without ever leaving an index.html file. Here are some helpful resources:
- Introduction
- Starter Project
- note: the Preview does not work for A-Frame, projects must be Published and opened in new windows
- Cool Possibilities of A-Frame
- Environment Basics
- 3D Models
A-Frame is built on top of three.js, an easy-to-use, lightweight, cross-browser, general-purpose 3D library.
Games with Phaser
Phaser is a game development framework that works with JavaScript.
Click here to remix a platformer game on Glitch.
There's a great book that introduces game development concepts using Phaser and Glitch - click here for the web version of this in-depth walkthrough.
HTML5 Canvas
You can do a lot using the HTML5 Canvas and JavaScript.