Cheatsheet

Typewriter Transition

@keyframes typing {
from { width: 0 }
to { width: 100% }
}

@keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: #b892ff; }
}

.typewriterdiv {
width: fit-content;
margin: auto;
}



Eyedropper API: Checking if API is supported

if (!window.EyeDropper) {
colorContainer.textContent =
'Your browser does not support the EyeDropper API";
return;
}


Audio Input with P5 js

let mic;
function setup() {
createCanvas(200, 200)
mic = new p5.AudioIn();
mic.start();
}

function draw() {
background(51);
let vol = mic.getLevel();
ellipse(height/2, width/2, vol*500, vol*500);
console.log('volume', vol);
}


Animated Scrolling Background (Final Game)

var bgImg;
var x1 = 0;
var x2;

var scrollSpeed = 2;

function preload(){
bgImg = loadImage("bg.png");
}

function setup() {
createCanvas(400, 400);

x2 = width;
}

function draw() {
image(bgImg, x1, 0, width, height);
image(bgImg, x2, 0, width, height);

x1 -= scrollSpeed;
x2 -= scrollSpeed;

if (x1 < -width){
x1 = width;

}
if (x2 < -width){
x2 = width;
}
}