~firefox
19 itemsDownload ./*

19 itemsDownload ./*

..
stylish
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
slideshow.html
template.ajax.php
template.html
template.min.html
trigonometry.html


firefoxnoise2.html
52•  2 months ago•  DownloadRawClose
2 months ago•  52

{}
<!DOCTYPE html>
<!--

    Author:        Twily 2022
    Website:       http://twily.info/

-->
<html>
<head>
<title>TwilyNoise2</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: #000;
    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]
}; // not in use here

function isEven(n) {
    return n % 2 == 0;
}


var printDots=10000; // in use
var dDT=0; // not in use
var dotSize=2;
function drawDots() {
    var rndX,rndY;

    var ctxFill;
    //while(dDT>0) {
    //var jumpY=Math.round(dotSize/2);
    //var jumpX=Math.round(dotSize/2);
    var jumpY=dotSize;
    var jumpX=dotSize;
    if(!isEven(jumpX) && jumpX>1) jumpX--;
    if(!isEven(jumpY) && jumpY>1) jumpY--;

    var firstX=Math.round(dotSize/2);
    var firstY=Math.round(dotSize/2);
    //var firstX=rndMinMax(0,dotSize);
    //var firstY=rndMinMax(0,dotSize);
    var layerY=0;

    //ctx.fillStyle="#fff";
    //ctx.fillRect(0,0,winW,winH);
    //ctx.clearRect(0,0,winW,winH);

    var maxDots=Math.round(winW/jumpX) * Math.round(winH/jumpY);
    var skipPercent=Math.round((printDots*100)/maxDots);

    for(var x=firstX;x<=winW;x+=jumpX) {
        for(var y=firstY;y<=winH;y+=jumpY) {
            //rndX=rndMinMax(0,winW);
            //rndY=rndMinMax(0,winH);

            var tipX=x;
            if(isEven(layerY)) {
                //tipX+=Math.ceil(jumpX/2)
            }

            if(tipX<=winW && y<=winH) {
                ctx.beginPath();

                if(rndMinMax(1,100)<=skipPercent) { // change
                    if(rndMinMax(1,2)==1) ctxFill="#fff"
                    else                  ctxFill="#000"

                    var sizeMulti=1;
                    if(ctxFill=="#000") sizeMulti=1.3;

                    //ctx.strokeStyle=ctxFill;
                    ctx.strokeStyle="#f00";
                    ctx.fillStyle=ctxFill;

                    //var up=1.5;
                    //var down=2;
                    //if(rndMinMax(1,2)==1) {
                    //    up=0.5;
                    //    down=1.0;
                    //}
                    //
                    //var ang=rndMinMax(1,4);
                    var up=(rndMinMax(0,200)/100);
                    var down=(rndMinMax(0,200)/100);

                    //ctx.arc(rndX, rndY, 200, 0, 2 * Math.PI, true);
                    ctx.arc(tipX, y, dotSize * sizeMulti, up * Math.PI, down * Math.PI, true);
                    //ctx.stroke();
                    ctx.fill();
                    //ctx.fillRect(tipX, y, dotSize * sizeMulti, dotSize * sizeMulti);
                }

    //alert('x = '+x+', y = '+y+' | jumpX = '+jumpX+' jumpY = '+jumpY);
                //dDT--;
            }
            layerY++;
            //break;
        }
    }
}

var greymode="bw"; // bw | full 
var greyscale=true;
var setCol;
var maxChange=1000; // cycle (pixel system - not dot)
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);

    dDT=printDots;
    drawDots();
	
    //switch(drawState) { // see noise1
    //    case "preready":
	//		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=800;
var winH=600;
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 - 2022
twily at twily dot info



1 826 868 visits
... ^ v