Hugging Face's logo

Spaces:
broadfield-dev
/
ripples
Running

App Files Community
ripples
File size: 3,533 Bytes 
02134ae
 
 
ab0a470
 
 
 
 
86b48fe
 
ab0a470
 
86b48fe
 
5bcd723
02134ae
 
 
d3c687e
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
02134ae
 
 
9889be2
d3c687e
 
 
 
 
 
 
 
 
 
 
 
 
 
 
9889be2
02134ae
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
 
<!DOCTYPE html>
<html lang="en">
<head>
		<meta charset="utf-8" />
        <meta name="viewport" content="width=device-width" />
        <link rel="shortcut icon" type="image/jpg" href=""/>
        <meta name="twitter:card" content="player"/>
        <meta name="twitter:site" content=""/>
        <meta name="twitter:player" content="https://broadfield-dev-ripples.static.hf.space/index.html"/>
        <meta name="twitter:player:stream" content="https://broadfield-dev-ripples.static.hf.space/index.html"/>
        <meta name="twitter:player:width" content="100%"/>
        <meta name="twitter:player:height" content="100%"/>    
        <meta property="og:title" content="Ripples"/>
        <meta property="og:description" content="Interactive Ripples - for X web"/>
        <meta property="og:image" content="https://huggingface.co/spaces/broadfield-dev/ripples/resolve/main/ripplrs.png"/>
    <style>
        body { margin: 0; overflow: hidden; }
        canvas { display: block; }

        /* Control panel styles */
        #controls {
            position: absolute;
            top: -250px; /* Hidden above viewport */
            left: 50%;
            transform: translateX(-50%);
            width: 300px;
            background: rgba(0, 0, 0, 0.8);
            color: white;
            padding: 20px;
            border-radius: 0 0 10px 10px;
            transition: top 0.3s ease-in-out;
            z-index: 10;
        }

        #controls.open {
            top: 0; /* Slide down */
        }

        #controls button {
            width: 100%;
            padding: 10px;
            background: #1e90ff;
            border: none;
            color: white;
            cursor: pointer;
            border-radius: 5px;
            margin-bottom: 10px;
        }

        #controls button:hover {
            background: #4682b4;
        }

        #controls label {
            display: block;
            margin: 10px 0 5px;
            font-size: 14px;
        }

        #controls input[type="range"] {
            width: 100%;
        }
    </style>
</head>
<body>
    <!--div id="controls">
        <button id="toggleControls">Toggle Controls</button>
        <label for="speed">Wave Speed (0.1 - 0.5):</label>
        <input type="range" id="speed" min="0.1" max="0.5" step="0.01" value="0.25">
        <label for="directionX">Wave Direction X (-1 - 1):</label>
        <input type="range" id="directionX" min="-1" max="1" step="0.1" value="0">
        <label for="directionY">Wave Direction Y (-1 - 1):</label>
        <input type="range" id="directionY" min="-1" max="1" step="0.1" value="0">
        <label for="height">Wave Height (0.5 - 2):</label>
        <input type="range" id="height" min="0.5" max="2" step="0.1" value="1">
        <label for="randomness">Randomness (0 - 1):</label>
        <input type="range" id="randomness" min="0" max="1" step="0.01" value="0.5">
        <label for="damping">Damping (0.95 - 0.999):</label>
        <input type="range" id="damping" min="0.95" max="0.999" step="0.001" value="0.995">
        <label for="glow">Glow Intensity (0 - 1):</label>
        <input type="range" id="glow" min="0" max="1" step="0.01" value="0.5">
</div-->
    <script type="importmap">
        {
            "imports": {
                "three": "https://unpkg.com/three@0.162.0/build/three.module.js",
                "three/addons/": "https://unpkg.com/three@0.162.0/examples/jsm/"
            }
        }
    </script>
    <script type="module" src="main.js"></script>
</body>
</html>