Concept:
I’m very new to the concept of generative art, and so I found myself struggling to come up with an idea for this project. Upon scrolling through some of the resources provided to us, I was inspired by this one artwork in Computer Graphics And Art (May, 1978), “Simulated Color Mosaic” by Hiroshi Kawano, and I liked how randomized the blocks were. Thus, I wanted to try and create an algorithm that would allow for a different randomized result at each run or click. No two patterns would look the same (hopefully). In order to create these blocks to be randomized, however, I needed to find an algorithm that would let me create blocks randomly, or at least have some planned out randomness (reference to the reading… haha).
Artwork:
(Click the screen to create a new pattern!)
Process:
To create this, I had to first come up with how to create a different pattern each time. Thus, I decided to create the variable blocks, so I could perform actions on it. It was an array, so it could hold many blocks that would be generated on each run. The block then had specific elements (blocks.push({ x: 0, y: 0, sz: 600, black: false })); it would start off at a size bigger than the canvas (to create bigger blocks) and then have a condition of black:false to edit the color of each block.
Afterwards, to draw the blocks, it would firstly go through every square, staring with a block and then targeting it to split it in half and so on. For this, I used this condition:
function draw() {
background(randomColor);
// go through every square
for (let i = blocks.length - 1; i >= 0; i--) {
let b = blocks[i];
rect(b.x, b.y, b.sz, b.sz);
if (blocks.length < 400 && b.sz > 30 && random(1) < 0.05) {
splitBlock(i);
}
}
}
function splitBlock(index) {
let b = blocks[index];
let newSz = b.sz / 2;
blocks.splice(index, 1);
for (let x = 0; x < 2; x++) {
for (let y = 0; y < 2; y++) {
blocks.push({
x: b.x + x * newSz,
y: b.y + y * newSz,
sz: newSz,
black: random(1) < 0.4 ? !b.black : b.black
});
}
}
}
It draws the block, and then to split the block, it checks the array and size to make sure it splits blocks of a certain size (not too big nor small boxes) and under the limit of 400 blocks in the screen (not too high to lag but also at a lower size so you can see more variation in size of bigger blocks). There’s many random possibilities for the blocks splitting to make sure that the pattern is different each time.
Then, to reset the artwork when it is pressed, I used a different function:
function mousePressed() {
blocks = [{ x: 0, y: 0, sz: 600, black: false }];
}
Originally, I was planning on keeping the artwork black and white (similar to the inspiration). However, after creating the code, I decided to add color to it. However, instead of just having the same color each time, I added code to change color on every reset.
I added two more variables, randomColor and randomColor2. In setup(), before starting to add the blocks, I set the colors to random with this code:
randomColor = color(random(255), random(255), random(255));
randomColor2 = color(random(255), random(255), random(255));
After, I also set this condition:
if (b.black) {
fill(randomColor2);
} else {
fill(randomColor);
}
I wrote in the code earlier, black: random(1) < 0.4 ? !b.black : b.black. This was to change the colors of some blocks randomly so it wouldn’t all accidentally end up the same color. Finally, I also added the random code again in mousePressed(), so it would reset into different colors again.
This is the final code:
let blocks = [];
let randomColor;
let randomColor2;
function setup() {
createCanvas(500, 500);
noStroke();
randomColor = color(random(255), random(255), random(255));
randomColor2 = color(random(255), random(255), random(255));
blocks.push({ x: 0, y: 0, sz: 600, black: false });
}
function draw() {
background(randomColor);
// go through every square
for (let i = blocks.length - 1; i >= 0; i--) {
let b = blocks[i];
if (b.black) {
fill(randomColor2);
} else {
fill(randomColor);
}
rect(b.x, b.y, b.sz, b.sz);
if (blocks.length < 400 && b.sz > 30 && random(1) < 0.05) {
splitBlock(i);
}
}
}
function splitBlock(index) {
let b = blocks[index];
let newSz = b.sz / 2;
blocks.splice(index, 1);
for (let x = 0; x < 2; x++) {
for (let y = 0; y < 2; y++) {
blocks.push({
x: b.x + x * newSz,
y: b.y + y * newSz,
sz: newSz,
black: random(1) < 0.4 ? !b.black : b.black
});
}
}
}
// reset when press screen
function mousePressed() {
randomColor = color(random(255), random(255), random(255));
randomColor2 = color(random(255), random(255), random(255));
blocks = [{ x: 0, y: 0, sz: 600, black: false }];
}
Reflection
The loops were confusing. I spent a a while trying to figure this out (much longer than I would have liked) and I think the outcome is okay, but I definitely want to explore creating more artworks that are more complex. The logic took more time to create than the actual code, but it was fun nonetheless. Next time, I would like to work a bit more with colors and shapes, and create a more interesting animation. It’s okay right now but it could be so much better. I really do like the color combinations I’ve been getting! Maybe I could make a color palette generator for my artworks later… or add more colors to this… we’ll see. I’m still not completely confident about loops and conditionals in Javascript, so I hope to get better with more practice.
