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.
Examples
// 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
}
}
}