Spaces:

Arrcttacsrks
/

Spider

Configuration error

App Files Files Community

Arrcttacsrks commited on Nov 3, 2024

Commit

b27c421

verified ·

1 Parent(s): 0bf4d52

Upload 6 files

Browse files

Files changed (6) hide show

LICENSE +21 -0
README.md +7 -10
images/demo.png +0 -0
index.html +18 -0
interactive spider.css +5 -0
interactive spider.js +150 -0

LICENSE ADDED Viewed

	@@ -0,0 +1,21 @@

+MIT License
+Copyright (c) 2024 code-toan-bug
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md CHANGED Viewed

@@ -1,10 +1,7 @@
----
-title: Spider
-emoji: 🐢
-colorFrom: purple
-colorTo: purple
-sdk: static
-pinned: false
----
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

+# Interactive_Spider
+Demo:
+<img src="images/demo.png" alt="Demo" width="400"/>

images/demo.png ADDED Viewed

index.html ADDED Viewed

	@@ -0,0 +1,18 @@

+<!DOCTYPE html>
+<html lang="en">
+  <head>
+      <meta charset="utf-8">
+      <meta name="viewport" content="width=device-width, initial-scale=1">
+      <link rel="stylesheet" href="interactive spider.css">
+      <title>Interactive spider</title>
+  </head>
+  <body>
+    <!-- visit my tiktok("Meowish") for more code -->
+      <canvas id="canvas"></canvas>
+    <script src="interactive spider.js"></script>
+  </body>
+</html>

interactive spider.css ADDED Viewed

	@@ -0,0 +1,5 @@

+body {
+    overflow: hidden;
+    margin: 0;
+    cursor: pointer;
+}

interactive spider.js ADDED Viewed

	@@ -0,0 +1,150 @@

+let w, h;
+const ctx = canvas.getContext("2d");
+const { sin, cos, PI, hypot, min, max } = Math;
+function spawn() {
+    const pts = many(333, () => {
+        return {
+            x: rnd(innerWidth),
+            y: rnd(innerHeight),
+            len: 0,
+            r: 0
+        };
+    });
+    const pts2 = many(9, (i) => {
+        return {
+            x: cos((i / 9) * PI * 2),
+            y: sin((i / 9) * PI * 2)
+        };
+    });
+    let seed = rnd(100)
+    let tx = rnd(innerWidth);
+    let ty = rnd(innerHeight);
+    let x = rnd(innerWidth)
+    let y = rnd(innerHeight)
+    let kx = rnd(0.8, 0.8)
+    let ky = rnd(0.8, 0.8)
+    let walkRadius = pt(rnd(50,50), rnd(50,50))
+   let r = innerWidth / rnd(100, 150);
+    function paintPt(pt){
+        pts2.forEach((pt2) => {
+            if (!pt.len )
+                return
+            drawLine(
+                lerp(x + pt2.x * r, pt.x, pt.len * pt.len),
+                lerp(y + pt2.y * r, pt.y, pt.len * pt.len),
+                x + pt2.x * r,
+                y + pt2.y * r
+            );
+        });
+        drawCircle(pt.x, pt.y, pt.r);
+    }
+    return {
+        follow(x,y) {
+            tx = x;
+            ty = y;
+        },
+        tick(t) {
+    const selfMoveX = cos(t*kx+seed)*walkRadius.x;
+    const selfMoveY = sin(t*ky+seed)*walkRadius.y;
+    let fx = tx + selfMoveX;
+    let fy = ty + selfMoveY;
+    x += min(innerWidth/100, (fx - x)/10)
+    y += min(innerWidth/100, (fy - y)/10)
+    let i = 0
+    pts.forEach((pt) => {
+        const dx = pt.x - x,
+            dy = pt.y - y;
+        const len = hypot(dx, dy);
+        let r = min(2, innerWidth / len / 5);
+        pt.t = 0;
+        const increasing = len < innerWidth / 10
+            && (i++) < 8;
+        let dir = increasing ? 0.1 : -0.1;
+        if (increasing) {
+            r *= 1.5;
+        }
+        pt.r = r;
+        pt.len = max(0, min(pt.len + dir, 1));
+        paintPt(pt)
+    });
+        }
+    }
+}
+const spiders = many(2, spawn)
+addEventListener("pointermove", (e) => {
+    spiders.forEach(spider => {
+        spider.follow(e.clientX, e.clientY)
+    })
+});
+requestAnimationFrame(function anim(t) {
+    if (w !== innerWidth) w = canvas.width = innerWidth;
+    if (h !== innerHeight) h = canvas.height = innerHeight;
+    ctx.fillStyle = "#000";
+    drawCircle(0, 0, w * 10);
+    ctx.fillStyle = ctx.strokeStyle = "#fff";
+    t/=1000
+    spiders.forEach(spider => spider.tick(t))
+    requestAnimationFrame(anim);
+});
+function recalc(X, Y) {
+    tx = X;
+    ty = Y;
+}
+function rnd(x = 1, dx = 0) {
+    return Math.random() * x + dx;
+}
+function drawCircle(x, y, r, color) {
+    ctx.beginPath();
+    ctx.ellipse(x, y, r, r, 0, 0, PI * 2);
+    ctx.fill();
+}
+function drawLine(x0, y0, x1, y1) {
+    ctx.beginPath();
+    ctx.moveTo(x0, y0);
+    many(100, (i) => {
+        i = (i + 1) / 100;
+        let x = lerp(x0, x1, i);
+        let y = lerp(y0, y1, i);
+        let k = noise(x/5+x0, y/5+y0) * 2;
+        ctx.lineTo(x + k, y + k);
+    });
+    ctx.stroke();
+}
+function many(n, f) {
+    return [...Array(n)].map((_, i) => f(i));
+}
+function lerp(a, b, t) {
+    return a + (b - a) * t;
+}
+function noise(x, y, t = 101) {
+    let w0 = sin(0.3 * x + 1.4 * t + 2.0 +
+                 2.5 * sin(0.4 * y + -1.3 * t + 1.0));
+    let w1 = sin(0.2 * y + 1.5 * t + 2.8 +
+                 2.3 * sin(0.5 * x + -1.2 * t + 0.5));
+    return w0 + w1;
+}
+function pt(x,y){
+    return {x,y}
+}