In this project you can play with the p5js library. This library makes it very easy to create and draw on drawing canvases on web pages. You can read more about it at p5js.org.
If you use this project as your start, and you use an intellisense-enabled code editor like Visual Studio Code, Gitpod, or Repl.it you will be able to hover your mouse over the various p5js functions to get some information about them, and you will also get autocomplete and other functionality.
You can fork this directly on repl.it by visiting the template https://replit.com/@DavidGriswold3/p5js-starter-with-typings . This is probably the easiest way to get started!
To try out this project with gitpod, make sure you are looking at this on Github, then go to your Address Bar up ☝️ there, click inside, and add gitpod.io/# BEFORE the address already there. Gitpod will ask you to sign in with a GitHub id (you'll need to register if you haven't) and then it will create a full-fledged environment to play with this code. If everything works as planned, you should get a browser preview to the right automatically, and if you edit and save your code in index.js it should automatically refresh and show your changes. If it does not, for some reason, you an click the refresh icon at the top.
If you want to PERMANENTLY SAVE your code, you should use GitHub to fork or duplicate this repository before you start GitPod. Then you'll be able to use the Source Control fetaures of this editor to commit and push your code to GitHub, saving it permanently in your own copy of this repository!
I have automated this repository as much as possible, but you may need this information in case things break:
-
In case the web preview doesn't load or crashes, you should be able to start it up by clicking "Terminal -> Run Task" and choosing
shell:servefrom the popup menu. -
Many of the files that make this repository work have been hidden in gitpod, vscode, and replit to keep it as simple-looking for you as possible. They are still there, just invisible. To make them visible for editing (or fixing), you can look for a "Hidden Items" panel in the file explorer. If it's not there, use "File->Preferences->Workspace Settings" to see the list of hidden files and adjust as needed.
Though this repository was really designed to be used in GitPod, you could also download it locally and use it in Visual Studio Code. To get it working, you would need to (1) Install NodeJS and npm, (2) install VS code, (3) use your git tool of choice to clone this repository, (4) run "npm install" in the project folder (there is a task for that in Terminal->Tasks). You can still use the "serve" task from the terminal to run the code in a browser.