<canvas width='1000' height='500' id='backface'><p>Your browser does not support this canvas element. Please try another broswer or device.</p></canvas>
body{
margin:0;
overflow:hidden;
}
#backface{
background-color: black;
}
let context = backface.getContext("2d"),
lineWidth = 5;
context.canvas.width = window.innerWidth;
context.canvas.height = window.innerHeight;
function resize() {
context.canvas.width = window.innerWidth;
context.canvas.height = window.innerHeight;
}
window.addEventListener("resize", resize, false);
function lines() {
var valuesT = [],
valuesB = [];
for (var i = 0; i < backface.width; i++) {
valuesT[i] = Math.floor(Math.random() * (backface.height / 2 - 1)) + 1;
valuesB[i] = Math.floor(Math.random() * (backface.height / 2 - 1)) + 1;
}
var i = 0,
rr = Math.floor(Math.random() * (3 - 1)) + 1,
rg = Math.floor(Math.random() * (3 - 1)) + 1,
rb = Math.floor(Math.random() * (3 - 1)) + 1,
r = 255,
g = 255,
b = 255;
requestAnimationFrame(function () {
drawLines(i);
});
function drawLines(i) {
//change this to a for loop that works.
if (rr == 2) {
r = Math.floor(Math.random() * (255 - 1)) + 1;
} else {
r = 0;
}
if (rg == 2) {
g = Math.floor(Math.random() * (255 - 1)) + 1;
} else {
g = 0;
}
if (rb == 2) {
b = Math.floor(Math.random() * (255 - 1)) + 1;
} else {
b = 0;
}
if (rr != 2 && rg != 2 && rb != 2) {
var rand = Math.floor(Math.random() * (255 - 1)) + 1;
r = rand;
g = rand;
b = rand;
}
context.clearRect(i, 0, 1 + lineWidth, backface.height);
context.beginPath();
context.lineWidth = lineWidth;
context.strokeStyle = `rgba(${r},${g},${b},1)`;
context.moveTo(i, 0);
context.lineTo(i, 0 + valuesT[i]);
context.stroke();
context.closePath();
context.beginPath();
context.lineWidth = lineWidth;
context.strokeStyle = `rgba(${r},${g},${b},1)`;
context.moveTo(i, backface.height);
context.lineTo(i, backface.height - valuesB[i]);
context.stroke();
context.closePath();
//console.log(values[i]);
if (i >= backface.width) {
i = 0;
requestAnimationFrame(lines);
} else {
i = i + 1 + lineWidth;
requestAnimationFrame(function () {
drawLines(i);
});
}
//setTimeout(function() { drawLines(i); }, 1);
}
}
requestAnimationFrame(lines);
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.