Chelsea Watson
0

100x100 Computational Design Challenge

Throughout 2020 I created 100 computational designs in 100 days as a way to learn creative coding and explore generative art

Day 13 - Island Mosaic

island-mosaic-1.png

I nearly gave up on this one, not going to lie. I couldn’t figure out the simplest thing - how to upload an image! But, I got there and then it started coming together. As I’ve mentioned, I’ve been working my way through some of the Generative Design exercises but man, they just toss you in the deep end. Maybe they expect you to have more coding experience? Maybe there’s like a beginner version of the book I missed? Either way, it’s a lot. I hope to come back to the exercises once I’m a bit further along. But, in going through their Colour section, I was inspired by the idea of generating a drawing based on the pixels of a photograph. I started with their exercise to generate a colour palette based on an uploaded image, but stripped my sketch down to just include pieces I understood. I then combined this simple code with a few concepts I learned from a p5.js examples. I’m still not fully sure how it’s all working, but Adam has reassured me that’s totally normal. I also realized about halfway through generating some examples that I messed up the size scaling between the photos and the canvas, but I like the result so I’m just going to leave it as is.

Again, no pseudocode as I just kind of stumbled upon the final result of this random abstract tiled mosaic effect. The colours are pulled from two photos I took during a solo trip to Nicaragua a couple years ago, you can swap between them using the left/right arrow keys, combining the two palettes in one drawing if you’d like! You can also control the tile size through numeric inputs, and save/reset the canvas as required.

Sketch:

https://editor.p5js.org/chelseamwatson/present/YMX9tYvm3

  • S: saves and downloads image as a png

  • DELETE: resets the canvas

  • 1-5: changes the size of the tiles

  • LEFT ARROW: pulls colour from the blue photo

  • RIGHT ARROW: pulls colour from the pink photo

Drawings:

Code:

let img;
let aKey = 2;

function preload() {
  loadImage('nicaragua1.png', setImage);
}

function setup() {
  createCanvas(800, 800);
  noStroke();
  background(255);
  frameRate(30);
}

function draw() {
  let x = random(width);
  let y = random(height);
  let pix = img.get(x, y);
  fill(pix);
  rect(x, y, x / aKey, y / aKey);
}

function keyPressed() {
  if (keyCode == DELETE || keyCode == BACKSPACE) background(255);
  if (key == 's' || key == 'S') saveCanvas();
  if (key == '1') aKey = 10;
  if (key == '2') aKey = 8;
  if (key == '3') aKey = 6;
  if (key == '4') aKey = 4;
  if (key == '5') aKey = 2;
  if (keyCode == LEFT_ARROW) loadImage('nicaragua1.png', setImage);
  if (keyCode == RIGHT_ARROW) loadImage('nicaragua2.png', setImage);
}

function setImage(loadedImageFile) {
  img = loadedImageFile;
}
Chelsea Watson