You have now had five weeks to build the basics of your programming chops. You have learned how to use variables, conditionals, loops, and functions. You have learned how to use the p5.js library to create 2D graphics. You have learned how to use the p5.js web editor to share your work with others. Now it is time to put all of these skills together in a culminating project that you will present to the class.
Your project should be a creative coding sketch that uses the p5.js library to create a 2D graphic. You can use any of the concepts you have learned so far, but you should also try to incorporate at least one new concept that you have not used before. This could be a new p5.js function, a new programming concept, or a new creative coding technique.
Your project should be at least 30 lines of code, but it can be as long as you want. You should also include a brief description of your project, explaining what it does and how you created it.
You will present your project to the class in a 5-10 minute presentation. You should explain what your project does, how you created it, and what you learned from the process. You should also be prepared to answer questions from the class.
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();
}
}
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);
}
}
}
