​

let WIDTH = 100;

let HEIGHT = 100;

let X_SCALE_FACTOR = 1080 / WIDTH;

let Y_SCALE_FACTOR = (1920 / 2) / HEIGHT;

let PIXEL_DENSITY = 1.0;

let c;

const AVAILABLE_COLOURS = [

    '#53C9AD',

        '#8243D9',

        '#4955C1',

        '#EDA05A',

        '#F4647A'

];

let color;

let blend_mode;

let font;

​

function preload(){

    font = loadFont('PCD22-Regular.ttf');

}

​

function setup() {

    pixelDensity(PIXEL_DENSITY);

    createCanvas(WIDTH * X_SCALE_FACTOR, HEIGHT * Y_SCALE_FACTOR);

    noSmooth();

    c = createGraphics(WIDTH, HEIGHT);

    c.textSize(18);

    c.textFont(font);

    // noCursor();

    noStroke();

    color = random(AVAILABLE_COLOURS);

    blend_mode = LIGHTEST;

    setup_here(c);

}

​

function draw() {

    draw_here(c);

    push();

    scale(X_SCALE_FACTOR, Y_SCALE_FACTOR);

    image(c, 0, 0);

    filter(THRESHOLD);

    blendMode(blend_mode);

    fill(color);

    rect(0, 0, WIDTH, HEIGHT);

    pop();

}

​

​

​

​

// Available colors: ''#53C9AD', '#8243D9', '#4955C1', '#EDA05A', '#F4647A', black and white

// Available blend modes: DARKEST, LIGHTEST

// Available dimensions: WIDTH = 100, HEIGHT = 100

// Available scale factors (useful when using the real size of the screen , e.g. mouse position): X_SCALE_FACTOR, Y_SCALE_FACTOR

​

​

​

// Setup function

function setup_here(c){

    // Your setup should go here

}

​

// Draw function

function draw_here(c){

    // Your draw function should go here

    // color = "#f2647a"; // Change the color for one of the available colors;

    blend_mode = DARKEST; // Change the blend mode to control the "black and white" mode.

  c.background(0);

​

  //c.ellipse(mouseX / X_SCALE_FACTOR, mouseY / Y_SCALE_FACTOR, 10, 10);

​

  c.ellipse(mouseX / X_SCALE_FACTOR, mouseY / Y_SCALE_FACTOR, HEIGHT-10);

}

​