jdreichmann/canvas-playground
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Added rotating triangles

Browse Source 
Added triangles which are animated in combination with window.requestAnimationFrame and are drawn
directly to the canvas
This commit is contained in:
Johanna Reichmann 2018-05-12 23:36:57 +02:00
commit b87de3f8cc
5 changed files with 138 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
index.html Normal file
View File

@ -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>

8
main.css Normal file
View File

@ -0,0 +1,8 @@
html, body, canvas {
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
overflow: hidden;
background: black;
}

27
src/draw/point.js Normal file
View File

@ -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)
}
}

32
src/draw/triangle.js Normal file
View File

@ -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)
}
}

58
src/index.js Normal file
View File

@ -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)]]
}