Init

.gitignore

@@ -0,0 +1,2 @@
+.idea
+

project.json

@@ -0,0 +1,6 @@
+{
+	"display_name": "Pendulum",
+	"info_text": "Watch 500 Double-Pendulums diverge into chaos",
+	"visible": true,
+	"tags": ["Simulation"]
+}

public/data/scripts/ts/events.ts

@@ -0,0 +1,27 @@
+'use strict';
+
+function eventsSetup(){
+
+    p.keyPressed = () => {
+        switch (p.keyCode){
+            //Ctrl + D
+            case 68:
+                if (p.keyIsDown(17)){
+                    debug = !debug;
+                    let msg = 'Debug mode turned ' + (debug ? 'ON' : 'OFF');
+                    console.info(msg);
+                    return false;
+                }
+                break;
+
+        }
+    };
+
+    p.windowResized = () => {
+        let element = $('#canvas_holder');
+        let w = element.width(),
+            h = element.height();
+        p.resizeCanvas(w, h);
+    };
+}
+

public/data/scripts/ts/init.ts

@@ -0,0 +1,83 @@
+'use strict';
+
+let debug = false,
+    font: any,
+    settings: any;
+
+let socket: SocketIOClient.Socket;
+
+let antiCacheQuery = '?_=' + new Date().getTime();
+
+let manager;
+
+const p = new p5((p: p5) => {
+
+    p.preload = () => {
+        settings = p.loadJSON('data/settings/settings.json' + antiCacheQuery, {}, 'json', (json: any) => {
+            console.log('Local settings loaded: ', json);
+        }, (error: any) => {
+            console.log('Local settings failed: ', error);
+        });
+    
+        font = p.loadFont('data/styles/fonts/Tajawal/Tajawal-Regular.ttf' + antiCacheQuery, (font: any) => {
+            console.log('Local font loaded: ', font);
+        }, (error: any) => {
+            console.log('Local font failed: ', error);
+        });
+    }
+
+    p.setup = () => {
+        interfaceSetup();
+        canvasSetup();
+        eventsSetup();
+        loadDynamicScripts().then(() => {
+            //Load other stuff
+            manager = new Manager();
+        });
+    }
+
+    p.draw = () => {
+        p.background(30);
+
+        if (manager){
+            manager.update();
+            manager.draw();
+        }
+
+        if (debug) debugInformation();
+    }
+});
+
+function debugInformation(){
+
+}
+
+
+function interfaceSetup(){
+    
+}
+
+function canvasSetup(){
+    p.frameRate(60);
+    let element = $('#canvas_holder');
+    let w = element.width(),
+        h = element.height();
+	let canvas = p.createCanvas(w, h);
+	canvas.parent('canvas_holder');
+    p.textFont(font);
+}
+
+async function loadDynamicScripts(){
+    const json = await p.httpGet('data/settings/libraries.json' + antiCacheQuery, 'json') as Object;
+    let requests = [];
+    for (let script in json) {
+        if (json[script]) {
+            let url = '/lib/benjocraeft/' + script + '.js';
+            requests.push($.getScript(url, () => {
+                console.log('Successfully loaded script: ', url);
+            }));
+        }
+    }
+    await $.when(...requests);
+    console.log('All dynamic scripts have been loaded!');
+}

public/data/scripts/ts/manager.ts

@@ -0,0 +1,32 @@
+class Manager {
+
+    nPendula: NPendulum[] = []
+
+    h = 0.07
+
+    constructor() {
+        p.colorMode(p.HSB, 100);
+        let count = 500;
+        for (let i = 0; i < count; i++){
+            let rad = i / count / 1e3 + p.PI * 1.05;
+            let hue = i / count * 100;
+            let color = p.color(hue, 100, 100);
+            this.nPendula.push(
+                new NPendulum([200, 200], [2, 2], rad, color)
+            );
+        }
+        p.colorMode(p.RGB);
+    }
+
+    update(){
+        this.nPendula.forEach(p => p.update(this.h));
+    }
+
+    draw(){
+        p.push()
+        p.translate(p.width / 2, p.height / 2);
+        this.nPendula.forEach(p => p.draw());
+        p.pop();
+    }
+
+}

public/data/scripts/ts/pendulum.ts

