A Pen By
Gabriel Cyrillo

` ````
<span id='fps'></span>
<canvas id='c'></canvas>
```

` ````
* {
margin: 0px;
padding: 0px;
}
body{
background: #222;
}
#c {
position: fixed;
margin: 0px auto;
z-index: -2;
}
#fps {
position: fixed;
top: 0px;
}
```

` ````
let canvas = document.getElementById('c');
let ctx = canvas.getContext('2d');
let pattern = new Pattern();
let ctrl = new Controler();
let gui = new dat.GUI();
let stats = new Stats();
let reset = false;
let rand = (max, min) => (max - min) * Math.random() + min;
let int = parseInt;
function Controler(){
this.red = 255;
this.green = 128;
this.blue = 64;
this.noise = 128;
this.scale = 10;
this.stop = false;
}
gui.close();
gui.add(ctrl, 'red', 0, 255);
gui.add(ctrl, 'green', 0, 255);
gui.add(ctrl, 'blue', 0, 255);
gui.add(ctrl, 'noise', 0, 255);
gui.add(ctrl, 'scale', 3, 30).step(1);
gui.add(ctrl, 'stop');
stats.showPanel(0);
document.querySelector('span').appendChild(stats.domElement);
function Pattern() {
this.data = [];
}
Pattern.prototype.draw = function(j, i, w, h){
let x, y, k, pos, img = ctx.getImageData(j, i, w, h);
for(y = 0; y < h; y++){
for(x = 0; x < w; x++){
pos = 4*(w*y + x);
for(k = 0; k < 3; k++){
img.data[pos + k] = pattern.data[3*(w*y + x) + k];
}
img.data[pos + k] = 255;
}
}
ctx.putImageData(img, j, i);
}
Pattern.prototype.set = function(w, h){
let i, j, k, w1, w2;
let rgb = [
rand(-10, ctrl.red),
rand(-10, ctrl.green),
rand(-10, ctrl.blue)
];
for(i = 0; i < h; i++){
for(j = 0; j < w; j++){
if(j > 0) {
w1 = rand(0, 10);
w2 = rand(1, 10);
for(k = 0; k < 3; k++) {
pattern.data[3*(w*i + j) + k] = (w1 * pattern.data[3*(w*i + j-1) + k])
pattern.data[3*(w*i + j) + k] += w2 * (rgb[k] + rand(0, ctrl.noise));
pattern.data[3*(w*i + j) + k] /= (w1 + w2);
}
} else {
for(k = 0; k < 3; k++) {
pattern.data[3*(w*i + j) + k] = rgb[k] + rand(0, ctrl.noise);
}
}
}
}
}
function setup() {
reset = false;
canvas.width = window.innerWidth - 2;
canvas.height = window.innerHeight - 2;
requestAnimationFrame(drawBackground);
}
function restart(){
reset = true;
requestAnimationFrame(setup);
}
function drawBackground(){
let i, j, w, h, auxw, auxh, lim;
stats.begin();
for(i = 0; i < canvas.height; i += h) {
w = ctrl.scale*int(rand(1, ctrl.scale));
h = ctrl.scale*int(rand(1, ctrl.scale/3));
lim = rand(0, canvas.width);
auxh = h;
if(i + h > canvas.height)
h = canvas.height - i;
pattern.set(w, h);
drawLine(i, j, w, h, auxw, lim);
h = auxh;
}
stats.end();
requestAnimationFrame(drawLoop);
}
function drawLine(i, j, w, h, auxw, lim){
for (j = 0; j < canvas.width; j += w){
if(j > lim)
pattern.set(w, h);
auxw = w;
if(j + w > canvas.width)
w = canvas.width - j;
pattern.draw(j, i, w, h);
w = auxw;
}
}
function drawLoop(){
stats.begin();
if(!ctrl.stop){
let i, j, w, h, auxw, lim;
lim = rand(0, canvas.width);
i = rand(0, canvas.height);
w = ctrl.scale*int(rand(1, ctrl.scale));
h = ctrl.scale*int(rand(1, ctrl.scale/3));
if(i + h > canvas.height)
h = canvas.height - i;
pattern.set(w, h);
drawLine(i, j, w, h, auxw, lim);
}
stats.end();
if(!reset) requestAnimationFrame(drawLoop);
}
window.onload = setup;
window.onresize = restart;
```

999px

Loading
..................

Alt F
Opt F
Find & Replace

Also see: Tab Triggers