Skip to content
Art created with code by students, written with Processing using the p5.js JavaScript library.
JavaScript HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
node_modules
public
scripts
views
Procfile
README.md
package-lock.json
package.json
server.js

README.md

Sketches made with processing

This project provides a server to run and share works created that use the p5.js library.

Start

  1. Open the command line, us ls to find out where you are, use cd to change to the right folder
  2. Repeat until found the correct folder you download this project into.
  3. Type npm run start to host the server on your computer
  4. Go to http://localhost:3000/ and see the work.
  5. Now go open an editor to change the code in sketch-#.js files in the public folder.

Create a new sketch

  1. Stop the server with ctrl-c for cancel in the command line.
  2. type npm run create to add your own sketch-#.js files under the public/ folder.

Tasks

command description
npm run start Start a web server on your own computer
npm run create Create a new sketch file to start editing
ctrl-c Stop a running task

Related Topics

Command Line

You will find having the done command line project very useful in order to understand how to start the program and understand what files and paths are and how they relate. Including how to move around the file system.

Website Starter

Our website start project can introduce you to learning more about creating things on the web.

Python to Javascript

For those familiar with python, this python to javascript document will help you get into JS from some common concepts.

How it works

You don't need to read this to get started, but for the curious this is how the project functions

  1. A server makes the contents of the public folder accessible by a web browser from the computer running the server.
  2. When starting, this server lists the files named "sketch-#.js" in that folder to create the menu you see on the page.
  3. When a page is requested by a user through a browser the server creates an HTML document from the templates in views.
  4. Depending on the path the users browsers wants to get, the matching sketch number is added into the page. This logic is contained within server.js

npm run start starts the server by running the program "node" with the file server.js for you.

The language you are coding is javascript. This project introduces you to using a library called p5.js which itself is written in javascript. A library is a set of functions already written for you to use. p5 gives you nice functions to use for drawing on the screen.

You can’t perform that action at this time.