curious-contours/index.html at main · collidingScopes/curious-contours · GitHub

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
94
95
96
97
98
99
100
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Curious Contours: procedural terrain generator</title>
    <link rel="stylesheet" href="styles.css">

    <!-- Primary Meta Tags -->
    <meta name="title" content="Curious Contours">
    <meta name="description" content="Procedural terrain generator using 3D metaballs">

    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://collidingscopes.github.io/curious-contours/">
    <meta property="og:title" content="Curious Contours">
    <meta property="og:description" content="Procedural terrain generator using 3D metaballs">
    <meta property="og:image" content="https://raw.githubusercontent.com/collidingScopes/curious-contours/main/assets/siteOGImage.png">

    <!-- Twitter -->
    <meta property="twitter:card" content="summary_large_image">
    <meta property="twitter:url" content="https://collidingscopes.github.io/curious-contours/">
    <meta property="twitter:title" content="Curious Contours">
    <meta property="twitter:description" content="Procedural terrain generator using 3D metaballs">
    <meta property="twitter:image" content="https://raw.githubusercontent.com/collidingScopes/curious-contours/main/assets/siteOGImage.png">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.9/dat.gui.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <script defer src="https://cloud.umami.is/script.js" data-website-id="eb59c81c-27cb-4e1d-9e8c-bfbe70c48cd9"></script>
</head>
<body>
    <div id="canvas-container">
        <canvas id="canvas"></canvas>
    </div>

    <table id="button-table">
        <tr>
            <td>
              <button id="randomizeBtn" class="gui-button icon" title="Randomize Inputs (r)">🎲</button>
            </td>

            <td>
              <button id="saveBtn" class="gui-button icon" title="Save Image (s)">📷</button>
            </td>

            <td>
              <button id="exportVideoBtn" class="gui-button icon" title="Export Video (v)">🎥</button>
            </td>
        </tr>
    </table>

    <span id="fpsIndicator">FPS: </span>
    <div id="videoRecordingMessageDiv" class="hidden sticky-top">
        Video recording underway. Press 🎥 button or "v" to stop. The video will save to your downloads folder after.
    </div>

    <div id="notesDiv">
        <div id="textBox">
            <h2 id="aboutText">Curious Contours; procedural terrain generator ⛰️</h2>
            <p>This is a free web tool to create procedural terrain textures in real-time in the browser.</p>
            <p>How this works: a bunch of 3D spheres (meta-balls) are drawn on the canvas. They float around and combine with others based on distance. Then, 2D cross-sections are drawn using a Marching Squares algorithm. This ends up producing a terrain contour aesthtetic.</p>
            <p>Use the controls at the top-right to set animation speed, size, level of complexity, rotation, colours, and more.</p>
            <p>Use the buttons at the bottom-right to randomize the output, and export as image or mp4 video.</p>
            <p>This tool is completely free, open source (MIT license), without any paywalls or premium options. You are welcome to use it for personal or commercial purposes.</p>
            <p>If you found this tool useful, feel free to buy me a coffee. My name is Alan, and I enjoy building open source software for art, animation, games, and more. This would be much appreciated during late-night coding sessions!</p>
            <a href="https://www.buymeacoffee.com/stereoDrift" target="_blank"><img src="https://www.buymeacoffee.com/assets/img/custom_images/yellow_img.png" alt="Buy Me A Coffee"></a>
            <p>This project is coded using vanilla Javascript, HTML5 canvas, and CSS (<a href="https://github.com/collidingScopes/curious-contours" target="_blank" rel="noopener">see github repo</a>).</p>
            <p>If you enjoyed this, you may be interested in my other free / open source projects:</p>
            <ul>
              <li><a href="https://collidingScopes.github.io/liquid-shape-distortions" target="_blank" rel="noopener">Liquid Shape Distortions</a>: psychedelic animations using webgl shaders</li>
              <li><a href="https://collidingScopes.github.io/particular-drift" target="_blank" rel="noopener">Particular Drift</a>: turn photos into flowing particle animations</li>
              <li><a href="https://collidingScopes.github.io/liquid-logo" target="_blank" rel="noopener">Liquid Logo</a>: turn logos and icons into liquid metal animations</li>
              <li><a href="https://collidingScopes.github.io/ascii" target="_blank" rel="noopener">Video-to-ASCII</a>: turn videos into ASCII pixel art</li>
              <li><a href="https://collidingScopes.github.io/shimmer" target="_blank" rel="noopener">Shape Shimmer</a>: turn photos into funky wave animations</li>
              <li><a href="https://collidingScopes.github.io" target="_blank" rel="noopener">Colliding Scopes</a>: turn photos into kaleidoscope animations</li>
            </ul>
            <p>Feel free to reach out to discuss, give suggestions, or just to say hi! You can find me <a href="https://www.instagram.com/stereo.drift/" target="_blank" rel="noopener">@stereo.drift</a> on instagram, or through the other places below :)</p>
        </div>
      </div>

      <div id="linksDiv">
        <table id="infoMenuTable">
            <tr>
                <td><button id="gitHubButton"class="socialMediaButton"><a href="https://github.com/collidingScopes/curious-contours" target="_blank" rel="noopener"><i class="fa-brands fa-github"></i></a></button></td>
                <td><button id="coffeeButton" class="socialMediaButton"><a href="https://www.buymeacoffee.com/stereoDrift" target="_blank" rel="noopener"><i class="fa-solid fa-heart"></i></a></button></td>
                <td><button id="instagramButton" class="socialMediaButton"><a href="https://www.instagram.com/stereo.drift/" target="_blank" rel="noopener"><i class="fa-brands fa-instagram"></i></a></button></td>
                <td><button id="xButton" class="socialMediaButton"><a class="x-link" href="https://x.com/measure_plan" target="_blank" rel="noopener">𝕏</i></a></button></td>
                <td><button id="emailButton" class="socialMediaButton"><a href="mailto:stereodriftvisuals@gmail.com" target="_blank" rel="noopener"><i class="fa-solid fa-envelope"></i></a></button></td>
            </tr>
        </table>
      </div>

</body>

<script src="mp4-muxer-main/build/mp4-muxer.js"></script>
<script src="helperFunctions.js"></script>
<script src="canvasVideoExport.js"></script>
<script src="main.js"></script>

</html>