~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


firefoxcircuit-canvas.html
437•  1 year ago•  DownloadRawClose
1 year ago•  437

{}
<!DOCTYPE html>
<!--

    author: twily   2022 - 2023
	
-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>circuit-canvas</title>

<style type="text/css">
html,body {
	margin: 0; padding: 0;
	width: 100%; overflow-x: hidden;
	font-family: Sans-Serif;
}

.profile_wrap {
	border: 2px solid #aaa;
	border-radius: 100px;
	overflow: hidden;
	width: 104px; max-height: 104px;
	float: right;
}
.profile {
	width: 100px; max-height: 100px; border: 0px solid #00f;
	border-radius: 100px; padding-top: 2px;
}

#wrap {
	position: absolute; top: 0; left: 0;
	width: 100%; height: auto;
	z-index: 100;
}
#main {
	max-width: 800px; text-align: left; margin: 50px 0;
	background: rgba(255,255,255,.75);
	border: 1px solid #aaa; padding: 50px;
	border-radius: 10px;
}

#footer {
	max-width: 800px; margin: 50px 0;
	background: rgba(255,255,255,.75);
	border: 1px solid #aaa; padding: 50px;
	border-radius: 10px;
}

.tbl { display: table; table-layout: fixed; width: 100%; }
.tr { display: table-row; }

