Welcome to my website! I made this website from scratch using Prossesing js and HTML.
Prossesing js is a computer programing language that lets you draw simple shapes and animate them. HTML is what most websites are made with. It stands for hypertext markup language. "from scratch" means that I am not using a "canned website", and all of the graphics are made from simple geometric shapes such as rectangles and ellipses. Here is the dead snake from snakey, and the code to draw it:
 |
fill(115, 42, 42);
noStroke();
rect(100, 400, 600, 50);
fill(0, 255, 0);
quad(200, 400, 220, 400, 180, 450, 160, 450);
quad(250, 400, 270, 400, 230, 450, 210, 450);
quad(250 + 50, 400, 270 + 50, 400, 230 + 50, 450, 210 + 50, 450);
quad(250 + 100, 400, 270 + 100, 400, 230 + 100, 450, 210 + 100, 450);
rect(360, 450, 16, 30);
ellipse(368, 480, 16, 16);
stroke(0);
rect(118, 490, 40, 40);
noStroke();
rect(130, 400, 17, 100);
fill(0);
text("x x", 123, 520);
fill(255, 0, 0);
rect(130, 531, 15, 20);
|
To do things that might look simple, like turning the player in coincatch, or making the worm squirm, I had to use math like trigonometry. For the enemies in coincatch I had to use dot products (I don't really know what that is, I just copied it from the internet and made it work):
var x = this.x;
var y = -this.y;
var ax = 100;
var ay = 0;
var playerX = player.x;
var playerY = -player.y;
var bx = playerX - x;
var by = playerY - y;
var isNegative = ax * by - ay * bx < 0
vecs = [x - playerX, y - playerY];
vec0 = [100, 0];
var dot = (vecs[0] * vec0[0]) + (vecs[1] * vec0[1]);
vecs[0] = sq(vecs[0]);
vecs[1] = sq(vecs[1]);
vec0[0] = sq(vec0[0]);
vec0[1] = sq(vec0[1]);
var angle = (
acos(
dot / (sqrt(vecs[0] + vecs[1]) * sqrt(vec0[0]+vec0[1]))
) + toRad(180)
)%(PI*2);
if(isNegative){
angle = -angle;
}else{
angle = +angle;
}
It also takes (more simple) math to calculate if the mouse is inside of a button when it is clicked:
if(this.type === "circ"){
return dist(mouseX, mouseY, this.x, this.y) < (this.size)/2;
}else if(this.type === "rect"){
isInsideX = mouseX > this.x - this.w/2 && mouseX < this.x + this.w/2;
isInsideY = mouseY > this.y - this.h/2&& mouseY < this.y + this.h/2;
return isInsideX && isInsideY;
}
I made sound effects using Garage band, and recordings that I made using ordinary household objects such as pots and coins. To save the high scores in snakey and coincatch I had to learn how to use cookies.
About