@@ -0,0 +1,100 @@
+const g = 9.81
+
+class NPendulum {
+
+    pendula: Pendulum[] = []
+
+    constructor(lengths, masses, startRad, color) {
+        switch (lengths.length) {
+            case 1:
+                this.pendula.push(new Pendulum(lengths[0], masses[0], startRad, color));
+                break;
+            case 2:
+                let p1 = new Pendulum(lengths[0], masses[0], startRad, color);
+                let p2 = new Pendulum(lengths[1], masses[1], startRad, color);
+                p1.calcAcc = function(pendula){
+                    let p2 = pendula[1];
+                    return -g / this.l * p.sin(this.rad) - p2.l * p2.m / this.l / (this.m + p2.m)
+                        * (p.cos(this.rad - p2.rad) * p2.acc + p.sin(this.rad - p2.rad) * p.pow(p2.vel, 2));
+                }
+                p2.calcAcc = function (pendula){
+                    let p1 = pendula[0];
+                    return -g / this.l * p.sin(this.rad) - p1.l / this.l
+                        * (p.cos(p1.rad - this.rad) * p1.acc - p.sin(p1.rad - this.rad) * p.pow(p1.vel, 2));
+                }
+                this.pendula.push(p1, p2);
+                break;
+        }
+        this.pendula[0].origin = p.createVector(0, 0);
+    }
+
+    updateOrigins(){
+        this.pendula.forEach((p, i) => {
+            if (i > 0){
+                let before = this.pendula[i - 1];
+                p.origin = p5.Vector.add(before.origin, before.pos);
+            }
+        });
+    }
+
+    update(h){
+        this.pendula.forEach((p, i) => {
+            p.update(h, this.pendula);
+        });
+        this.updateOrigins();
+    }
+
+    draw(){
+        this.pendula.forEach(p => p.draw());
+    }
+
+}
+
+
+class Pendulum {
+
+    l: number
+    m: number
+
+    acc: number = 0
+    vel: number = 0
+    rad: number
+
+    origin: p5.Vector
+
+    color: p5.Color
+
+
+    constructor(l, m, rad, color) {
+        this.l = l;
+        this.m = m;
+        this.rad = rad;
+        this.color = color;
+    }
+
+    calcAcc(pendula){
+        return -g / this.l * p.sin(this.rad);
+    }
+
+    update(h, pendula = []){
+        this.acc = this.calcAcc(pendula);
+        this.vel += this.acc * h;
+        this.rad += this.vel * h;
+    }
+
+    draw(){
+        let pos = this.pos;
+        p.push();
+        p.translate(this.origin);
+        p.stroke(this.color);
+        p.strokeWeight(3);
+        p.line(0, 0, pos.x, pos.y);
+        p.ellipse(pos.x, pos.y, this.m * 5, this.m * 5);
+        p.pop();
+    }
+
+    get pos(){
+        return p5.Vector.mult(p.createVector(p.sin(this.rad), p.cos(this.rad)), this.l);
+    }
+
+}

public/data/settings/libraries.json

@@ -0,0 +1,7 @@
+{
+    "collision": false,
+    "colorPicker": false,
+    "cookie": false,
+    "prototypes": false,
+    "technical": false
+}

public/data/settings/settings.json

@@ -0,0 +1,23 @@
+{
+    "project": {
+        "name": "pendulum",
+        "author": "BenjoCraeft",
+        "version": "0.0.0",
+        "playerCounts": [],
+        "online": {
+            "iceServers": [
+                {"urls": "stun:stun.l.google.com:19302"},
+                {
+                    "urls": "turn:numb.viagenie.ca",
+                    "credential": "muazkh",
+                    "username": "webrtc@live.com"
+                }
+            ]
+        }
+    },
+    "frameWork": {
+        "frameRate": 60,
+        "width": null,
+        "height": null
+    }
+}

public/data/styles/color_picker.css

@@ -0,0 +1,88 @@
+#color_picker{
+	width: 300px;
+	height: 25%;
+	margin: 20px;
+	margin-top: 50px;
+	border: 5px solid #000;
+	background-color: #000;
+	-webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+	position: relative;
+}
+#color_picker_numeric{
+	width: 80%;
+	padding: 5%;
+	margin: 5%;
+	background-color: #888;
+	border-radius: 10px;
+	overflow: hidden;
+}
+.color_picker_rgb{
+	float: left;
+	width: 22%;
+	height: 35px;
+	font-size: 25px;
+	color: #000;
+}
+.color_picker_rgb:nth-child(1){
+	margin-right: 10%;
+	margin-left: 3%;
+	background-color: #F00;
+	
+}
+.color_picker_rgb:nth-child(2){
+	background-color: #0F0;
+}
+.color_picker_rgb:nth-child(3){
+	margin-left: 10%;
+	background-color: #00F;
+	color: #FFF;
+}
+#color_picker_hex{
+	width: 50%;
+	height: 30px;
+	font-size: 25px;
+	margin: 10% 25% 0 25%;
+}
+#saturation{
+	position: relative;
+	width: calc(100% - 33px);
+	height: 100%;
+	background: linear-gradient(to right, #FFF 0%, #F00 100%);
+	float: left;
+	margin-right: 6px;
+}
+#value {
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(to top, #000 0%, rgba(255,255,255,0) 100%);
+}
+#sb_picker{
+  border: 2px solid;
+  border-color: #FFF;
+  position: absolute;
+  width: 14px;
+  height: 14px;
+  border-radius: 10px;
+  bottom: 50px;
+  left: 50px;
+  box-sizing: border-box;
+  z-index: 10;
+}
+#hue {
+  width: 27px;
+  height: 100%;
+  position: relative;
+  float: left;
+  background: linear-gradient(to bottom, #F00 0%, #F0F 17%, #00F 34%, #0FF 50%, #0F0 67%, #FF0 84%, #F00 100%);
+}
+#hue_picker {
+  position: absolute;
+  background: #000;
+  border-bottom: 1px solid #000;
+  top: 0;
+  width: 27px;
+  height: 2px;
+}

