24 items •
Download ./*
24 items •
Download ./*
firefoxnoise.html
2 years ago• 704
{}
<!DOCTYPE html>
<!--
Author: Twily 2022
Website: http://twily.info/
-->
<html>
<head>
<title>TwilyNoise1*</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta name='viewport' content='width=device-width,initial-scale=1'>
<link id="favicon" rel="shortcut icon" href="./favicon.ico" />
<style type="text/css">
html,body {
background: #FFF; color: #000;
margin: 0; padding: 0; overflow: hidden;
font-weight: bold;
}
#cnv {
position: fixed; top: 0; left: 0;
width: 100%; height: 100%;
background: #FFF;
z-index: 1;
}
</style>
<script type="text/javascript">
var $=function(id) { return document.getElementById(id); };
var rndMinMax=function(min,max) { return Math.floor(Math.random() * (max - min + 1) + min); };
function init() {
if($('noise')) {
cnv=$('noise');
ctx=cnv.getContext('2d');
//loop(); from newsize
}
newsize();
}
var colormap={
black: [0,0,0,255],
white: [255,255,255,255]
};
var greymode="bw"; // bw | full
var greyscale=true;
var setCol;
var maxChange=100000; // cycle
function drawNext() {
var index,rndX,rndY;
for(var i=0;i<maxChange;i++) {
rndX=rndMinMax(0,winW);
rndY=rndMinMax(0,winH);
index = (rndX + rndY * winW) * 4;
if(greyscale) {
if(greymode=="bw") {
if(rndMinMax(1,2)==1) setCol="white";
else setCol="black";
canvasData.data[index + 0] = colormap[setCol][0]; // r
canvasData.data[index + 1] = colormap[setCol][1]; // g
canvasData.data[index + 2] = colormap[setCol][2]; // b
canvasData.data[index + 3] = colormap[setCol][3]; // a
} else {
var rndGrey=rndMinMax(0,255);
canvasData.data[index + 0] = rndGrey; // r
canvasData.data[index + 1] = rndGrey; // g
canvasData.data[index + 2] = rndGrey; // b
canvasData.data[index + 3] = 255; // a
}
} else {
canvasData.data[index + 0] = rndMinMax(0,255); // r
canvasData.data[index + 1] = rndMinMax(0,255); // g
canvasData.data[index + 2] = rndMinMax(0,255); // b
canvasData.data[index + 3] = 255; // a
}
}
}
var fps=30;
var cnv=null;
var ctx;
var canvasData;
var running=false;
var nlT;
var xPos=0;
var yPos=0;
var drawState="paused";
function loop() {
clearTimeout(nlT);
switch(drawState) {
case "preready":
if(winW>0 && winH>0) {
canvasData = ctx.getImageData(0, 0, winW, winH);
drawState="premake";
}
break;
case "premake":
var index;
for(var y=0;y<winH;y++) {
for(var x=0;x<winW;x++) {
index = (x + y * winW) * 4;
if(greyscale) {
if(greymode=="bw") {
if(rndMinMax(1,2)==1) setCol="white";
else setCol="black";
canvasData.data[index + 0] = colormap[setCol][0]; // r
canvasData.data[index + 1] = colormap[setCol][1]; // g
canvasData.data[index + 2] = colormap[setCol][2]; // b
canvasData.data[index + 3] = colormap[setCol][3]; // a
} else {
var rndGrey=rndMinMax(0,255);
canvasData.data[index + 0] = rndGrey; // r
canvasData.data[index + 1] = rndGrey; // g
canvasData.data[index + 2] = rndGrey; // b
canvasData.data[index + 3] = 255; // a
}
} else {
canvasData.data[index + 0] = rndMinMax(0,255); // r
canvasData.data[index + 1] = rndMinMax(0,255); // g
canvasData.data[index + 2] = rndMinMax(0,255); // b
canvasData.data[index + 3] = 255; // a
}
}
}
drawState="print";
break
case "ready":
canvasData = ctx.getImageData(0, 0, winW, winH);
drawState="making";
drawNext();
break;
case "making":
drawNext();
drawState="print";
break;
case "print":
ctx.putImageData(canvasData, 0, 0);
drawState="ready";
break;
default:
}
//ctx.fillRect(10,10,1,1);
//console.log(drawState);
nlT=setTimeout(function() { loop(); },1000/fps);
}
var winW=0;
var winH=0;
function newsize() {
winW=window.innerWidth;
winH=window.innerHeight;
if(cnv!=null) {
cnv.width=winW
cnv.height=winH;
drawState="preready";
if(!running) {
running=true;
loop();
}
}
}
var rwT;
window.onresize=function() {
clearTimeout(rwT);
rwT=setTimeout(function() { newsize(); },100);
}
</script>
</head>
<body onload="init();">
<canvas id="noise"></canvas>
</body>
</html>
Top
©twily.info 2013 - 2024
2 175 728 visits