Add automatically generated web page

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;
+}

highlightjs/kotlin.min.js

@@ -0,0 +1,46 @@
+/*! `kotlin` grammar compiled for Highlight.js 11.10.0 */
+(()=>{var e=(()=>{"use strict"
+;var e="[0-9](_*[0-9])*",n=`\\.(${e})`,a="[0-9a-fA-F](_*[0-9a-fA-F])*",i={
+className:"number",variants:[{
+begin:`(\\b(${e})((${n})|\\.)?|(${n}))[eE][+-]?(${e})[fFdD]?\\b`},{
+begin:`\\b(${e})((${n})[fFdD]?\\b|\\.([fFdD]\\b)?)`},{begin:`(${n})[fFdD]?\\b`
+},{begin:`\\b(${e})[fFdD]\\b`},{
+begin:`\\b0[xX]((${a})\\.?|(${a})?\\.(${a}))[pP][+-]?(${e})[fFdD]?\\b`},{
+begin:"\\b(0|[1-9](_*[0-9])*)[lL]?\\b"},{begin:`\\b0[xX](${a})[lL]?\\b`},{
+begin:"\\b0(_*[0-7])*[lL]?\\b"},{begin:"\\b0[bB][01](_*[01])*[lL]?\\b"}],
+relevance:0};return e=>{const n={
+keyword:"abstract as val var vararg get set class object open private protected public noinline crossinline dynamic final enum if else do while for when throw try catch finally import package is in fun override companion reified inline lateinit init interface annotation data sealed internal infix operator out by constructor super tailrec where const inner suspend typealias external expect actual",
+built_in:"Byte Short Char Int Long Boolean Float Double Void Unit Nothing",
+literal:"true false null"},a={className:"symbol",begin:e.UNDERSCORE_IDENT_RE+"@"
+},s={className:"subst",begin:/\$\{/,end:/\}/,contains:[e.C_NUMBER_MODE]},t={
+className:"variable",begin:"\\$"+e.UNDERSCORE_IDENT_RE},r={className:"string",
+variants:[{begin:'"""',end:'"""(?=[^"])',contains:[t,s]},{begin:"'",end:"'",
+illegal:/\n/,contains:[e.BACKSLASH_ESCAPE]},{begin:'"',end:'"',illegal:/\n/,
+contains:[e.BACKSLASH_ESCAPE,t,s]}]};s.contains.push(r);const l={
+className:"meta",
+begin:"@(?:file|property|field|get|set|receiver|param|setparam|delegate)\\s*:(?:\\s*"+e.UNDERSCORE_IDENT_RE+")?"
+},c={className:"meta",begin:"@"+e.UNDERSCORE_IDENT_RE,contains:[{begin:/\(/,
+end:/\)/,contains:[e.inherit(r,{className:"string"}),"self"]}]
+},o=i,b=e.COMMENT("/\\*","\\*/",{contains:[e.C_BLOCK_COMMENT_MODE]}),E={
+variants:[{className:"type",begin:e.UNDERSCORE_IDENT_RE},{begin:/\(/,end:/\)/,
+contains:[]}]},d=E;return d.variants[1].contains=[E],E.variants[1].contains=[d],
+{name:"Kotlin",aliases:["kt","kts"],keywords:n,
+contains:[e.COMMENT("/\\*\\*","\\*/",{relevance:0,contains:[{className:"doctag",
+begin:"@[A-Za-z]+"}]}),e.C_LINE_COMMENT_MODE,b,{className:"keyword",
+begin:/\b(break|continue|return|this)\b/,starts:{contains:[{className:"symbol",
+begin:/@\w+/}]}},a,l,c,{className:"function",beginKeywords:"fun",end:"[(]|$",
+returnBegin:!0,excludeEnd:!0,keywords:n,relevance:5,contains:[{
+begin:e.UNDERSCORE_IDENT_RE+"\\s*\\(",returnBegin:!0,relevance:0,
+contains:[e.UNDERSCORE_TITLE_MODE]},{className:"type",begin:/</,end:/>/,
+keywords:"reified",relevance:0},{className:"params",begin:/\(/,end:/\)/,
+endsParent:!0,keywords:n,relevance:0,contains:[{begin:/:/,end:/[=,\/]/,
+endsWithParent:!0,contains:[E,e.C_LINE_COMMENT_MODE,b],relevance:0
+},e.C_LINE_COMMENT_MODE,b,l,c,r,e.C_NUMBER_MODE]},b]},{
+begin:[/class|interface|trait/,/\s+/,e.UNDERSCORE_IDENT_RE],beginScope:{
+3:"title.class"},keywords:"class interface trait",end:/[:\{(]|$/,excludeEnd:!0,
+illegal:"extends implements",contains:[{
+beginKeywords:"public protected internal private constructor"
+},e.UNDERSCORE_TITLE_MODE,{className:"type",begin:/</,end:/>/,excludeBegin:!0,
+excludeEnd:!0,relevance:0},{className:"type",begin:/[,:]\s*/,end:/[<\(,){\s]|$/,
+excludeBegin:!0,returnEnd:!0},l,c]},r,{className:"meta",begin:"^#!/usr/bin/env",
+end:"$",illegal:"\n"},o]}}})();hljs.registerLanguage("kotlin",e)})();

index.html

@@ -0,0 +1,35 @@
+<!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 src="highlightjs/kotlin.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>

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)

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,
+)

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()
+            }
+        }
+    }
+}

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))
+        }
+    }
+}

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)
+        }
+    }
+}