Get started on the following project. We will take studio time on this in class.
Create a multipage website around a hobby or a passion. A set of recipes, some photography you've done, a game or comic you really like, reviews of restaurants. Nothing serious -- remember, the internet used to be fun.
Multipage means you have at least two HTML files that are linked together. Consider how people will navigate between them.
You can incorporate GIFs and other media to make your website have a 90's feel if you like.
// global scope !
// var is the old way of declaring variables. it still works !
// the new way: is to use either 1) const - if the variable does not change. it is constant!
// 2) we can also use the keyword let -- we use this if the variable is going to change.
let w = 20; // width of circles
let x = 20; // x value or horizontal placement of circles
let y = 20; // vertical distance between circles
let offset = 20;
let num = 20; // number of circles in my row
function setup() {
createCanvas(400, 400);
}
function draw() {
background(220);
for (let s = 0; s < num; s = s + 1) {
for (let i = 0; i < num; i = i + 1) {
circle(offset + i * x, offset + s * y, w);
}
}
}
// global variable control panel
let padding = 10;
let spacing = 2;
let margin = 70; // margin between top and left of marks, bottom and right
let yPadding = 1;
let yJitter = 2; // maximum randomness in the yPadding
function setup() {
createCanvas(400, 400);
noLoop();
}
function draw() {
background(255);
// row 1
stroke(0);
// row code
for (let y = margin; y < height - margin; y += yPadding + random(yJitter)) {
let g = map(y, margin, height - margin, 0, 255); // take y (margin, height - margin) -> (0,255)
stroke(g);
// column code
for (
let x = margin + y * 0.5;
x < width - margin - 30 - spacing;
x += 20 + padding + spacing
) {
line(x, y, x + 10, y + 10);
line(x + 10 + spacing, y + 10, x + 20 + spacing, y);
}
}
}
//
let num = 100; // give a certain number of shapes
// 10 shapes per row, and ten shapes per column
let spacing;
function setup() {
createCanvas(400, 400);
noLoop();
spacing = width / num;
noFill();
}
function draw() {
background(255);
// and adjust the spacing between shapes vertically;
for (let y = spacing / 2; y < height; y += spacing + 20) {
// adjust the spacing between shapes horizontally
for (
let x = spacing / 2 + random(spacing / 2);
x < width - spacing / 2;
x += random(spacing * 2)
) {
// adjust the width of the shape
circle(x, y, spacing);
}
}
}
// global variables
let margin = 150; // number of margin pixels on left and right (top and bottom) of canvas
let radius = 10; // radius of shape
let spacing; // in the global scope so that I can use it in the draw loop later.
function setup() {
createCanvas(800, 800);
let w = width - margin * 2;
let num = w / (radius * 2); // the number of circles insides the margins;
let rnd = floor(num); // total number of complete circles that fit inside the margins
let remainder = (num - rnd) * radius * 2;
spacing = remainder / num + radius * 2;
noLoop();
noStroke();
}
function draw() {
background(255);
let o = 128; // opacity;
let g = random(0, 255);
for (let y = margin + radius; y <= height - (margin + radius); y += spacing) {
let r = random(100, 255);
// for loop that changes the x position of this drawing algorithm
for (
let x = margin + radius;
x <= width - (margin + radius);
x += spacing
) {
let b = random(0, 100);
o += random(-30, 30);
o = constrain(o, 0, 255); // keep 1 with bounds min 2 and max 3
fill(r, g, b, o);
// draws circles
circle(x, y, radius * 2 + random(50)); // radius * 2 = diameter
}
}
}
// make our own variables: let, var, const
// let is modern in JS
// var is older way
// const is constant and so you can't change it
// use let!
// declare global variables (not in use yet!)
let d = 40; // diameter of my circle
let r = d / 2; // radius of the circle
let xSpacing = 50; // pixels between the center of each circle HORIZONTALLY
let ySpacing = 0; // pixels between the center of each circle VERTICALLY
let rows = 100;
let cols = 10;
let yD = 0.1; // the difference in ySpacing
let sw = 0.01;
function setup() {
createCanvas(400, 400);
console.log(d);
noFill();
stroke("rgb(94,255,0)");
noLoop(); // sets p5 so the draw loop only runs one
}
function draw() {
background(0);
// index style increments by 1
// book style increments by something concrete in the sketch (like x position);
// i is the index for the COLUMN loop number
// j is the index for the ROW loop number
// start/init; check to see if the code loops again; changes!
for (let j = 0; j < rows; j++) {
strokeWeight(sw);
sw+= 0.5;
for (let i = 0; i < cols; i++) {
line(xSpacing * i - r, ySpacing * j - r, r + xSpacing * i, ySpacing * j + r);
circle(xSpacing * i, ySpacing * j, d); //center x, center y,diameter
ySpacing+=yD;
}
}
}
let xSpacing = 12;
let ySpacing = 12;
let w = 10; // width of the shape
let g = 0; // g is greyscale!
let rows, cols; // declare the variables in a global scale, but don't define them. we can use them anywhere!
let numSquares;
let gD; // greyscale Delta
function setup() {
createCanvas(400, 400); // we can't use the "width" system variable until after createCanvas has been called
noLoop();
noStroke();
rows = floor((width - w) / xSpacing);
cols = floor((height- w) / ySpacing);
numSquares = rows * cols;
gD = 1 / numSquares * 255;
console.log(gD); // range between 1 and 1024
}
function draw() {
background(220);
for (let y = w; y < height - w; y += ySpacing) {
for (let x = w; x < width - w; x += xSpacing) {
fill(g,0,100);
square(x, y, w);
g+=gD;
}
}
}
let xD = 50; // spacing between x points
let layers = 50;
let pD = 5; // change in our p variable
function setup() {
createCanvas(400, 400);
noLoop();
noStroke();
}
function draw() {
background(255,0,100);
// top of canvas
for(let p = 0; p<layers;p+=pD){
let g = map(p,0,layers,0,255);
fill(50,g,200);
beginShape();
for(let x = -width/2; x<width+width;x+=xD){
let f = x/width * p;
let y = (width/2) - pow(f,2);
vertex(x,y);
}
endShape();
}
// bottom of the canvas
for(let p = 0; p<layers;p+=pD){
let g = map(p,0,layers,0,255);
fill(200,g,50);
beginShape();
for(let x = -width/2; x<width+width;x+=xD){
let f = x/width * p;
let y = (width/2) + pow(f,2);
vertex(x,y);
}
endShape();
}
}function setup() {
createCanvas(400, 400);
//noFill();
}
function draw() {
background(0);
let y = width / 2;
let yOffset = 0;
for (let i = 3; i < 20; i += 0.2) {
strokeWeight(6)
let c = map(i,3,20,0,255);
stroke(c)
fill(c)
beginShape();
for (let x = 0; x < width + width; x += 20) {
vertex(x-30, y + yOffset);
yOffset = pow((x / width) * i, 3);
}
endShape();
}
for (let i = 3; i < 20; i += 0.2) {
strokeWeight(6)
let c = map(i,3,20,0,255);
stroke(c)
fill(c)
beginShape();
for (let x = 0; x < width + width; x += 20) {
vertex(x-30, y - yOffset);
yOffset = pow((x / width) * i, 3);
}
endShape();
}
}
// quadrilateral nested for loop
// "book style for loop"
let sz = 100; // base size of shape
let spacing = 40; // base spacing between shapes
let offsetD = 5; // amount of change in offset
let y;
function setup() {
createCanvas(700, 700);
noFill();
y = 0;
noLoop();
}
function draw() {
background(240);
y += 20;
for (let i = 0; i < 50; i++){
let offset = i * 5;
stroke(i*5);
for (let x = 0; x < width-spacing; x+=sz/2){
quad(x, y + offset, x + sz, y - offset, x+sz, y + sz + offset, x, y + sz-offset);
offset+=offsetD;
}
}
}