Using p5*js, create a drawing machine. We are drawing on the legacy of artists working in the branch of creative coding called generative art, including artists such as Vera Molnar, Casey Reas, Joan Truckenbrod, Rafael Rozendaal, and Zach Lieberman.
Your drawing machine is a compositional system built using the foundational technical elements of this semester.
For loops are a fundamental structure of create code that allow us to repeat a process like drawing a shape, but vary its position or color. We do this by using the structuring variable inside the for loop inside of drawing functions like rect() or fill(). A standard and reliable way to use a for loop is to nest one for loop inside another to create a grid of shapes. This provides you with a regular structure into which you will introduce variation.
Global variables are declared variables at the top of your sketch which allow you to tune your drawing machine. Think of this like your artist control panel. These variables must be integrated into your code in the draw loop to create significant and meaningful visual changes in how your drawing machine operates. noiseScale will control the effect of the noise() function. spacing may control the distance in pixels between each shape. numShapes may control the number of shapes in each row and column of a nested for loop drawing a grid. sizeMin and sizeMax might work together with the random variable to assign different size values to a shape with a range (e.g. let w = random(sizeMin,sizeMax); circle(x,y,w);).
Randomness will use the random() and/or noise() function to introduce non-linear or unexpected variation into how your shapes are drawn. You may randomize the color palette by declaring a variable let r = random(100,150) and using that as the red value in fill (e.g. fill(r,100,0)). You may offset the x position of each shape in your grid by declaring a variable let xOffset = random(-10,10) and adding that to the x position of each shape your drawing machine draws (e.g. circle(x+xOffset,y,w)).
Once you've gotten your drawing machine up and running, tune your drawing machine by experimenting with the global variables you've created. You may be inspired to go back and add other elements to your machine.
Ultimately, you will decide on a single image your drawing machine has created. Use randomSeed() and/or noiseSeed to "lock in" those. The idea here is challenge yourself to make more and more discerning artistic decisions.
requirements
use at least one for loop. Some A-level projects may use only one, but it's very likely you will need to use two or more for loops, nested or otherwise.
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(). In other words, no animation.
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
no WEBGL or 3D.
submission.
Submit both your p5.js URL as well as your exported image using save() at the very bottom of your draw loop. Note, if you use save without noLoop(), p5 will try to export images every frame of video!
Homework
Tutorial
Screenings
Examples
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);
}
}
}