24 items •
Download ./*
24 items •
Download ./*
firefoxnoise2.html
2 years ago• 710
{}
<!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 - 2024
2 175 717 visits