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 46 - Prairie Sunrise

For something a bit different, this week I’m going to be playing with photo manipulation and collage. Starting with a simple exercise from Generative Design, I took their code and tweaked it a bit to stress it out a little and make the results a bit more unexpected, manipulating a photo I took flying out of my hometown, Calgary, a couple years ago.

Sketch:

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

original image

original image


Drawings:


Code:

var img;

function preload() {
  img = loadImage('alberta.jpg');
}

function setup() {
  createCanvas(800, 800);
}

function draw() {
  var tileCountX = mouseX /2;
  var tileCountY = mouseY /100;
  var stepX = width / tileCountX;
  var stepY = height / tileCountY;
  for (var gridY = 0; gridY < height; gridY += stepY) {
    for (var gridX = 0; gridX < width; gridX += stepX) {
      image(img, gridX*2, gridY, stepX, stepY);
    }
  }
}

Chelsea Watson