public/data/styles/fonts/Tajawal/OFL.txt

@@ -0,0 +1,93 @@
+Copyright 2018 Boutros International. (https://www.boutrosfonts.com)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

public/data/styles/range_input.css

@@ -0,0 +1,89 @@
+input[type=range] {
+  -webkit-appearance: none;
+  margin: 18px 0;
+  width: 100%;
+  background: none;
+}
+input[type=range]:focus {
+  outline: none;
+}
+input[type=range]::-webkit-slider-runnable-track {
+  width: 100%;
+  height: 8.4px;
+  cursor: pointer;
+  animate: 0.2s;
+  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+  background: #3071a9;
+  border-radius: 1.3px;
+  border: 0.2px solid #010101;
+}
+input[type=range]::-webkit-slider-thumb {
+  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+  border: 1px solid #000000;
+  height: 36px;
+  width: 16px;
+  border-radius: 3px;
+  background: #ffffff;
+  cursor: pointer;
+  -webkit-appearance: none;
+  margin-top: -14px;
+}
+input[type=range]:focus::-webkit-slider-runnable-track {
+  background: #367ebd;
+}
+input[type=range]::-moz-range-track {
+  width: 100%;
+  height: 8.4px;
+  cursor: pointer;
+  animate: 0.2s;
+  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+  background: #3071a9;
+  border-radius: 1.3px;
+  border: 0.2px solid #010101;
+}
+input[type=range]::-moz-range-thumb {
+  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+  border: 1px solid #000000;
+  height: 36px;
+  width: 16px;
+  border-radius: 3px;
+  background: #ffffff;
+  cursor: pointer;
+}
+input[type=range]::-ms-track {
+  width: 100%;
+  height: 8.4px;
+  cursor: pointer;
+  animate: 0.2s;
+  background: transparent;
+  border-color: transparent;
+  border-width: 16px 0;
+  color: transparent;
+}
+input[type=range]::-ms-fill-lower {
+  background: #2a6495;
+  border: 0.2px solid #010101;
+  border-radius: 2.6px;
+  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+}
+input[type=range]::-ms-fill-upper {
+  background: #3071a9;
+  border: 0.2px solid #010101;
+  border-radius: 2.6px;
+  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+}
+input[type=range]::-ms-thumb {
+  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+  border: 1px solid #000000;
+  height: 36px;
+  width: 16px;
+  border-radius: 3px;
+  background: #ffffff;
+  cursor: pointer;
+}
+input[type=range]:focus::-ms-fill-lower {
+  background: #3071a9;
+}
+input[type=range]:focus::-ms-fill-upper {
+  background: #367ebd;
+}

public/index.html

@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+		<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.min.js" type="text/javascript"></script>
+        <script src="data/scripts/js/main.js" type="text/javascript"></script>
+		<link href="styles.css" rel="stylesheet">
+		<link href="data/styles/color_picker.css" rel="stylesheet">
+		<link href="data/styles/range_input.css" rel="stylesheet">
+		<title>Pendulum</title>
+    </head>
+    <body>
+        <div id="p5_loading"></div>
+        <div id="content">
+            <div id="options" style="display: none">
+                <label>
+                    <input type="radio" name="type">
+                    Single pendulum
+                </label>
+                <br>
+                <label>
+                    <input type="radio" name="type" checked>
+                    Double pendulum
+                </label>
+                <br>
+                <label>
+                    Count:
+                    <input type="number" min="1" max="500" value="1">
+                </label>
+                <br>
+                <label>
+                    L1:
+                    <input type="range" min="50" max="400" value="200">
+                    <span>200</span>
+                </label>
+                <br>
+                <label>
+                    L2:
+                    <input type="range" min="50" max="400" value="200">
+                    <span>200</span>
+                </label>
+                <br>
+                <label>
+                    M1:
+                    <input type="range" min="1" max="10" value="1">
+                    <span>1</span>
+                </label>
+                <br>
+                <label>
+                    M2:
+                    <input type="range" min="1" max="10" value="1">
+                    <span>1</span>
+                </label>
+                <br>
+                <input type="button" value="Add">
+            </div>
+            <div id="canvas_holder"></div>
+        </div>
+    </body>
+</html>

public/package-lock.json

@@ -0,0 +1,47 @@
+{
+	"name": "pendulum",
+	"version": "1.0.0",
+	"lockfileVersion": 2,
+	"requires": true,
+	"packages": {
+		"": {
+			"name": "pendulum",
+			"version": "1.0.0",
+			"devDependencies": {
+				"@types/jquery": "^3.5.16"
+			}
+		},
+		"node_modules/@types/jquery": {
+			"version": "3.5.16",
+			"resolved": "https://registry.npmjs.org/@types/jquery/-/jquery-3.5.16.tgz",
+			"integrity": "sha512-bsI7y4ZgeMkmpG9OM710RRzDFp+w4P1RGiIt30C1mSBT+ExCleeh4HObwgArnDFELmRrOpXgSYN9VF1hj+f1lw==",
+			"dev": true,
+			"dependencies": {
+				"@types/sizzle": "*"
+			}
+		},
+		"node_modules/@types/sizzle": {
+			"version": "2.3.3",
+			"resolved": "https://registry.npmjs.org/@types/sizzle/-/sizzle-2.3.3.tgz",
+			"integrity": "sha512-JYM8x9EGF163bEyhdJBpR2QX1R5naCJHC8ucJylJ3w9/CVBaskdQ8WqBf8MmQrd1kRvp/a4TS8HJ+bxzR7ZJYQ==",
+			"dev": true
+		}
+	},
+	"dependencies": {
+		"@types/jquery": {
+			"version": "3.5.16",
+			"resolved": "https://registry.npmjs.org/@types/jquery/-/jquery-3.5.16.tgz",
+			"integrity": "sha512-bsI7y4ZgeMkmpG9OM710RRzDFp+w4P1RGiIt30C1mSBT+ExCleeh4HObwgArnDFELmRrOpXgSYN9VF1hj+f1lw==",
+			"dev": true,
+			"requires": {
+				"@types/sizzle": "*"
+			}
+		},
+		"@types/sizzle": {
+			"version": "2.3.3",
+			"resolved": "https://registry.npmjs.org/@types/sizzle/-/sizzle-2.3.3.tgz",
+			"integrity": "sha512-JYM8x9EGF163bEyhdJBpR2QX1R5naCJHC8ucJylJ3w9/CVBaskdQ8WqBf8MmQrd1kRvp/a4TS8HJ+bxzR7ZJYQ==",
+			"dev": true
+		}
+	}
+}

public/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "public",
+  "version": "1.0.0",
+  "dependencies": {
+    
+  }
+}

