Skip to main content

Week 4 - Other inputs and APIs

Outcomes

  • Independently researching new features of p5.js using the documentation
  • Using inputs to control behaviour of your sketch
  • Understanding the concept of web-based APIs and basic use
  • In groups create a sketch that uses either at least one input (learnt today) or APIs to create an interactive sketch

Local web server

So far during this series of workshops testing your code has involved opening the index.html file in your browser, which results in an absolute file path in the browser address bar (see below). You can see this indicated by the file:// protocol followed by the absolute file path to the index.html file:

For some examples you will need to run a local HTTP web server that serves the files in a project. If you have Node.js already installed you can run the following command to install an HTTP web server:

sudo npm install -g http-server

If you receive an error from the above command it's likely that you do not have Node.js installed. In which case visit the Node.js homepage and download/install the LTS version and repeat the command above.

Once you have installed the HTTP web server you will need to change directory (cd) into the project directory on the command line and run the server:

cd ~/Desktop/intro-to-programming-2017/15_image_pixel_array/
http-server

If successful you will see messages in the command line similar to this:

You can then copy and paste one of the URLs into you browser:

Other Inputs

So far you have used the input for mouse position to affect the visual output in your sketch.

There are a range of other inputs we can use to create dynamic / interactive sketches:

  • Click
  • Keyboard
  • Touch / Drag
  • Rotation

Experiment with these other inputs using the p5.js reference. Search for ‘Events’ section in the reference.

APIs

Supporting Code
The code to support this section is located in the following directory and is available to view on Github: 
/19_api_playground/

Here are a list of APIs you can use for this example:

APIs

OPEN
  1. http://apis.is/cyclecounter
  2. http://apis.is/horses?id=IS1987187700
  3. http://apis.is/ship?search=engey



REQUIRES API KEY
Back to top