Setting up the Foundation

This lesson lays the foundation for the application. here you should pay attention to the following things.

• Make sure that you enable the P3D renderer in the size() function.
• The image can already be scaled down to the desired resolution in the setup with the resize() function. This way you can increase the performance of the sketch significantly.

Processing

PImage source;

void setup() {
  size(900, 900, P3D);

  source = loadImage("source.jpg");

  // Set the amount of tiles
  source.resize(50, 50);
}

void draw() {
  background(#f1f1f1);
  noStroke();
}

p5.js

let source;

function preload (){
    source = loadImage("source.jpg");
}

function setup() {
  
  createCanvas(900, 900, WEBGL);

  // Set the amount of tiles
  source.resize(50, 50);
}

function draw() {
  background("#f1f1f1");
  noStroke();
}

(Translation from Processing to p5.js by Sebastien Vanblaere)