/*
Inspired by Georg Nees' Schotter
Based on a translation from Code as a Creative Medium:
<https://github.com/CodeAsCreativeMedium/exercises/blob/main/02_iteration/15_recoding_schotter/schotter_js/schotter_js.js>
*/
let angle = 0;
let cellSize;
function setup() {
createCanvas(windowWidth, windowHeight);
noFill();
strokeWeight(2);
}
function draw() {
background(255);
cellSize = min(width / 10, height / 10);
for (let y = cellSize; y < height - cellSize; y += cellSize) {
for (let x = cellSize; x < width - cellSize; x += cellSize) {
push();
translate(x + cellSize / 2, y + cellSize / 2);
rotateAmount = random(-angle, angle);
rotate(rotateAmount);
square(-cellSize / 2, -cellSize / 2, cellSize);
pop();
}
angle += 0.05;
}
noLoop();
}
function windowResized() {
resizeCanvas(windowWidth, windowHeight);
angle = 0;
}
I think this code will produce a grid of squares which will get smaller and randomly rotate as the grid goes on.
I was wrong about the squares having a size change, what switched me up was a misinterpretation of what happens with the -cellsize.
let total;
let sqSize;
let sizeDifference;
function setup() {
createCanvas(windowWidth, windowHeight);
background(255);
rectMode(CENTER);
strokeWeight(2);
noFill();
let minDimension = min(width, height);
total = minDimension / 80;
sqSize = width / total;
sizeDifference = sqSize / 6;
}
function draw() {
translate(sqSize / 2, sqSize / 2);
for (let r = 0; r < total; r++) {
for (let c = 0; c < total; c++) {
let x = r * sqSize;
let y = c * sqSize;
square(x, y, sqSize);
let offsetX = random(-5, 5);
let offsetY = random(-5, 5);
for (let i = 1; i < 6; i++) {
let newX = c * sqSize + i * offsetX;
let newY = r * sqSize + i * offsetY;
let newSize = sqSize - i * sizeDifference;
rect(newX, newY, newSize);
}
}
}
noLoop();
}
This one is tricky for me to fully visualize what is happening before I run it - it’s going to be another square grid. The second for loop is making a smaller grid (only six loops), but for those six loops it’s going to be offset from the previous loop in a few different ways. What I am confused about specifically is if it runs once the other loop is finished. If so, it will continue from the end of the other and provide a more gradual change. I think this is the case.
I was wrong, and I get it now - that second loop runs each time the other loop runs, so it draws 5 other squares which get smaller and their centers shift.
/*
Based on Matt Pearson's "Listing i.1 A generative system in 24 lines of code" in the Introduction to Generative Art, 2011, p. xxiii
License:
No part of this publication may be reproduced, stored in a retrieval system, or transmitted, in any form or by means electronic, mechanical, photocopying, or otherwise, without prior written permission of the publisher, with the exception of the Introduction, Chapter 1, Chapter 6, and the source code throughout, which are available under a Creative Commons (Attribution-NonCommercial 3.0) license.
See creativecommons.org/licenses/by-nc/3.0/. Note that Creative Commons distribution of the images in the Introduction and in Chapter 1 is limited to those by Matt Pearson only.
*/
function setup() {
createCanvas(windowWidth, windowHeight);
background(255);
noFill();
let xstart = random(10);
let ty = random(10);
translate(width / 2, height / 2);
for (let y = -height / 8; y <= height / 8; y += 3) {
ty += 0.02;
let tx = xstart;
for (let x = -width / 8; x <= width / 8; x += 3) {
tx += 0.02;
let noiseFactor = noise(tx, ty);
drawCircle(x, y, noiseFactor);
}
}
}
function draw() {}
function drawCircle(newX, newY, newNoise) {
push();
translate(newX * newNoise * 4, newY * newNoise * 4);
circle(0, 0, newNoise * 10);
pop();
}
I am deeply confused by what will happen with this one - I know that it is using noise and creating a grid. What is getting my stuck is that the noise is being used on the diameter size variable of the circle, which does not really work in my mind.
Ok - two things have happened, I have run the sketch and went back to the p5 reference page for translate. I have worked with noise displacement methods in touchDesigner and was not surprised by the result of this sketch because of that. I do not fully understand what is happening with the coordinate system on a level I can precisely describe, but I am not in the same ballpark, mentally speaking.
Decode 4, annotated in below block of code, changed
/*
Inspired by Vera Molnár's Un, deux, trois
Based on a translation from Generative Artistry:
<https://generativeartistry.com/tutorials/un-deux-trois/>
*/
function setup() {
createCanvas(windowWidth, windowHeight);
strokeCap(ROUND);
strokeWeight(4);
}
function draw() {
background(255);
let step = min(width / 15, height / 15);
//grid formation, along with rules to draw different lines per certain y-values
for (let y = step; y < height - step; y += step) {
for (let x = step; x < width - step; x += step) {
if (y < height / 3) {
drawLine(x, y, step, [0.5]);
} else if (y < (height / 3) * 2) {
drawLine(x, y, step, [0.2, 0.8]);
} else {
drawLine(x, y, step, [0.1, 0.5, 0.9]);
}
}
}
noLoop();
}
//custom line function in which rotation and a shift the coordinate system happens twice. The final varible is the actual draw variables for the line.
function drawLine(_x, _y, _step, positions) {
push();
translate(_x + _step / 2, _y + _step / 2);
rotate(random(5));
translate(-_step / 2, -_step / 2);
for (let i = 0; i <= positions.length; i++) {
line(positions[i] * _step, 0, positions[i] * _step, _step);
}
pop();
}
function windowResized() {
resizeCanvas(windowWidth, windowHeight);
}
I know for sure this is going to draw lines in a grid formation and that after a certain point, it will be drawing lines in groups. I have a feeling about this because of the positions variable in the line function, and the arrays of positions.
I was not far off! I forgot about the rotation, though. While I did predict close to what this does, I am very confused by it still.
I sort of did this week’s assignment with my recode last week, and I wanted to keep going with that.
Terminal Scavenger Hunt