24 items •
Download ./*
24 items •
Download ./*
firefoxcircuit-canvas.html
1 year ago• 645
{}
<!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
2 167 621 visits