Switch branches/tags
Nothing to show
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


Bonjour Code

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.

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


19.03.2018 18:00 – 22:00

We will cover those topics:

  1. Syntax () [] {} , ;

  2. variables let something = be something

  3. coordinate system x, y, [z]{WEBGL}

  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. colors background(r, g, b) , fill(r, g, b), stroke(r, g, b)

    RGB color system
    background(255, 0, 0) // RED
    fill(0, 255, 0) // GREEN
    stroke(0, 0, 255) // BLUE

  6. mouse coordinates mouseX & mouseY

  7. if statements

    if(I am Something){
        change me into something else
        let me be what I am

26.03.2018 19:15 – 22:00

-3. How to disable telemetry reporting


-1. folders etc.

  1. moving things without the mouse

  2. operations ++ += -- -= %

  3. for loops

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

  4. 3D WEBGL

    createCanvas(600, 600, WEBGL)
  5. transformations (rotate etc)

    translate(x, y, z)
  6. mouse and keyboard events

    function mouseClicked(){
        do something
    function mouseDragged(){
        do something
    function keyPressed(){
        do something

09.04.2018 18:15 – 22:15

-1. Final Presentation 05.05.2018 0. HTML & CSS

  1. DOM events inputs buttons sliders

  2. functions

16.04.2018 18:00 – 22:00

  1. Terminal & bash commands

    cd #change directory
    pwd #prints the current directory to the terminal
    ls #shows the content of a directory
    mv #move something
    mkdir #make directory
  2. Git, Brew & Github

    /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
     #install brew
    brew install git #install git
  3. Pushing Website to github pages

    git add . #stage changes
    git commit #commit changes
    git push #pushes changes to the remote directory
    git pull #pulls from the remote directory
    git clone #clones a repository
  4. more functions

23.04.2018 18:15 – 22:00

  1. Array

    // declare an empty array
    let myArrayEmpty = [];
    // declare a filled array
    let myArrayFull = [1, 2, 3, 4, 5, 6, 7];
    // fill an empty array
    let numberOfElements = 100;
    for(let i = 0; i < numberOfElements; i++){
        myArrayEmpty.push(i);// .push(element) pushes any element at the end of the Arrray
    // myArrayEmpty = [1, 2, 3, ..., 99]
    // get content of an array with standard for loop
    for(let i = 0; i < numberOfElements; i++){
        console.log(myArrayEmpty[i]);// prints the content of the array in the console
    // get content with for of loop
    for(let element of myArrayEmpty){
    // remove element from array
    myArrayFull.splice(2, 1);
  2. Ted Davis guest lecture on gyroscope on handheld devices

      <meta name="viewport" width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0>
      <meta name="apple-mobile-web-app-capable" content="yes">
      <meta name="apple-mobile-web-app-status-bar-style" content="black">

30.04.2018 18:15 – 22:00

  1. Objects

05.05.2018 Exhibition

Exhibition @Bonjour Baby with artworks by:

All the artwork are built upon the devicemotion feature. This means that they won't work on laptop or desktop machines, but only on hand held devices.

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. Also make sure to download this blankExample.zip here by either clicking download or view raw


  1. Eloquent JavaScript