Skip to content
Permalink
Browse files

Added spiderweb.

  • Loading branch information...
jdeurt committed Nov 30, 2019
1 parent d8e6148 commit 31aca73bf13b99db90b9e9cc1211f11da8129386
Showing with 211 additions and 0 deletions.
  1. +126 −0 stuff/spiderweb/declarations.js
  2. +29 −0 stuff/spiderweb/index.html
  3. +56 −0 stuff/spiderweb/web.js
@@ -0,0 +1,126 @@
/* Declarations */

function init() {
window.ctx = document.querySelector("canvas").getContext("2d");
}

function resize() {
const canvas = document.querySelector("canvas");

window["WIDTH"] = window.innerWidth;
window["HEIGHT"] = window.innerHeight;

canvas.setAttribute("width", window.innerWidth);
canvas.setAttribute("height", window.innerHeight);
}

class Line {
constructor(xPos, yPos) {
this.xPos = xPos;
this.yPos = yPos;
this.endXPos = this.xPos;
this.endYPos = this.yPos;
this.rotation = 0;

ctx.strokeStyle = "white";
ctx.lineWidth = 3;
}

_reset() {
ctx.strokeStyle = "black";
ctx.lineWidth = 3;

ctx.beginPath();
ctx.moveTo(this.xPos, this.yPos);
ctx.lineTo(this.endXPos, this.endYPos);
ctx.closePath();
ctx.stroke();

ctx.strokeStyle = "white";
}

getLength() {
return Math.sqrt(
Math.pow(this.endXPos - this.xPos, 2)
+ Math.pow(this.endYPos - this.yPos, 2)
);
}

getPos() {
return {
start: {
x: this.xPos,
y: this.yPos
},
end: {
x: this.endXPos,
y: this.endYPos
}
};
}

getRotation() {
return this.rotation * (180 / Math.PI);
}

setRotationRel(relDegrees) {
const relRadians = relDegrees * (Math.PI / 180);

this.rotation = this.rotation + relRadians;

return this;
}

setRotation(degrees) {
this.rotation = degrees * (Math.PI / 180);

return this;
}

draw(xDistance, yDistance) {
this._reset();

this.endXPos += xDistance;
this.endYPos += yDistance;

ctx.beginPath();
ctx.moveTo(this.xPos, this.yPos);
ctx.lineTo(this.endXPos, this.endYPos);
ctx.closePath();
ctx.stroke();

return this;
}

drawFromRot(distance) {
this._reset();

const xDistance = Math.cos(this.rotation) * distance;
const yDistance = Math.sin(this.rotation) * distance;

this.draw(xDistance, yDistance);

return this;
}

moveRel(xDistance, yDistance) {
this._reset();

this.xPos += xDistance;
this.yPos += yDistance;
this.endXPos += xDistance;
this.endYPos += yDistance;

ctx.beginPath();
ctx.moveTo(this.xPos, this.yPos);
ctx.lineTo(this.endXPos, this.endYPos);
ctx.closePath();
ctx.stroke();

return this;
}
}

function random(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
@@ -0,0 +1,29 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Fractal</title>

<style>
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
canvas {
background: black;
margin: 0;
}
</style>
</head>
<body>
<canvas></canvas>

<script src="declarations.js"></script>
<script src="web.js"></script>
</body>
</html>
@@ -0,0 +1,56 @@
init();

resize();

const rotations = {
topLeft: 45,
topRight: 135,
bottomLeft: -45,
bottomRight: -135
};

const lines = {
topLeft: new Line(0, 0),
top: new Line(WIDTH / 2, 0),
topRight: new Line(WIDTH, 0),
right: new Line(WIDTH, HEIGHT / 2),
bottomLeft: new Line(0, HEIGHT),
bottom: new Line(WIDTH / 2, HEIGHT),
bottomRight: new Line(WIDTH, HEIGHT),
left: new Line(0, HEIGHT / 2)
};

lines.topLeft.setRotation(45);
lines.top.setRotation(90);
lines.topRight.setRotation(135);
lines.right.setRotation(180);
lines.bottomLeft.setRotation(-45);
lines.bottom.setRotation(-90);
lines.bottomRight.setRotation(-135);
lines.left.setRotation(0);

window.setInterval(() => {
for (let lineId in lines) {
const target = lines[lineId];
const length = target.getLength();
const position = target.getPos();
const rotation = target.getRotation();

if (length >= 100) {
if (position.end.x < 0 || position.end.y < 0 || position.end.x > WIDTH || position.end.y > HEIGHT) {
target.setRotation(rotation - 179);
}

const possibleRotations = [-45, -30, -15, 15, 30, 45];
const relativeRotation = possibleRotations[random(0, possibleRotations.length - 1)];

const oldRotation = target.getRotation();
const oldPos = target.getPos();

lines[lineId] = new Line(oldPos.end.x, oldPos.end.y);
lines[lineId].setRotation(oldRotation + relativeRotation);
}

target.drawFromRot(1);
}
}, 1);

0 comments on commit 31aca73

Please sign in to comment.
You can’t perform that action at this time.