vectors
Homework
Coding Sketch: Vector Math
Experiment with vector math in p5.
This is to develop technical facility, not artistic expression.
Readings
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);
}
}
}