dash experiment

Jesse-Hufstetler · Dec 3, 2023 · a100c42 · a100c42
1 parent b241655
commit a100c42
Showing 1 changed file with 119 additions and 2 deletions.
diff --git a/dash.html b/dash.html
@@ -24,7 +24,7 @@
         overflow: hidden;
         background: #333;
         color: #777;
-        text-shadow: 0.1em 0em 1em #ffffff4d, -0.03em -0.02em 0.03em white;
+        text-shadow: 0.1em 0em .1em #0000004d, -0.03em -0.02em 0.03em white;
     }
 
     div.outer-div {
@@ -76,18 +76,30 @@
         -ms-transform: translateY(-50%);
         transform: translateY(-50%);
     }
+
+canvas { 
+   overflow: hidden;
+   width:100vw;
+   height:100vh;
+   background-color:black;
+   position: absolute;
+   left: 0px;
+   top: 0px;
+   display: inline-block;
+}
     </style>
 </head>
 
 <body>
+    <canvas id="test"></canvas>
     <div class='outer-div'>
         <div class='middle-div'>
-            <div id="time" style="font-size: 20vw;"></div>
             <div id="minfo" style="font-size:12vw">
                 <span id="wday"></span>
                 <span id="temp"></span><span id="dp" style="opacity: .15;"></span>
             </div>
             <div id="day" style=""></div>
+            <div id="time" style="font-size: 20vw;"></div>
         </div>
     </div>
     <script>
@@ -142,6 +154,111 @@
     }
     getWeather();
     setInterval(getWeather, 1000 * 60 * 20);
+
+
+
+
+
+
+
+
+
+
+
+
+var w = window.innerWidth,
+    h = window.innerHeight,
+    canvas = document.getElementById('test'),
+    ctx = canvas.getContext('2d'),
+    rate = 60,
+    arc = 100,
+    time,
+    count,
+    size = 7,
+    speed = 20,
+    parts = new Array,
+    colors = ['red','#f57900','yellow','#ce5c00','#5c3566'];
+var mouse = { x: 0, y: 0 };
+
+canvas.setAttribute('width',w);
+canvas.setAttribute('height',h);
+
+function create() {
+  time = 0;
+  count = 0;
+
+  for(var i = 0; i < arc; i++) {
+    parts[i] = {
+      x: Math.ceil(Math.random() * w),
+      y: Math.ceil(Math.random() * h),
+      toX: Math.random() * 5 - 1,
+      toY: Math.random() * 2 - 1,
+      c: colors[Math.floor(Math.random()*colors.length)],
+      size: Math.random() * size
+    }
+  }
+}
+
+function particles() {
+  ctx.clearRect(0,0,w,h);
+   canvas.addEventListener('mousemove', MouseMove, false);
+  for(var i = 0; i < arc; i++) {
+    var li = parts[i];
+    var distanceFactor = DistanceBetween( mouse, parts[i] );
+    var distanceFactor = Math.max( Math.min( 15 - ( distanceFactor / 10 ), 10 ), 1 );
+    ctx.beginPath();
+    ctx.arc(li.x,li.y,li.size*distanceFactor,0,Math.PI*2,false);
+    ctx.fillStyle = li.c;
+    ctx.strokeStyle=li.c;
+    if(i%2==0)
+      ctx.stroke();
+    else
+      ctx.fill();
+
+    li.x = li.x + li.toX * (time * 0.05);
+    li.y = li.y + li.toY * (time * 0.05);
+
+    if(li.x > w){
+       li.x = 0; 
+    }
+    if(li.y > h) {
+       li.y = 0; 
+    }
+    if(li.x < 0) {
+       li.x = w; 
+    }
+    if(li.y < 0) {
+       li.y = h; 
+    }
+
+
+  }
+  if(time < speed) {
+    time++;
+  }
+  setTimeout(particles,1000/rate);
+}
+function MouseMove(e) {
+   mouse.x = e.layerX;
+   mouse.y = e.layerY;
+
+   //context.fillRect(e.layerX, e.layerY, 5, 5);
+   //Draw( e.layerX, e.layerY );
+}
+function DistanceBetween(p1,p2) {
+   var dx = p2.x-p1.x;
+   var dy = p2.y-p1.y;
+   return Math.sqrt(dx*dx + dy*dy);
+}
+create();
+particles();
+
+
+
+
+
+
+
     </script>
 </body>