~firefox
23 itemsDownload ./*

23 itemsDownload ./*

..
stylish
circuit-canvas.html
gamemaker.html
hidecaption.ahk
homepage-centered-iframe.html
homepage-centered-slideshow.html
homepage-masonry.html
homepage-panels.html
homepage-sidebar.html
homepage-slide3d.html
homepage-stars.html
mailorder.html
noise.html
noise2.html
noise3.html
remoteButter.html
simple-homepage.html
slideshow.html
template.ajax.php
template.html
template.min.html
trigonometry.html
videoeditor.html


firefoxnoise.html
473•  1 year ago•  DownloadRawClose
1 year ago•  473

{}
<!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
twily at twily dot info



2 017 633 visits
... ^ v