Added rotating triangles

Added triangles which are animated in combination with window.requestAnimationFrame and are drawn directly to the canvas
2018-05-12 23:36:57 +02:00 · 2018-05-12 23:36:57 +02:00 · b87de3f8cc
commit b87de3f8cc
5 changed files with 138 additions and 0 deletions
--- a/index.html
+++ b/index.html
@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Canvas Playground</title>
+        <link rel="stylesheet" type="text/css" href="main.css" />
+        <script type="application/javascript" src="src/draw/point.js"></script>
+        <script type="application/javascript" src="src/draw/triangle.js"></script>
+        <script type="application/javascript" src="src/index.js"></script>
+    </head>
+    <body>
+        <canvas id='canvas'></canvas>
+    </body>
+</html>
--- a/main.css
+++ b/main.css
@ -0,0 +1,8 @@
+html, body, canvas {
+    width: 100vw;
+    height: 100vh;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    background: black;
+}
--- a/src/draw/point.js
+++ b/src/draw/point.js
@ -0,0 +1,27 @@
+class Point {
+
+    constructor(x, y) {
+        this.my_x = x
+        this.my_y = y
+    }
+
+    get x() {
+        return this.my_x
+    }
+
+    get y() {
+        return this.my_y
+    }
+
+    get coordinates() {
+        return [this.my_x, this.my_y]
+    }
+
+    multiplyWith([[a11, a12], [a21, a22]]) {
+        return new Point(a11 * this.my_x + a21 * this.my_y, a12 * this.my_x + a22 * this.my_y)
+    }
+
+    translateBy(offset) {
+        return new Point(this.my_x + offset.x, this.my_y + offset.y)
+    }
+}
--- a/src/draw/triangle.js
+++ b/src/draw/triangle.js
@ -0,0 +1,32 @@
+class Triangle {
+
+    constructor(radius, angle = 0) {
+        this.radius = radius
+        this.angle = angle
+        this.a = new Point(0, -radius).multiplyWith(getRotationMatrix(angle))
+        this.b = this.a.multiplyWith(getRotationMatrix(120))
+        this.c = this.a.multiplyWith(getRotationMatrix(240))
+    }
+
+    drawAt(context, color, centerPoint = new Point(0, 0)) {
+        context.strokeStyle = color
+        context.beginPath()
+        context.moveTo(...this.a.translateBy(centerPoint).coordinates)
+        context.lineTo(...this.b.translateBy(centerPoint).coordinates)
+        context.lineTo(...this.c.translateBy(centerPoint).coordinates)
+        context.closePath()
+        context.stroke()
+    }
+
+    cloneAndRotateBy(angle) {
+        return new Triangle(radius, this.angle + angle)
+    }
+
+    rotateBy(angle) {
+        this.angle = (this.angle + angle >= 360) ? this.angle + angle - 360 : this.angle + angle
+        const rotation = getRotationMatrix(angle)
+        this.a =  this.a.multiplyWith(rotation)
+        this.b =  this.b.multiplyWith(rotation)
+        this.c =  this.c.multiplyWith(rotation)        
+    }
+}
--- a/src/index.js
+++ b/src/index.js
@ -0,0 +1,58 @@
+let context;
+let counter = 0;
+const maxHeight = document.documentElement.clientHeight;
+const maxWidth = document.documentElement.clientWidth;
+let center = new Point(maxWidth / 2, maxHeight / 2);
+let growFactor = 0;
+let centerTriangle;
+let wanderingTriangle;
+const border = 100;
+let offsetY = border, offsetX = border;
+
+Math.radians = degrees => degrees * (Math.PI / 180)
+Math.degrees = radians => radians * (180 / Math.PI)
+
+window.onload = event => {
+    centerTriangle = new Triangle(300)
+    wanderingTriangle = new Triangle(100)
+    const canvasNode = document.querySelector('#canvas')
+    canvasNode.height = maxHeight
+    canvasNode.width = maxWidth
+    context = canvasNode.getContext('2d')
+    window.requestAnimationFrame(drawFrame)
+}
+
+function clearCanvas(ctx) {
+    ctx.fillStyle = '#000000'
+    ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height)
+}
+
+function drawFrame(timestamp) {
+    clearCanvas(context)
+    // offsetY = (offsetY >= context.canvas.height) ? 0 : offsetY + 1;
+    // offsetX = (offsetX >= context.canvas.width) ? 0 : offsetX + 1;
+    centerTriangle.drawAt(context, '#f02af7', center)
+    centerTriangle.rotateBy(1)
+    
+    if (offsetX < maxWidth - border && offsetY <= border) {
+        offsetX += 10
+    } else if (offsetX >= maxWidth - border && offsetY < maxHeight - border) {
+        offsetY += 10
+    } else if (offsetX > border && offsetY >= maxHeight - border) {
+        offsetX -= 10
+    } else {
+        offsetY -= 10
+    }
+    const currentOffset = new Point(offsetX, offsetY)
+    wanderingTriangle.drawAt(context, '#f02af7', currentOffset)
+    wanderingTriangle.rotateBy(4)
+    // centerTriangle.drawAt(context, '#f02af7', center.translateBy(new Point(center.x - xOffset, center.y - offset)))
+    // centerTriangle.drawAt(context, '#f02af7', center.translateBy(new Point(-center.x + xOffset, center.y - offset)))
+    window.requestAnimationFrame(drawFrame)
+}
+
+const getRotationMatrix = angle => {
+    const phi = Math.radians(angle)
+    return [[Math.cos(phi), -Math.sin(phi)],
+            [Math.sin(phi), Math.cos(phi)]]
+}