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.
let w = 10;
let s = 12;
let margin = 20;
let r = 127;
let g = 127;
function setup() {
createCanvas(400, 400);
noStroke();
noLoop();
}
function draw() {
background(220,0,100);
let index = 0;
for (let x = 20; x < width - margin - w; x += w + s) {
for (let y = 20; y < height- margin - w; y += 20) {
// % modulo ! remainder of a division operatio
w+= random(-5,5);
if(w > 20){
w = w;
}
if (w < 0){
w = 0;
}
if (index % 2){
fill(r,0,100);
}
else {
fill(0,g,200);
}
let ran = random(100);
if (ran>50){
r+= random(5,5);
r = constrain(r, 100, 150);
}
else{
g+=random(5,5);
g = constrain(g,100,200);
}
if (y > height/4 ){
square(x, y, w);
}
else {
circle(x + w/2 ,y + w/2,w)
}
}
console.log(index);
index++;
}
}
let jump = 20;
function setup() {
createCanvas(400, 400);
noLoop();
noFill();
}
function draw() {
background(220);
for (let j = 0; j < 50; j++) {
// number of lines
beginShape();
let x = random(width);
let y = random(height);
for (let i = 0; i < 10; i++) {
// vertex or point in the line
x += random(-jump, jump);
if (x > width) {
x = width;
}
if (x < 0) {
x = 0;
}
y += random(-jump, jump);
if (y > height) {
y = height;
}
if (y < 0) {
y = 0;
}
curveVertex(x, y);
}
endShape();
}
}
let margin = 11;
let xSpacing = 4;
let length = 40;
let ySpacing = length + 10;
let gs = 0; // greyscale
function setup() {
createCanvas(400, 400);
strokeWeight(2);
noLoop();
//randomSeed(50); // specify the seed with which all randomness is generated
}
function draw() {
background(128);
for (let y = margin; y < height - margin; y += ySpacing) {
xSpacing = random(1, 10);
strokeWeight(1 + xSpacing / 4);
for (let x = margin; x < width - margin; x += xSpacing) {
stroke(gs, 0, 100);
length = random(30, 50);
line(x, y, x, y + length); // x1, y1, x2,y2
gs += random(-10, 10); // add one! gs += 1; gs = 1 + 1;
if (gs > 255) {
// if conditions inside the parentheses are met
// this code runs
gs = 255;
}
if (gs < 0) {
gs = 0;
}
}
}
}
let num = 100; // number of circles in a row
let spacing; // declare but not define
// - minus
function setup() {
createCanvas(400, 400);
spacing = width / num;
noLoop();
noStroke();
}
function draw() {
background(0);
// index based approacch
// j keeps track of our horizontal rows
for (let j = 0; j < num; j++) {
// i keeps track of our vertical columns
let vShift = 0;
let ran = random(0, 100);
if (ran > 50) {
vShift = random(-20, 20);
}
for (let i = 0; i < num; i++) {
let r = random(0, 100);
if (r > 60) {
circle(
random(-10, 10) + i * spacing + spacing / 2,
j * spacing + spacing / 2 + vShift,
spacing
);
}
}
}
}
let num = 50;
let spacing;
let noiseScale = 0.02;
let w; // width of square
function setup() {
createCanvas(600, 600);
spacing = width / num;
w = spacing;
noLoop();
noStroke();
}
function draw() {
background(0);
for (j = 0; j < num; j++) {
for (let i = 0; i < num; i++) {
// fill(random(0,255));
// noise by default gives values between 0 and 1
let n = noise(i * noiseScale, j * noiseScale);
// fill(n * 255);
square(w / 2 + spacing * i, w / 2 + spacing * j, w * n);
}
}
}
let numCols = 200; // number of columns
let numRows = 40; // number of rows
let xSpacing, ySpacing;
let noiseScale = 0.03;
// - minus
function setup() {
createCanvas(400, 400);
xSpacing = width / numCols;
ySpacing = height / numRows;
noLoop();
}
function draw() {
background(255);
for (let j = 0; j < numRows; j++) {
for (let i = 0; i < numCols; i++) {
let n = noise(i * noiseScale, j * noiseScale);
let x1 = xSpacing * i;
let y1 = ySpacing * j + n * ySpacing;
let x2 = xSpacing * i;
let y2 = ySpacing * (j + 1) - n * ySpacing;
line(x1, y1, x2, y2);
}
}
}
let ySpacing = 25;
let xSpacing = 35;
let startW = 50; // width of first square
function setup() {
createCanvas(600, 600);
noLoop();
}
function draw() {
background("#F0D3F7");
stroke("#B98EA7");
fill("#A57982");
let i = 0; // index variable
for (let y = 10; y < height; y += ySpacing) {
for (let x = 0; x < width; x += xSpacing) {
let sw = random(1, 20); // variable to hold a random strokeWeight
strokeWeight(sw);
square(x, y, startW - i * 0.3); // x, y, w // square or a rectangle -- x and y are top left point
i++; // the same as writing 'i=i+1' or 'i+=1'
}
}
}
let ySpacing = 25;
let xSpacing = 35;
let startW = 50; // width of first square
function setup() {
createCanvas(600, 600);
noLoop();
noStroke();
}
function draw() {
background("#08010A");
let i = 0; // index variable
for (let y = 10; y < height; y += ySpacing) {
for (let x = 0; x < width; x += xSpacing) {
let r = random(100, 150);
let g = 100;
let b = random(0, 255);
let a = random(0, 255);
fill(r, g, b, a);
square(x, y, startW - i * 0.3); // x, y, w // square or a rectangle -- x and y are top left point
i++; // the same as writing 'i=i+1' or 'i+=1'
}
}
}
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);
}
}
}
}
function setup() {
createCanvas(400, 400);
noLoop();
rectMode(CENTER);
}
function draw() {
background(220);
for (let x = 10; x < width; x += 20) {
for (let y = 10; y < height; y += 20) {
let w = 20;
let toggle = random(0, 1);
if (toggle > 0.5) {
circle(x, y, w); // if condition is true, run this
} else {
w = random(20);
square(x, y, w); // if it is false, run this
}
}
}
}
function setup() {
createCanvas(400, 400);
noLoop();
noFill();
}
function draw() {
background(220);
for (let j = 0; j < 10; j++) {
// number of lines
beginShape();
for (let i = 0; i < 10; i++) {
// vertex or point in the line
let x = random(width);
let y = random(height);
curveVertex(x, y);
}
endShape();
}
}
