P5.js Parameterize Tile Art Sketch

For this sketch, I created a few parameters that allowed for easier replication of the tile art and the ability to modify each tile. Changing attributes like background color, line stroke, quarter marks, and the interior square was an easy way to create an entirely new visual without needing to write a full chunk of code for each tile.

I felt like this sketch came together nicely and ended up being pretty visually appealing. It almost has a rug feel to it.

Here’s a peek at the raw Javascript code to make this sketch work.

function setup() {
	createCanvas(600, 600);
  angleMode(DEGREES);
}

function createTile(originX, originY, bgColor, emptySquare, quarterMarks, interiorSquare) {
  translate(originX, originY);
  fill(bgColor); //bgcolor
  noStroke();
  rect(0,0,200,200);
  stroke(emptySquare);
  strokeWeight(8);
  noFill(); 
  rect(25,25,150,150);
  noStroke();
  fill(quarterMarks); 
  arc(50, 50, 50, 50, 0, 90);
  arc(150, 50, 50, 50, 90, 180);
  arc(150, 150, 50, 50, 180, 270);
  arc(50, 150, 50, 50, 270, 360);
  fill(interiorSquare); 
  quad(50, 100, 100, 50, 150, 100, 100, 150);

}

function draw(){

  createTile(0,0, '#7ADEDE', '#fff', '#FEBF43', '#F54053');
  createTile(0,200, '#FED2C2', '#00548D', '#fff', '#F54053');
  createTile(0,200, '#00548D', '#FEBF43', '#FEBF43', '#F54053');
  createTile(200, -400, '#FEBF43', '#00548D', '#fff', '#F54053');
  createTile(0, 200, '#F54053', '#FED2C2', '#FEBF43', '#00548D');
  createTile(0, 200, '#FF4A00', '#00548D', '#E5E5E5', '#00548D');
  createTile(200, -400, '#151515', '#00548D', '#FEBF43', '#F54053');
  createTile(0, 200, '#E5E5E5', '#00548D', '#FEBF43', '#F54053' );
  createTile(0, 200, '#0091D1', '#151515', '#fff', '#F54053');

  noLoop();
}

Here’s a link to the Github repository for this P5.js sketch.

P5.js Parameterize Tile Art Sketch

Submit a Comment