public/styles.css

@@ -0,0 +1,72 @@
+a:link, a:hover, a:active, a:visited{color: #000;}
+
+html, body{margin: 0; padding: 0; height: 100%; width: 100%;}
+
+canvas{margin: 0; padding: 0; border: none; display: block;}
+
+button:hover{cursor: pointer;}
+
+@font-face{
+	font-family: "Tajawal";
+	src: url("data/styles/fonts/Tajawal/Tajawal-Regular.ttf");
+}
+@font-face{
+	font-family: "Elronet";
+	src: url("data/styles/fonts/Elronet/Elronmonospace.ttf");
+}
+
+*{
+    font-family: "Tajawal", serif;
+	color: #000;
+	font-size: 17px;
+}
+
+:root{
+    --width: 100vw;
+    --height: 100vh;
+}
+
+body {
+    overflow: hidden;
+}
+
+/**
+ * Standard styles
+ */
+
+#canvas_holder{
+    position: relative;
+	width: calc(var(--width)); /* -325px);*/
+    height: var(--height);
+    float: left;
+}
+#canvas_holder canvas{
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border-radius: inherit;
+}
+#p5_loading{
+    display: none;
+}
+
+
+#options {
+    float: left;
+    width: 300px;
+    height: 100vh;
+    padding: 10px;
+    border-right: 5px solid rgb(150, 150, 150);
+    background-color: rgb(40, 40, 40);
+}
+#options *:not(input[type=number], input[type=button]){
+    color: white;
+}
+
+
+input {
+    margin: 5px;
+}
+

public/tsconfig.json

@@ -0,0 +1,9 @@
+{
+    "compilerOptions": {
+        "target": "es6",
+        "module": "amd",
+        "sourceMap": true,
+        "alwaysStrict": true,
+        "outFile": "./data/scripts/js/main.js"
+    }
+}