Project Examples

We will be building lots of visualizations throughout the course to be able to learn programming in a visual way. Each visual illustrates a use for a programming structure; teaching JavaScript and p5.js at the same time.

We will start off by learning about the basics of JavaScript and p5.js by going through simple but colorful examples.

We will progressively look at building more involving examples that makes use of common programming structures such as arrays.

function setup(p) {
    const myCanvas = p.createCanvas(p.windowWidth, p.windowHeight);
    p.rectMode(p.CENTER);
}

function draw(p) {
    p.background(1, 75, 100);
    p.fill(237, 34, 93);
    p.noStroke();
    var diameter = 50;
  
    for (var i=0; i < p.windowWidth/diameter; i=i+1) { 
      for (var j=0; j < p.windowHeight/diameter; j=j+1) {
        p.ellipse(
          diameter/2 + i * diameter, 
          diameter/2 + j * diameter, 
          diameter * p.noise(p.frameCount/100 + j*10000 + i*10000), 
          diameter * p.noise(p.frameCount/100 + j*10000 + i*10000)
        );
      }
    }
}

export { draw, setup };

Read-only

Using JavaScript with p5.js will allow us to build examples that are animated...

var words = ['I', 'love', 'programming', 'with', 'JavaScript'];
var colors = [
  [63, 184, 175],
  [127, 199, 175],
  [218, 216, 167],
  [255, 158, 157],
  [255, 61, 127],
];

function setup(p) {
    const myCanvas = p.createCanvas(p.windowWidth, p.windowHeight);
    p.textAlign(p.CENTER, p.CENTER);
    p.frameRate(3);
}

function draw(p) {
    var currentIndex = p.frameCount % words.length;
    var currentColor = colors[currentIndex];
    var currentWord = words[currentIndex];
    p.background(currentColor);
    p.fill(255);
    p.textSize(45);
    p.text(currentWord, p.windowWidth / 2, p.windowHeight / 2);
}

export { draw, setup };

Read-only

or interactive (Try clicking the area code area to draw circles of random size and color on the screen.).

var pressed;
var colors = [];

function setup(p) {
    p.background(0);
    var myCanvas = p.createCanvas(p.windowWidth, p.windowHeight);
    colors = [
        [245, 3, 155],
        [13, 159, 215],
        [148, 177, 191],
        [100, 189, 167],
        [242, 226, 133],
        [176, 230, 110],
        [123, 90, 240]
    ];
}

function draw(p) {
    p.noStroke();
    if (pressed === true) {
        var randomIndex = parseInt(p.random(colors.length), 10);
        var randomSize = p.random(200);
        
        p.fill(colors[randomIndex]);
        p.ellipse(
            p.random(p.windowWidth),
            p.random(p.windowHeight),
            randomSize,
            randomSize
        );
    }
    pressed = false;
}

function mousePressed() {
    pressed = true;
}

export { draw, setup, mousePressed };

Read-only

Final Project: Building a Game

Here is the final project that we will be tackling at the end of the course; an interactive, animated game that can be deployed on the web. Try clicking the area below and pressing the numbers on your keyboard (not the numpad) that matches to the numbers being displayed in the game to play the game!

Are you ready to learn programming using JavaScript with relevant, practical and visual examples? If so, check it out below!

Get the Course!