Add automatically generated web page

openrndr · Dec 16, 2024 · b21c0e8 · b21c0e8
commit b21c0e8
Show file tree

Hide file tree

Showing 11 changed files with 578 additions and 0 deletions.
diff --git a/beauty.css b/beauty.css
@@ -0,0 +1,43 @@
+body, html {
+    margin: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    font-family: monospace;
+    font-size: 18px;
+}
+#openrndr-canvas {
+    display: block;
+    width: 100%;
+    height: 100%;
+}
+#menu {
+    position: absolute;
+    left: 10px;
+    top: 10px;
+}
+#menu a, #menu span,
+#sourceButton a, #sourceButton span {
+    background-color: rgba(255,255,255,0.5);
+    padding-left: 5px;
+    padding-right: 5px;
+    border-radius: 3px;
+}
+#sourceButton {
+    position: absolute;
+    right: 10px;
+    bottom: 10px;
+    font-family: monospace;
+}
+#sourceCode {
+    position: absolute;
+    left: 0px;
+    top: 0px;
+    width: calc(70vw);
+    height: calc(100vh - 140px);
+    margin: 50px;
+    border-radius: 7px;
+    background-color: rgba(0,0,0,0.8);
+    overflow: scroll;
+    display: none;
+}
diff --git a/favicon.ico b/favicon.ico
diff --git a/highlightjs/androidstudio.min.css b/highlightjs/androidstudio.min.css
diff --git a/highlightjs/highlight.min.js b/highlightjs/highlight.min.js
diff --git a/index.html b/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>OPENRNDR</title>
+    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
+    <link rel="stylesheet" href="beauty.css">
+    <link rel="stylesheet" href="highlightjs/androidstudio.min.css">
+</head>
+<body>
+    <canvas id="openrndr-canvas"></canvas>
+    <div id="menu"></div>
+    <div id="sourceButton"><a href="#">source</a></div>
+    <pre><code id="sourceCode" class="language-kotlin"></code></pre>
+
+    <script src="highlightjs/highlight.min.js"></script>
+    <script>
+        function loadAndHighlight(url) {
+            fetch(url).then(response => response.text()).then((data) => {
+                let codeBlock = document.getElementById('sourceCode')
+                console.log(codeBlock)
+                console.log(data)
+                codeBlock.innerHTML = data
+                hljs.highlightElement(codeBlock);
+            })
+        }
+        document.getElementById('sourceButton').addEventListener('click', function() {
+            var e = document.getElementById('sourceCode');
+            e.style.display = e.style.display != 'block' ? 'block' : 'none';
+        });
+    </script>
+    <script src="openrndr-program.js"></script>
+</body>
+</html>
diff --git a/openrndr-program.js b/openrndr-program.js
diff --git a/sources-for-web/TemplateProgram.kt.txt b/sources-for-web/TemplateProgram.kt.txt
@@ -0,0 +1,23 @@
+import kotlinx.browser.document
+import kotlinx.browser.window
+import org.w3c.dom.url.URLSearchParams
+
+fun main() {
+    // Take the GET argument from the URL specifying which program to run. If missing take the first.
+    val currentProgram = URLSearchParams(window.location.search).get("program") ?: myApps.keys.first()
+
+    // Launch the selected program
+    myApps[currentProgram]!!.invoke()
+
+    // Create a div with clickable links
+    val menuDiv = document.getElementById("menu")
+    menuDiv?.innerHTML = myApps.keys.joinToString(" ") { programName ->
+        if (programName != currentProgram)
+            """<a href="?program=$programName">$programName</a> """
+        else
+            """<span>$programName</span> """
+    }
+
+    loadAndHighlight("sources-for-web/${currentProgram}.kt.txt")
+}
+external fun loadAndHighlight(url: String)
diff --git a/sources-for-web/appList.kt.txt b/sources-for-web/appList.kt.txt
@@ -0,0 +1,6 @@
+// This file was auto-generated by Gradle
+val myApps = mapOf(
+    "fabulousPink" to :: fabulousPink,
+    "bouncyBubbles" to :: bouncyBubbles,
+    "justGreen" to :: justGreen,
+)
diff --git a/sources-for-web/bouncyBubbles.kt.txt b/sources-for-web/bouncyBubbles.kt.txt
@@ -0,0 +1,69 @@
+import org.openrndr.application
+import org.openrndr.color.ColorRGBa
+import org.openrndr.color.rgb
+import org.openrndr.extra.noise.Random
+import org.openrndr.extra.noise.shapes.uniform
+import org.openrndr.math.Vector2
+import org.openrndr.shape.clamp
+
+// Based on https://github.com/processing/processing-website/blob/main/content/examples/Topics/Motion/BouncyBubbles/BouncyBubbles.pde
+
+fun bouncyBubbles() = application {
+    configure {
+        title = "OPENRNDR - Bouncy Bubbles"
+    }
+
+    program {
+        val numBalls = 12
+        val spring = 0.05
+        val gravity = Vector2(0.0, 0.03)
+        val friction = -0.9
+
+        class Ball(var position: Vector2, val radius: Double, val id: Int) {
+            var velocity = Vector2.ZERO
+            val safeArea = drawer.bounds.offsetEdges(-radius)
+
+            fun collide(others: List<Ball>) {
+                for (i in id + 1 until numBalls) {
+                    val diff = others[i].position - position
+                    val minDist = others[i].radius + radius
+                    if (diff.length < minDist) {
+                        val targetPos = position + diff.normalized * minDist
+                        val acceleration = (targetPos - others[i].position) * spring
+                        velocity -= acceleration
+                        others[i].velocity += acceleration
+                    }
+                }
+            }
+
+            fun move() {
+                velocity += gravity
+                position += velocity
+                if (position.x !in radius..width - radius) {
+                    velocity *= Vector2(friction, 1.0)
+                }
+                if (position.y !in radius..height - radius) {
+                    velocity *= Vector2(1.0, friction)
+                }
+                position = position.clamp(safeArea)
+            }
+
+            fun display() {
+                drawer.circle(position, radius)
+            }
+        }
+
+        val balls = List(numBalls) { Ball(drawer.bounds.uniform(), Random.double(20.0, 60.0), it) }
+
+        extend {
+            drawer.clear(rgb("#282622"))
+            drawer.stroke = null
+            drawer.fill = ColorRGBa.WHITE.opacify(0.8)
+            balls.forEach {
+                it.collide(balls)
+                it.move()
+                it.display()
+            }
+        }
+    }
+}
diff --git a/sources-for-web/fabulousPink.kt.txt b/sources-for-web/fabulousPink.kt.txt
@@ -0,0 +1,33 @@
+import org.openrndr.application
+import org.openrndr.color.ColorRGBa
+import org.openrndr.extra.noise.Random
+import org.openrndr.extra.shapes.hobbycurve.hobbyCurve
+import org.openrndr.math.Polar
+
+fun fabulousPink() = application {
+    configure {
+        title = "OPENRNDR - Fabulous Pink"
+    }
+    program {
+        console.log("Kotlin says OPENRNDR program started")
+
+        extend {
+            drawer.clear(ColorRGBa.PINK)
+
+            drawer.fill = null
+            drawer.circle(drawer.bounds.center, 250.0)
+
+            drawer.fill = ColorRGBa.WHITE
+
+            // Create a List of points centered in the window.
+            // Use polar coordinates. The radius is animated using simplex noise.
+            val points = List(12) {
+                val angle = it * 30.0
+                val radius = 200.0 + Random.simplex(it * 0.1, it * 1.7 + seconds * 0.2) * 100.0
+                drawer.bounds.center + Polar(angle, radius).cartesian
+            }
+            // Construct and draw a closed Hobby curve with the points.
+            drawer.contour(hobbyCurve(points, true))
+        }
+    }
+}
diff --git a/sources-for-web/justGreen.kt.txt b/sources-for-web/justGreen.kt.txt
@@ -0,0 +1,14 @@
+import org.openrndr.application
+import org.openrndr.color.ColorRGBa
+
+fun justGreen() = application {
+    configure {
+        title = "OPENRNDR - Just Green"
+    }
+    program {
+        extend {
+            drawer.clear(ColorRGBa.GREEN)
+            drawer.circle(mouse.position, 150.0)
+        }
+    }
+}