Using p5*js, create a drawing machine. We are drawing on the legacy of people working in creative coding of generative art, including artists such as Vera Molnar, Casey Reas, Joan Truckenbrod, Rafael Rozendaal, and Zach Lieberman. Think of this as a compositional system -- be able to change variables to change the kind of outputs you get. You can visualize whatever you want, but try not to simply copy and paste code from various sketches… understanding what the code is doing is super important!
You should aim to create a system that can produce at least 1 image you want to present (locked in with either randomSeed or noiseSeed). You can of course have more that you like!
let w = 800;
let h = 800;
let slice = 17;
let spacing;
let rand = 10; // higher is more irregular, lower is more regular
let conc = 5; // number of shapes drawn in each cell
let inner = false; // is the most inner shape drawn?
let thresh = 0.35; // number out of 1 that sets the threshhold for the random number generator (0.0-1.0) for whether a shape is drawn or not.
function setup() {
createCanvas(w, h);
spacing = width / slice;
noFill();
}
function draw() {
background(255);
//step 1 how to slice up grid
// line(100,0,100,height);
// line(100*2,0,100*2,height);
// line(100*3,0,100*3,height);
// line(0,100,width,100*2);
// line(0,100*2,width,100*2);
// line(0,100*3,width,100*3);
//step 2 slice up grid but with for loop
// for(i=1;i<slice+1;i++){
// line(i*spacing,0,i*spacing,height);
// line(0,i*spacing,width,i*spacing);
// }
//step 3 draw top row of quads with random verteces
// for (i = 0; i < slice; i++) {
// let x1 = i * spacing + random(rand);
// let y1 = 0 + random(rand);
// let x2 = i * spacing + spacing + random(rand);
// let y2 = 0 + random (rand);
// let x3 = i * spacing + spacing + random(rand);
// let y3 = 0 + spacing + random (rand);
// let x4 = i * spacing + random (rand);
// let y4 = 0 + spacing + random(rand)
// quad(x1, y1, x2, y2, x3, y3, x4, y4);
// }
//step 4 nested for loop -- draw full grid of quads. Wherever there was a zero above, replace it with d * spacing
// for (d = 0; d < slice; d++){
// for (i = 0; i < slice; i++) {
// let x1 = i * spacing + random(rand);
// let y1 = d * spacing + random(rand);
// let x2 = i * spacing + spacing + random(rand);
// let y2 = d * spacing + random (rand);
// let x3 = i * spacing + spacing + random(rand);
// let y3 = d * spacing + spacing + random (rand);
// let x4 = i * spacing + random (rand);
// let y4 = d * spacing + spacing + random(rand)
// quad(x1, y1, x2, y2, x3, y3, x4, y4);
// }
// }
// step 5 create concric effect. Nest a for loop inside the nested for loop. Create the inc variable that scales our verteces
// for (d = 0; d < slice; d++){
// for (i = 0; i < slice; i++) {
// let x1 = i * spacing + random(rand);
// let y1 = d * spacing + random(rand);
// let x2 = i * spacing + spacing + random(rand);
// let y2 = d * spacing + random (rand);
// let x3 = i * spacing + spacing + random(rand);
// let y3 = d * spacing + spacing + random (rand);
// let x4 = i * spacing + random (rand);
// let y4 = d * spacing + spacing + random(rand)
// for (c = 0; c < conc+inner; c++) {
// let inc = ((spacing/2) / conc) * c;
// quad(
// x1 + inc,
// y1 + inc,
// x2 - inc,
// y2 + inc,
// x3 - inc,
// y3 - inc,
// x4 + inc,
// y4 - inc
// );
// }
// }
// }
// //step 6 randomize all verteces while encouraging increasingly smaller squares
// for (d = 0; d < slice; d++) {
// for (i = 0; i < slice; i++) {
// for (c = 0; c < conc + inner; c++) {
// let inc = (spacing / 2 / conc) * c;
// let x1 = i * spacing + random(rand);
// let y1 = d * spacing + random(rand);
// let x2 = i * spacing + spacing + random(rand);
// let y2 = d * spacing + random(rand);
// let x3 = i * spacing + spacing + random(rand);
// let y3 = d * spacing + spacing + random(rand);
// let x4 = i * spacing + random(rand);
// let y4 = d * spacing + spacing + random(rand);
// quad(
// x1 + inc,
// y1 + inc,
// x2 - inc,
// y2 + inc,
// x3 - inc,
// y3 - inc,
// x4 + inc,
// y4 - inc
// );
// }
// }
// }
// step 7 // introduce random choice to draw or not draw any given quad
for (d = 0; d < slice; d++) {
for (i = 0; i < slice; i++) {
for (c = 0; c < conc + inner; c++) {
let roll = random(1); // roll variable is like a 100 sided die that determines whether the shape is drawn or not. compared to the thresh variable that can be adjusted in the global variables above.
if (roll > thresh) {
let inc = (spacing / 2 / conc) * c;
let x1 = i * spacing + random(rand);
let y1 = d * spacing + random(rand);
let x2 = i * spacing + spacing + random(rand);
let y2 = d * spacing + random(rand);
let x3 = i * spacing + spacing + random(rand);
let y3 = d * spacing + spacing + random(rand);
let x4 = i * spacing + random(rand);
let y4 = d * spacing + spacing + random(rand);
quad(
x1 + inc,
y1 + inc,
x2 - inc,
y2 + inc,
x3 - inc,
y3 - inc,
x4 + inc,
y4 - inc
);
}
}
}
}
noLoop();
}
let bg;
let fg;
let x = 200; // declare x w. starting point
let y = 200; // declare y. w. starting point
let step = 100; // maximum step distance
let numPoints = 1000;
function setup() {
createCanvas(400, 400);
noLoop();
noFill();
strokeWeight(2);
bg = random(0, 100);
fg = random(200, 255);
}
function draw() {
background(bg);
stroke(fg);
beginShape();
for (let i = 0; i < numPoints; i++) {
x += random(-step, step);
x = constrain(x, 0, width);
y += random(-step, step);
y = constrain(y, 0, height);
curveVertex(x, y);
}
endShape();
}
let displacement = 2;
function setup() {
createCanvas(400, 400);
noLoop();
rectMode(CENTER); // changes how squares / rects are drawn. it interprets x and y as the center.
}
function draw() {
background(220);
for (let y = 0; y < height; y += 40) {
for (let x = 0; x < width; x += 40) {
let xOffset = random(-displacement, displacement);
let yOffset = random(-displacement, displacement);
for (let i = 0; i < 5; i++) {
square(x + xOffset, y + yOffset, 40 - i * 10);
}
}
}
}
let noiseScale = 0.002;
let bgRes = 10; // number of pixels in each strip of background hombre
let fgVerts = 5; // number of vertices in foreground shape
let numFgShapes = 50; // number of shapes in the foreground
let fgMargin = 100; // number of pixels at top bottom left right
function setup() {
createCanvas(800, 400);
colorMode(HSB); // HSB vs RGB
noLoop();
noiseSeed(28); // noiseSeed() or randomSeed() are how we *lock in* variations
randomSeed(3234234);
}
function draw() {
// background
strokeWeight(bgRes); // each line has a thickness of the bgRes variable
for (let x = 0; x < width * 2; x += bgRes) {
let n = noise(x * noiseScale); // noise() returns a value between 0 - 1
stroke(n * 360, 30, 100); // HSB color: hue is color in a range from 0 - 360, saturation, brightness
line(x, 0, x - width, height);
}
noStroke();
for (let j = 0; j < numFgShapes; j++) {
noFill();
stroke(j * 5 + 75, 75, 100);
// draws foreground shape
beginShape();
for (let i = 0; i < fgVerts; i++) {
curveVertex(
random(fgMargin, width - fgMargin),
random(fgMargin, height - fgMargin)
);
}
endShape();
}
}
// use at least one for loop. Some A-level projects may use only one, but it's very likely you will need to us a nested for loop or more.
// use at least global 4 variables that can be changed to influence the outcome of your generative drawing machine
// must be a static image -- use noLoop() DONE
// use random() and/or noise()
// use randomSeed() or noiseSeed() and select one final version of your compositions
// you are present for critique and participate in others' critique
let jitter = 25;
// declare these but don't initialize them
let x1, y1, x2, y2, x3, y3;
let sMin = 0; // min subtraction
let sMax = 100; // max subtraction from our points
let spacing = 2; // pixel space between each triangle
let margin = 0; // margin in pixels
function setup() {
createCanvas(600, 600);
noLoop();
noFill();
x1 = width / 2 + random(-jitter, jitter); //x1
y1 = margin + random(-jitter, jitter); //y1
x2 = width - margin + random(-jitter, jitter); //x2
y2 = height - margin + random(-jitter, jitter); //y2
x3 = margin + random(-jitter, jitter); //x3
y3 = height - margin + random(-jitter, jitter); //y3
}
function draw() {
background(0, 128, 200);
for (let sFactor = sMin; sFactor < sMax; sFactor += spacing) {
let g = map(sFactor, sMin, sMax, 0, 255); // takes 5 args: 1 is the value to be transformed, 2: original min, 3: original max, 4: new minimum and 5: new max
stroke(0, g, 200);
triangle(
x1,
y1 + sFactor,
x2 - sFactor,
y2 - sFactor,
x3 + sFactor,
y3 - sFactor
);
}
}
let spacing;
const num = 100;
function setup() {
createCanvas(400, 400);
spacing = width / num;
}
function draw() {
background(255);
let jitter = 0;
let topJit = 0;
let botJit = 0;
for (let i = 0; i < num; i++) {
// line(i*spacing,0,i*spacing,height);
line(
i * spacing + topJit,
0 + jitter,
i * spacing + botJit,
height - jitter
);
jitter = jitter + random(-10, 10); // change these values to see different tendencies in the visua result
topJit = topJit + random(-5, 5); // change these values to see different tendencies in the visua result
botJit = botJit + random(-2.5, -2.5); // change these values to see different tendencies in the visua result
}
noLoop();
}
const numSquares = 17;
let size;
const margin = 20; // margin size on left and right in pixels
let offset;
const conSquares = 5; // number of squares in each cell of the grid
let conInc; // pix incrementing value for shrinking squares
const t = 5; // probability out of 20 that a square is drawn
function setup() {
stroke(0.5);
createCanvas(700, 700);
size = (width - margin * 2) / numSquares; // size = total width / number of squares
offset = size / 2 + margin;
noFill();
rectMode(CENTER);
conInc = size / conSquares;
}
function draw() {
background(255);
let jitter = 0;
for (let y = 0; y < numSquares; y++) {
for (let x = 0; x < numSquares; x++) {
for (let s = 0; s < 5; s++) {
let a = random(20);
if (a > t) {
square(
jitter + offset + size * x,
jitter + offset + y * size,
size - s * conInc
); // try deleting one of the jitter modifiers and gettign a different result
}
jitter += random(-10, 10); // change this value.
}
}
}
noLoop();
}
let res = 10;
let w; // width of our squares
function setup() {
createCanvas(400, 400);
noStroke();
w = width / res;
randomSeed(7); // Use this function to "lock in" the variation your randomness generates. Change this number to experiment with different variations. Use this in your sketch to find the variation you want to use for your project.
}
function draw() {
for (x = 0; x < res; x++) {
for (y = 0; y < res; y++) {
let c = random(255);
fill(c);
square(x * w, y * w, w);
}
}
noLoop();
}
let size = 200;
let spacing = 2;
let drift = 0;
let driftStep = 10;
let drawMode = 0; // mode 0 is fill and mode 1 is stroke
function setup() {
createCanvas(800, 800);
noLoop();
noStroke();
rectMode(CENTER);
}
function draw() {
background(255);
for (let y = size / 2; y < height; y += size) {
for (let x = size / 2; x < width; x += size) {
drift = 0;
for (let s = 0; s < size; s += spacing) {
let g = size / spacing;
if (drawMode == 0) {
fill(255 - (s / g) * 128);
} else {
stroke(255 - (s / g) * 128);
}
console.log(255 - (s / g) * 255);
drift += random(-driftStep, driftStep);
square(x + drift, y + drift, size - s);
}
}
}
}
const numSquares = 17;
let size;
const margin = 20; // margin size on left and right in pixels
let offset;
const conSquares = 5; // number of squares in each cell of the grid
let conInc; // pix incrementing value for shrinking squares
const range = 100; // random circle range.
const leap = 10;
function setup() {
stroke(0.5);
createCanvas(700, 700);
size = (width - margin * 2) / numSquares; // size = total width / number of squares
offset = size / 2 + margin;
noFill();
rectMode(CENTER);
conInc = size / conSquares;
}
function draw() {
background(255);
let t = range / 2; // probability out of 100 that a square is drawn
for (let y = 0; y < numSquares; y++) {
for (let x = 0; x < numSquares; x++) {
for (let s = 0; s < 5; s++) {
let a = random(range);
if (a > t) {
circle(offset + size * x, offset + y * size, size - s * conInc); // t
} else {
// t
}
t += random(-leap, leap); // modify t by adding or subtracting a negative between leap and negative leap
t = constrain(t, 0, range);
}
}
}
noLoop();
}
function mousePressed() {
loop();
}
const numSquares = 17;
let size;
const margin = 20; // margin size on left and right in pixels
let offset;
const conSquares = 5; // number of squares in each cell of the grid
let conInc; // pix incrementing value for shrinking squares
const t = 5; // probability out of 20 that a square is drawn
function setup() {
stroke(0.5);
createCanvas(700, 700);
size = (width - margin * 2) / numSquares; // size = total width / number of squares
offset = size / 2 + margin;
noFill();
rectMode(CENTER);
conInc = size / conSquares;
}
function draw() {
background(255);
for (let y = 0; y < numSquares; y++) {
for (let x = 0; x < numSquares; x++) {
for (let s = 0; s < 5; s++) {
let a = random(20);
if (a > t) {
square(offset + size * x, offset + y * size, size - s * conInc);
}
}
}
}
noLoop();
}
let r;
let g;
let b;
let w = 10;
function setup() {
createCanvas(800, 800);
strokeWeight(2);
}
function draw() {
noLoop();
background(0);
for (let y = 20; y < height; y += 5) {
for (let x = 20; x < width; x += 5) {
let c = random(0, 100); // random number that determines whether color 1 or 2
if (c > 50) {
// color 1
r = random(100, 150);
g = random(0, 50);
b = random(200, 255);
} else {
// color 2
r = random(0, 25);
g = random(175, 225);
b = random(150, 200);
}
stroke(r, g, b);
line(x, y, x + w, y + w);
}
}
}
let size = 4; // size of circle
let r = 128; // right in the middle 0-255
let step = 60; // random step size;
function setup() {
createCanvas(800, 800);
noLoop();
}
function draw() {
background(0);
for (let x = size / 2; x < width; x += size) {
for (let y = size / 2; y < height; y += size) {
r += random(-step, step);
//code the keeps this within 0 and 255
r = constrain(r, 0, 255);
// r = random(255);
fill(r);
circle(x, y, size);
// console.log(r);
}
}
}