Tumbuh
<!DOCTYPE html>
<html>
<head>
<title>Latihan Koding Informatika MAN Kapuas</title>
<style>>
body {
margin: 0;
overflow:hidden;
background: #131313;
}
</style>
</head>
<body>
<canvas id="tree"></canvas>
<h1>This is a animation</h1>
<p>MAN Kapuas.</p>
<script>
'use strict';
class Tree {
constructor() {
this.rule = 'FF+[+FF-F]-[-F+FFF]'
this.sentence = 'F'
this.length = 3
this.angle = Math.PI / 10
this.speed = 30
this.resize()
}
resize() {
this.width = canvas.width = window.innerWidth
this.height = canvas.height = window.innerHeight
this.color = 10
this.pos = -1
ctx.translate(this.width / 4, this.height)
ctx.strokeStyle = 'hsla(0,100%,50%,0.5)'
}
build() {
let nextSentence = ''
for (var j = 0; j < this.sentence.length; j++) {
let currentChar = this.sentence.charAt(j)
if (currentChar === 'F') nextSentence += this.rule
else nextSentence += currentChar
}
this.sentence = nextSentence
}
draw() {
if (this.pos < this.sentence.length) ++this.pos
else this.build()
switch (this.sentence.charAt(this.pos)) {
case 'F':
ctx.moveTo(0, 0)
ctx.lineTo(0, -this.length)
ctx.translate(0, -this.length)
break
case '+':
ctx.rotate(this.angle)
break
case '-':
ctx.rotate(-this.angle)
break
case '[':
ctx.stroke()
ctx.save()
ctx.beginPath()
ctx.strokeStyle = 'hsla(' + (((this.color += 1) < 140) ? this.color : this.color = 40) + ',100%,50%,0.3)'
break
case ']':
ctx.stroke()
ctx.restore()
break
}
}
}
let canvas = document.getElementById('tree')
let ctx = canvas.getContext('2d')
let tree = new Tree()
window.onresize = () => tree.resize()
;(function update() {
requestAnimationFrame(update)
for (let i = 0; i < tree.speed; i++) tree.draw()
}());
</scrip>
</body>
</html>
0 komentar: