Skip to content
Branch: master
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


What will we do?

The aim of the workshop is to introduce you to programming. We will cover the basic elements to build an interactive website with p5.js.

With this tool we will be able transform a webpage into our canvas and with few line of code we will make it colorful and interactive. We will than use the built in gyroscope of smartphone and use it to interact with our newly created website.

As inspiration I suggest to take the websites made by Rafël Rozeandaal

We will cover those topics:

  1. Prepare the index.html file and all the folders

  2. Syntax () [] {} , ;

  3. variables let something = be something

  4. basic shapes

    rect(so far from the left, so below the top, so large, and so tall)//a rect
    ellipse(same, same, rather thin, but tall)//an ellipse

  5. if statements

    if(I am Something){
        change me into something else
        let me be what I am
  6. for loops

    for(let me start here; and end here; increasing by something){
        do this so many times
  7. mouse event

    function mouseClicked(){
        who clicked me?
    function mouseDragged(){
        who clicks and moves me?
  8. Device Motion (code by Ted Davis)

 /* PREFS */
 let easing = 0.5; // set between 0 - 1

 /* VARS */
 let rx, ry, rz, sx, sy, sz;
 rx = ry = rz = sx = sy = sz = 0;

 window.ondevicemotion = event => {
     /* RAW VALUES */
     rx = event.accelerationIncludingGravity.x;
     ry = event.accelerationIncludingGravity.y;
     rz = event.accelerationIncludingGravity.z;

     sx = smoothVal(rx, sx);
     sy = smoothVal(ry, sy);
     sz = smoothVal(rz, sz);

 function mapVal(value, istart, istop, ostart, ostop) {
     return ostart + (ostop - ostart) * ((value - istart) / (istop - istart));

 function smoothVal(inputVal, outputVal) {
     let tarVal = inputVal;
     let calcVal = tarVal - outputVal;
     outputVal += calcVal * easing;
     return outputVal;

Dependencies a.k.a. what you need to download

  1. A good code editor. I sugest either Visual Studio Code (Higly Recommended), Sublime Text 3 or Atom
  2. I know everybody hates it but we will use Chrome as browser. It has good built in console for debugging, so make sure to download it.
  3. Please download MAMP the free version of it.
  4. Make sure to download the complete p5.js library.


You can’t perform that action at this time.