From b87de3f8cca30d1b133ee746e90ed04abd9337ae Mon Sep 17 00:00:00 2001 From: Johanna Reichmann Date: Sat, 12 May 2018 23:36:57 +0200 Subject: [PATCH] Added rotating triangles Added triangles which are animated in combination with window.requestAnimationFrame and are drawn directly to the canvas --- index.html | 13 ++++++++++ main.css | 8 ++++++ src/draw/point.js | 27 +++++++++++++++++++++ src/draw/triangle.js | 32 ++++++++++++++++++++++++ src/index.js | 58 ++++++++++++++++++++++++++++++++++++++++++++ 5 files changed, 138 insertions(+) create mode 100644 index.html create mode 100644 main.css create mode 100644 src/draw/point.js create mode 100644 src/draw/triangle.js create mode 100644 src/index.js diff --git a/index.html b/index.html new file mode 100644 index 0000000..79a5eb2 --- /dev/null +++ b/index.html @@ -0,0 +1,13 @@ + + + + Canvas Playground + + + + + + + + + \ No newline at end of file diff --git a/main.css b/main.css new file mode 100644 index 0000000..83b95b4 --- /dev/null +++ b/main.css @@ -0,0 +1,8 @@ +html, body, canvas { + width: 100vw; + height: 100vh; + margin: 0; + padding: 0; + overflow: hidden; + background: black; +} \ No newline at end of file diff --git a/src/draw/point.js b/src/draw/point.js new file mode 100644 index 0000000..9d93ba7 --- /dev/null +++ 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) + } +} \ No newline at end of file diff --git a/src/draw/triangle.js b/src/draw/triangle.js new file mode 100644 index 0000000..9516e51 --- /dev/null +++ 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) + } +} \ No newline at end of file diff --git a/src/index.js b/src/index.js new file mode 100644 index 0000000..1bd6003 --- /dev/null +++ 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)]] +} \ No newline at end of file