From Code to Art: The Power of Creative Coding Tutorial

let fontRegular = "DMSans-Regular.ttf";

​

function preload() {

  fontRegular = loadFont(fontRegular);

}

​

function setup() {

  // Set up the canvas

  createCanvas(400, 450);

​

  // Set the background color to black

  background('#000000');

​

  // Disable drawing the outline of shapes

  noStroke();

  textSize(18);

  textFont(fontRegular);

  textAlign(CENTER, CENTER);

}

​

function draw() {

  // Clear the background

  background('#000000');

  // First white rectangle at the top left

  drawRectangle(0, 0, 95, 120, '#ffffff');

​

  // White rectangle underneath the first rectangle

  drawRectangle(0, 150, 95, 130, '#ffffff');

​

  // Blue rectangle underneath the second

  drawRectangle(0, 290, 95, 110, '#1356A2');

​

  // Large red rectangle on the right side of the painting

  drawRectangle(105, 0, 295, 280, '#D40920');

​

  // White rectangle underneath the red rectangle

  drawRectangle(105, 290, 250, 110, '#ffffff');

​

  // Small white rectangle at the bottom right corner of the painting

  drawRectangle(365, 290, 35, 50);

​

  // Yellow rectangle at the bottom right corner of the painting

  drawRectangle(365, 360, 35, 40, '#F7D842');

  // display coordinates

  fill(255, 255, 255);

  text('position:' + int(mouseX) + '(x), ' + int(mouseY) + '(y)', width / 2, 425);

}

​

function drawRectangle(x, y, width, height, fillColor = null) {

  if (fillColor) {

    fill(fillColor);

  }

  rect(x, y, width, height);

}