Random Squares With Canvas And JavaScript
Por: dragaoaurora • 22/12/2018 • Exam • 2.134 Palavras (9 Páginas) • 250 Visualizações
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
canvas {/*
width: 100vw;
height:
*/}
</style>
</head>
<body>
<canvas id="tela" width="800" height="600"></canvas>
<script>
$ = function(id) {
return document.getElementById(id);
}
var fib_cache = [1, 1];
var fib = function(n) {
if (n <= 1) {
return 1;
}
while (fib_cache.length <= n) {
var l = fib_cache.length;
fib_cache.push(fib_cache[l - 1] + fib_cache[l - 2]);
}
return fib_cache[n];
}
function rgb(r, g, b) {
return "rgba(" + r + ", " + g + ", " + b + ")";
}
function strokeColor(r, g, b) {
ctx.strokeStyle = rgb(r, g, b);
}
var canvas = $('tela');
var ctx = canvas.getContext('2d');
var x, y, lx, ly;
x = y = 0;
lx = ly = -10;
ctx.moveTo(0, 0);
var colors = [0, 0, 0, 0, 1];
function cycle(inc) {
if (!inc) {
inc = 1;
}
var changing = colors[3];
inc *= colors[4];
var next = false;
colors[changing] += inc;
if (colors[changing] >= 255) {
colors[changing] = 255;
next = true;
} else if (colors[changing] <= 0) {
colors[changing] = 0;
next = true;
}
if (next) {
// console.log(colors);
changing = parseInt(Math.random() * 3) % 3;
if (colors[0] + colors[1] + colors[2] == 255*2) {
while (colors[changing] != 255) {
changing = (changing + 1) % 3;
}
}
colors[3] = changing;
if (colors[changing] == 0) {
colors[4] = 1;
} else {
colors[4] = -1;
}
// console.log(colors);
// console.log();
}
}
var i = 0;
var iinc = 1;
var drawLine = function() {
// var inc = fib(i) * 10;
...