.td { display: table-cell; vertical-align: middle; padding: 0px; border: 0px solid #f00; }
.tbl:not(:nth-child(1)) .td { display: table-cell; vertical-align: middle; padding: 8px; }

.td:nth-child(2) { text-align: right; width: 25%; border-left: 0px solid #0f0; }

.pad8 { display: inline-block; padding: 0 8px; }

.tbl:not(:nth-child(1)) .tr:hover { background: #eee; }
.blue { color: #00f; }
.grey { color: #666; }
.grey2 { color: #aaa; }

h3 { margin: 0; }
h1,h2 { margin: 0; text-transform: uppercase; }
hr { margin: 0; padding: 0; border: 0; background: #eee; height: 2px }

.spacer { height: 600px; }
#cnv {
	position: fixed; top: 0; left: 0;
	width: 100%; height: 100%;
	z-index: 1;
	pointer-events: none;
}
#overlay {
	position: fixed; top: 0; left: 0;
	width: 100%; height: 100%;
	background: transparent;
	z-index: 10;
}
</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); }

var cnv=null,ctx=null;
function init() {
	if($('cnv')) {
		cnv=$('cnv');
		ctx=cnv.getContext('2d');
		
		newsize();
		loop();
	}
}

var lines=[];
var fps=30;
var minLines=50;
var maxLife=60;
var dotSize=4;

var nX=0,nY=0;
var clearTime=0;
var tnow;
var ltT;

function addLine() {
	var newline={
		x: rndMinMax(0,winW),
		y: rndMinMax(0,winH),
		direction_v: rndMinMax(-1,1),
		direction_h: rndMinMax(-1,1),
		lastchanged: tnow,
		nextchange: rndMinMax(2,10),
		spawned: tnow,
		lifespan: rndMinMax(10,60)
	};
	
	lines.push(newline);
	
	newDirection(lines.length-1);
	
	//addDot(newline['x'],newline['y']);
}

function newDirection(i,forceDirection=false) { // no still
	while((lines[i]['direction_v']==0 && lines[i]['direction_h']==0) || forceDirection) {
		forceDirection=false;
		var changeV=true;
		var changeH=true;
		var overrideHV=false;
		if(lines[i]['direction_h']==0) changeV=false;
		if(lines[i]['direction_v']==0) changeH=false;
		if(!changeV && !changeH) {
			overrideHV=true;
		}
		if(changeH || overrideHV) {
			lines[i]['direction_h']=rndMinMax(-1,1);
		}
		if(changeV || overrideHV) {
			lines[i]['direction_v']=rndMinMax(-1,1);
		}
	}
}

function removeLine(x) {
	if(lines[x]) {
		lines.splice(x,1);
	}
}

function resetCanvas() {
	dotMarks=[];
	lines=[];
	ctx.clearRect(0,0,winW,winH);
    //ctx.fillStyle="#ffffff";
    ctx.fillStyle="#0c4a58";
	ctx.fillRect(0,0,winW,winH);
}

var dotMarks=[];
function addDot(x,y) {
	var newdot={
		x: x,
		y: y,
		intime: dotSize
	};
	dotMarks.push(newdot);
}

var counter=0;
function loop() {
	clearTimeout(ltT);
	
	if(cnvActive) {
		if(counter==0) {
			tnow=Math.round(new Date().getTime()/1000);
			//console.log(tnow);
			counter++;
			clearTime++;
			
			if(clearTime>=maxLife) {
				resetCanvas();
				clearTime=0;
			}
		} else {
			counter++;
			if(counter>=fps) counter=0; // 1 second passed
		}
		
		while(lines.length<minLines) {
			addLine();
		}
		
		if(dotMarks.length>0) {
			for(var j=0;j<dotMarks.length;j++) { // draw bigger dot on turns
				if(dotMarks[j]['intime']>0) {
					dotMarks[j]['intime']--;
				} else {
					//ctx.fillStyle="#ccc";
					ctx.fillStyle="#ff3c00";
					ctx.beginPath();
					ctx.arc(dotMarks[j]['x'], dotMarks[j]['y'], dotSize, 0 * Math.PI, 2 * Math.PI, true);
					ctx.fill();
					
					dotMarks.splice(j,1);
				}
			}
		}
		
		// animation
		for(var i=0;i<lines.length;i++) {
			if((lines[i]['spawned']+lines[i]['lifespan'])>tnow) {
				var directionChanged=false;
				var copyDirection=lines[i]['direction_h']+","+lines[i]['direction_v'];
				
				if((lines[i]['lastchanged']+lines[i]['nextchange'])<tnow) {
				
					newDirection(i,true);
					
					var copyDirection2=lines[i]['direction_h']+","+lines[i]['direction_v'];
					
					if(copyDirection!=copyDirection2) {
						directionChanged=true;
					}
					
					// h:
					// -1 = left | 0 = still | 1 = right
					// v:
					// -1 = up | 0 = still | 1 = down
					
					// h,v = x,y:
					
					// -1,-1 | 0,-1 | 1,-1 =	\|/
					// -1, 0 | 0, 0 | 1, 0 =	-o-
					// -1, 1 | 0, 1 | 1, 1 =	/|\
					
					lines[i]['lastchanged']=tnow;
					lines[i]['nextchange']=rndMinMax(2,10);
				}
				
				nX=lines[i]['x']+lines[i]['direction_h'];
				nY=lines[i]['y']+lines[i]['direction_v'];
				
				if(nX>winW) nX=0;
				if(nY>winH) nY=0;
				if(nX<0) nX=winW;
				if(nY<0) nY=winH;
				
				lines[i]['x']=nX;
				lines[i]['y']=nY;
		
				if(directionChanged) {
					addDot(nX,nY);
				}
				//ctx.fillStyle="#eee";
				ctx.fillStyle="#ff6b00";
				ctx.beginPath();
				ctx.arc(nX, nY, dotSize/2, 0 * Math.PI, 2 * Math.PI, true);
				//ctx.stroke();
				ctx.fill();
			} else {
				removeLine(i);
			}
		}
		
		ltT=setTimeout(function() { loop(); },1000/fps);
	}
}

var winW=0,winH=0;
var cnvActive=false;
function newsize() {
	winW=window.innerWidth;
	winH=window.innerHeight;
	
	if(cnv!=null) {
		cnv.width=winW;
		cnv.height=winH;
		
		if(winW>0 && winH>0) {
			cnvActive=true;
		} else {
			cnvActive=false;
		}
		
		resetCanvas();
		clearTime=0;
	}
}

var rtT;
window.onresize=function() {
	clearTimeout(rtT);
	
	rtT=setTimeout(function() { newsize(); },100);
}
</script>

</head>
<body onload="init();">

<div id="wrap">
<center>
<!--
<div id="main">
    Your stuff
</div>
-->
<div class="spacer"></div>

</center>
</div>

<div id="overlay"></div>
<canvas id="cnv"></canvas>

</body>
</html>

Top
©twily.info 2013 - 2024
twily at twily dot info



2 033 280 visits
... ^ v