From c617962fd283b9aeef4662e0f590897e311d1006 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebasti=C3=A1n=20Santisi?= <s@ntisi.com.ar>
Date: Sat, 20 Apr 2024 17:04:14 +0000
Subject: [PATCH] =?UTF-8?q?Modularizaci=C3=B3n?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html                | 571 +-------------------------------------
 js/argentinianflag.js     |  47 ++++
 js/checkboard.js          |  25 ++
 js/main.js                | 185 ++++++++++++
 js/screen.js              | 117 ++++++++
 spring.js => js/spring.js |   0
 js/windcone.js            |  23 ++
 js/windmill.js            |  98 +++++++
 style.css                 | 102 +++++++
 9 files changed, 600 insertions(+), 568 deletions(-)
 create mode 100644 js/argentinianflag.js
 create mode 100644 js/checkboard.js
 create mode 100644 js/main.js
 create mode 100644 js/screen.js
 rename spring.js => js/spring.js (100%)
 create mode 100644 js/windcone.js
 create mode 100644 js/windmill.js
 create mode 100644 style.css
diff --git a/index.html b/index.html
index 95a3dab..80f5df2 100644
--- a/index.html
+++ b/index.html
@@ -9,579 +9,14 @@
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link href="https://fonts.googleapis.com/css2?family=Encode+Sans:wdth,wght@87.5,100..900&display=swap" rel="stylesheet">
-<style>
-    body {
-        margin: 0;
-        font-family: "Encode Sans", sans-serif;
-        font-weight: 500;
-        font-size: 4vh;
-        color: #fff;
-    }
-    #container {
-        position: absolute;
-        top: 0;
-        left: 0;
-        user-select: none;
-        width: 100%;
-        height: 100%;
-        margin: 0;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-    }
-    #popup {
-	z-index: 1000;
-	max-width: 70vw;
-	max-height: 70vh;
-	overflow-x: hidden;
-	overflow-y: scroll;
-        width: auto;
-        border: solid #fff 5px;
-        height: auto;
-        background: #00000088;
-        padding: 4vh;
-	text-align: center;
-    }
-    #popup p + p {
-	margin-top: -3vh;
-    }
-    #close {
-        font-weight: 900;
-        float: right;
-	font-size: 1.5em;
-        margin-top: -5vh;
-        margin-right: -3.5vh;
-    }
-    #close:hover {
-        color: #fff;
-    }
-    #button {
-        position: absolute;
-        right: 4vh;
-        top: 4vh;
-        padding: 4vh;
-        background: darkblue;
-        font-weight: 800;
-    }
-    #button:hover {
-        background: blue;
-    }
-    #copyright {
-        z-index: 2;
-        font-size: 0.4em;
-        position: absolute;
-        bottom: 5px;
-    }
-    #rotate {
-       display: none;
-       position: absolute;
-       top: 0;
-       left: 0;
-       margin: 1vh;
-       font-size: 0.5em;
-       width: 20vh;
-    }
-    #rotate img {
-        width: 7vh;
-        float: left;
-        padding-right: 1vh;
-    }
-    #logo {
-        z-index: 1;
-        position: absolute;
-        right: 1vh;
-        bottom: 1vh;
-    }
-    #logo img {
-        width: 15vh;
-        opacity: 50%;
-    }
-    #logo img:hover {
-        opacity: 100%;
-    }
-</style>
-<body>
-<script type="module">
-import * as THREE from 'three';
-import { STLLoader } from 'https://cdn.jsdelivr.net/npm/three@0.136.0/examples/jsm/loaders/STLLoader.js';
-import { Spring } from './spring.js';
-
-const isMobile = 'ontouchstart' in document.documentElement;
-
-const scene = new THREE.Scene();
-const camera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000);
-
-const renderer = new THREE.WebGLRenderer({antialias: true});
-//renderer.setPixelRatio( window.devicePixelRatio );
-renderer.setSize(window.innerWidth, window.innerHeight);
-document.body.appendChild(renderer.domElement);
-
-window.camera = camera;
-window.three = THREE;
-window.renderer = renderer;
-
-/*const axesHelper = new THREE.AxesHelper( 5 );
-scene.add( axesHelper );*/
-
-var width = 10;
-var height = 10;
-
-function plane(width, height) {
-    var geometry = new THREE.PlaneGeometry(width, height, width, height);
-    geometry = geometry.toNonIndexed();
-    const colors = new three.BufferAttribute(new Float32Array(geometry.attributes.position.array.length), 3);
-    for(var i = 0; i < colors.count; i++) {
-        var col = Math.trunc(i / 6) % width;
-        var row = Math.trunc(i / 6 / width);
-        if((col + row % 2) % 2)
-            colors.setXYZ(i, 0x44 / 0xff, 0xaa / 0xff, 0);
-        else
-            colors.setXYZ(i, 0x55 / 0xff, 0xd4 / 0xff, 0);
-    }
-    geometry.setAttribute('color', colors);
-    const material = new THREE.MeshBasicMaterial({vertexColors: THREE.VertexColors});
-    var mesh = new THREE.Mesh(geometry, material);
-
-    mesh.position.x = width / 2;
-    mesh.position.y = height / 2;
-    return mesh;
-}
-
-var cb = plane(width, height);
-scene.add(cb);
-window.cb = cb;
-
-var center = new THREE.Vector3(width / 2, height / 2, 0);
-var direction = new THREE.Vector3(-height / 2, -width / 2, 0);
-
-window.r = 23;
-window.phi = -0.5;
-window.theta = 0.2;
-window.center = center;
-window.center.z = -0.95;
-window.center.x += 0.5;
-window.z = 15;
-camera.setFocalLength(60);
-
-const raycaster = new THREE.Raycaster();
-const pointer = new THREE.Vector2();
-
-var clicked = false;
-window.point = new THREE.Vector3();
-window.pos = new THREE.Vector3();
-
-function log(s) {
-    document.getElementById("text").innerHTML = s;
-    document.getElementById("popup").style.display = "block";
-}
-
-function updatePointers(event) {
-    if(isMobile) {
-        var touch = event.touches[0] || event.changedTouches[0];
-        var x = touch.pageX;
-        var y = touch.pageY;
-    }
-    else {
-        var x = event.clientX
-        var y = event.clientY;
-    }
-    pointer.x = (x / window.innerWidth) * 2 - 1;
-    pointer.y = -(y / window.innerHeight) * 2 + 1;
-    window.point.set(( x / window.innerWidth) * 2 - 1, -(y / window.innerHeight) * 2 + 1, 0.5);
-}
-
-function onClick(event) {
-    clicked = true;
-    updatePointers(event);
-}
-
-function onMouseUp(event) {
-    clicked = false;
-    updatePointers(event);
-    //log(clicked);
-    ws.move(window.pos, true);
-}
-
-function onPointerMove(event) {
-    updatePointers(event);
-    window.point.unproject(camera); 
-    window.point.sub(camera.position).normalize();
-    
-    var distance = -camera.position.z / window.point.z;
-    
-    window.pos.copy(camera.position).add(window.point.multiplyScalar(distance));
-    if(clicked) {
-        ws.move(window.pos);
-    }
-}
-
-function onResize() {
-    camera.aspect = window.innerWidth / window.innerHeight;
-    camera.fov = 15;
-
-    if(camera.aspect > window.aspect)
-        window.r = window.rad;
-    else {
-        window.r = window.rad * window.aspect / camera.aspect;
-    }
-    window.z = window.r / 2;
-    camera.updateProjectionMatrix();
-    renderer.setSize(window.innerWidth, window.innerHeight);
-
-    document.getElementById("container").style.height = window.innerHeight;
-    document.getElementById("container").style.width = window.innerWidth;
-
-    document.getElementById("rotate").style.display = camera.aspect > 1 ? "none" : "block";
-
-    var theta = Math.PI / 2 - window.theta;
-    var phi = window.phi - Math.PI / 2;
-    var x = window.r * Math.sin(theta) * Math.cos(phi) + center.x;
-    var y = window.r * Math.sin(theta) * Math.sin(phi) + center.y;
-    var z = window.r * Math.cos(theta) + center.z;
-
-    camera.position.set(x, y, window.z);
-    camera.up = new THREE.Vector3(0,0,1);
-    camera.lookAt(center);
-}
-
-window.aspect = 2.0;
-window.rad = 23;
-window.resize = onResize;
-
-if(isMobile) {
-    window.addEventListener('touchstart', onClick);
-    window.addEventListener('touchend', onMouseUp);
-    window.addEventListener('touchmove', onPointerMove);
-}
-else {
-    window.addEventListener('mouseup', onMouseUp);
-    window.addEventListener('mousedown', onClick);
-    window.addEventListener('pointermove', onPointerMove);
-}
-window.addEventListener('resize', onResize);
-
-onResize();
-
-class WindMill extends THREE.Group {
-    static geometryBody = null;
-    static geometryBlades = null;
-
-    static {
-        const loader = new STLLoader();
-        loader.load('./aspas_126m.stl', function(geometry) {
-            WindMill.geometryBlades = geometry;
-        });
-        loader.load('./cuerpo_126m.stl', function(geometry) {
-            WindMill.geometryBody = geometry;
-        });
-    }
-
-    static isReady() {
-        return WindMill.geometryBody != null && WindMill.geometryBlades != null;
-    }
-
-    constructor() {
-        super()
-
-        this.material = new THREE.MeshBasicMaterial({color: 0xffffff});
-        this.materialCircle = new THREE.MeshBasicMaterial({color: 0xaa0000});
-        //this.materialCircle.transparent = true;
-        //this.materialCircle.opacity = 0.5;
-
-        this.meshBlades = new THREE.Mesh(WindMill.geometryBlades, this.material);
-        this.meshBlades.scale.set(0.0075, 0.0075, 0.0075);
-        this.meshBlades.position.z = 90/126;
-
-        this.meshBody = new THREE.Mesh(WindMill.geometryBody, this.material);
-        this.meshBody.scale.set(0.0075, 0.0075, 0.0075);
-        this.meshBody.position.z = 90/126;
-
-        var geometry = new THREE.CircleGeometry(0.5, 20);
-        this.meshCircle = new THREE.Mesh(geometry, this.materialCircle);
-        this.meshCircle.position.z = 0.01;
-	this.meshCircle.visible = false;
-
-        this.add(this.meshBlades);
-        this.add(this.meshBody);
-        this.add(this.meshCircle);
-
-        this.spring1 = new Spring(0.5, 2, 20, 6, 1, new THREE.MeshBasicMaterial({color: 0xff0000}));
-        this.spring1.position.z = 90/126;
-        this.spring1.rotation.z = -Math.PI/2;
-        this.spring1.update();
-        this.add(this.spring1);
-
-        this.spring2 = new Spring(0.5, 2, 20, 6, 1, new THREE.MeshBasicMaterial({color: 0xff0000}));
-        this.spring2.position.z = 90/126;
-        this.spring2.rotation.z = -Math.PI/2;
-        this.spring2.rotation.x = Math.PI * 2 / 3;
-        this.spring2.update();
-        this.add(this.spring2);
-
-        this.spring3 = new Spring(0.5, 2, 20, 6, 1, new THREE.MeshBasicMaterial({color: 0xff0000}));
-        this.spring3.position.z = 90/126;
-        this.spring3.rotation.z = -Math.PI/2;
-        this.spring3.rotation.x = Math.PI * 4 / 3;
-        this.spring3.update();
-        this.add(this.spring3);
-
-	this.spring1.visible = this.spring2.visible = this.spring3.visible = false;
-
-        this.selected = false;
-    }
-
-    animate() {
-        this.meshBlades.rotation.x += 0.1;
-        this.spring1.rotation.x += 0.1;
-        this.spring2.rotation.x += 0.1;
-        this.spring3.rotation.x += 0.1;
-    }
-
-    select(selected) {
-        if(selected == this.selected) return;
-        this.selected = selected;
-	this.meshCircle.visible = selected;
-
-        if(selected)
-            this.material.color.set(0xff0000);
-        else
-            this.material.color.set(0xffffff);
-    }
-}
-
-window.windmill = WindMill;
-window.scene = scene;
-
-var wm = null;
-var wms = [];
-window.wms = wms;
-
-class WindSimulation {
-    constructor(width, height, mills) {
-        this.width = width;
-        this.height = height;
-        this.mills = mills;
-
-        this.wms = [];
-        this.init();
-
-        this.wm = null;
-        this.simulation = null;
-    }
-
-    init() {
-        if(!WindMill.isReady()) {
-            setTimeout(() => { this.init() }, 100);
-            return;
-        }
-        for(var i = 0; i < this.mills; i++) {
-            var wm = new WindMill();
-            wm.position.set(i + 0.5, i + 0.5, 0);
-            wm.rotation.z = Math.PI;
-            scene.add(wm);
-            this.wms.push(wm);
-        }
-        this.wm = this.wms[0];
-    }
-
-    move(pos, ended=false) {
-        if(this.simulation) {
-            scene.remove(this.simulation);
-            this.simulation = null;
-        }
-
-        var wm = this.wm;
-
-        if(ended) {
-            if(this.wm != null) this.wm.select(false);
-            this.wm = null;
-        }
-
-        if(wm == null) return false;
-        if(pos.x > this.width - 0.5 || pos.x < 0.5 || pos.y > this.height - 0.5 || pos.y < 0.5) return false;
-        for(var i = 0; i < this.wms.length; i++) {
-            if(this.wms[i] == wm) continue;
-            if(pos.clone().sub(this.wms[i].position).length() < 1)
-                return false;
-        }
-        wm.position.x = pos.x;
-        wm.position.y = pos.y;
-        return true;
-    }
-
-    animate() {
-        requestAnimationFrame(() => { this.animate(); });
-        raycaster.setFromCamera(pointer, camera);
-
-        if(!isMobile || (isMobile && clicked)) {
-            const intersects = raycaster.intersectObjects(this.wms);
-            var wm = null;
-            for(var i = 0; i < intersects.length; i++) {
-                if(intersects[i].object.geometry.constructor.name != "CylinderGeometry") {
-                    wm = intersects[i].object.parent;
-                    break;
-                }
-            }
-
-            if(!clicked || isMobile) {
-                if(this.wm != wm) {
-                    if(this.wm != null) this.wm.select(false);
-                    if(wm != null) wm.select(true);
-                }
-                this.wm = wm;
-            }
-        }
-
-        for(var i = 0; i < this.wms.length; i++) {
-            this.wms[i].animate();
-            //this.wms[i].rotation.z += 0.01;
-        }
-
-    flag.animate();
-/*
-	cone.rotation.y = 0.1 * Math.sin(Date.now() / 1000);
-	cone.rotation.x = 0.08 * Math.sin(Date.now() / 5000);
-*/
-
-        renderer.render(scene, camera);
-    }
-
-    simulate() {
-        var xhr = new XMLHttpRequest();
-        xhr.open("POST", "/solver/", true);
-        xhr.setRequestHeader("Content-Type", "application/json");
-        xhr.onreadystatechange = () => {
-            if (xhr.readyState === 4 && xhr.status === 200) {
-                var json = JSON.parse(xhr.responseText);
-                this.add_simulation(json.ws);
-            }
-        };
-        var pos = [];
-        for(var i = 0; i < this.wms.length; i++)
-            pos.push([this.wms[i].position.y, this.wms[i].position.x]);
-        console.log(pos);
-        var data = JSON.stringify({"pos": pos});
-        xhr.send(data);
-    }
-
-    add_simulation(ws) {
-        var geometry = new THREE.PlaneGeometry(this.width, this.height, 10 * this.width, 10 * this.height);
-        var colors = new three.BufferAttribute(new Float32Array(geometry.attributes.position.count * 4), 4);
-        geometry.setAttribute('color', colors);
-        const material = new THREE.MeshBasicMaterial({vertexColors: true, transparent: true,});
-        var mesh = new THREE.Mesh(geometry, material);
-        mesh.position.set(this.width / 2, this.height / 2, 90/126);
-
-        for(var i = 0; i < colors.count; i++) {
-            var j = Math.trunc(i / 101);
-	        colors.setXYZW(i, 1 - ws[i % 101][100 - j] / 8, 0, 0, 1 - ws[i % 101][100 - j] / 8);
-        }
-
-        if(this.simulation)
-            scene.remove(this.simulation);
-        this.simulation = mesh;
-        scene.add(mesh);
-    }
-}
-
-const loader = new STLLoader();
-//loader.load('./casa_80.stl', function(geometry) {
-loader.load('./MonumentoBandera.stl', function(geometry) {
-	var material = new THREE.MeshBasicMaterial({color: 0xffffff});
-	var mesh = new THREE.Mesh(geometry, material);
-	var scale = 0.0093;
-        mesh.scale.setScalar(scale);
-	mesh.rotation.z = -Math.PI / 2;
-	mesh.position.x = 9.5;
-	mesh.position.y = 0.3;
-	scene.add(mesh);
-	window.casa = mesh;
-});
-
-// Based on https://codepen.io/okada-web/pen/OJydGzy?editors=0010
-class ArgentinianFlag extends THREE.Group {
-    constructor(height) {
-        super();
-
-        var geometry = new THREE.PlaneGeometry(3,2,30,20);
-        var colors = new three.BufferAttribute(new Float32Array(geometry.attributes.position.array.length), 3);
-        geometry.setAttribute('color', colors);
-        for(var i = 0; i < colors.count; i++)
-	        if(i < 31 * 7 || i >= 31 * 14)
-		        colors.setXYZ(i, 117/255, 170/255, 219/255);
-	        else
-		        colors.setXYZ(i, 1, 1, 1);
-        var material = new THREE.MeshBasicMaterial({side:THREE.DoubleSide, vertexColors: true});
-        this.mesh = new THREE.Mesh(geometry,material);
-        this.mesh.rotateX(Math.PI/2);
-
-        var scale = height / 3;
-        this.mesh.position.x = 1.5 * scale;
-        this.mesh.position.z = 1 * scale;
-        this.mesh.scale.setScalar(scale);
-        this.add(this.mesh);
-    }
-
-    animate() {
-	    var hor = 0.3;
-    	var speed = 0.1;
-	    var ver = 0.1;
-    	var swing = 0.5;
-	    var pos = this.mesh.geometry.attributes.position;
-        const time = Date.now() * speed / 50;
-    	for (let y=0; y<20+1; y++) {
-	        for (let x=0; x<30+1; x++) {
-	            const index = x + y * (30+1);
-	            const vertex = pos[index];
-	            pos.setZ(index, Math.sin(hor * x + ver * y - time) * swing * x / 40);
-	        }
-	    }
-	    pos.needsUpdate = true;
-    }
-}
-
-var flag = new ArgentinianFlag(0.3);
-scene.add(flag);
-window.flag = flag;
-flag.position.set(9.5, 0.3, 0.3);
-flag.rotation.z = Math.PI;
-
-/*
-var geometry = new THREE.CylinderGeometry(0.09, 0.03, 0.5, 10, 5, true);
-    geometry = geometry.toNonIndexed();
-    var colors = new three.BufferAttribute(new Float32Array(geometry.attributes.position.array.length), 3);
-        geometry.setAttribute('color', colors);
-	for(var i = 0; i < colors.count; i++) {
-		if((Math.trunc(i / 6) + Math.trunc(i / 30) % 2) % 2)
-			colors.setXYZ(i, 1, 1, 1);
-		else
-			colors.setXYZ(i, 1, 0.3, 0);
-	}
-var material = new THREE.MeshBasicMaterial({vertexColors: true, side: THREE.DoubleSide});
-var mesh = new THREE.Mesh(geometry, material);
-mesh.position.z = 1;
-mesh.position.x = 9.5;
-mesh.position.y = 0.5;
-mesh.rotation.z = -Math.PI / 2;
-var cone = mesh;
-scene.add(mesh);*/
-
-
-
-
-
-var ws = new WindSimulation(10, 10, 5);
-window.ws = ws;
-
-window.scene = scene;
-ws.animate();
-
-</script>
+<link href="style.css" rel="stylesheet">
+<script type="module" src="js/main.js"></script>
 <script>
 function hide() {
     document.getElementById("popup").style.display = "none";
 }
 </script>
+<body>
 <div id="container">
         <div id="popup">
             <div id="close" onclick="hide();">✗</div>
diff --git a/js/argentinianflag.js b/js/argentinianflag.js
new file mode 100644
index 0000000..79479fe
--- /dev/null
+++ b/js/argentinianflag.js
@@ -0,0 +1,47 @@
+/* Copyright (C) 2024 Sebastián Santisi <ssantisi@fi.uba.ar>, CSC-CONICET
+Based on https://codepen.io/okada-web/pen/OJydGzy?editors=0010
+*/
+import * as THREE from 'three';
+
+class ArgentinianFlag extends THREE.Group {
+    constructor(height) {
+        super();
+
+        var geometry = new THREE.PlaneGeometry(3,2,30,20);
+        var colors = new three.BufferAttribute(new Float32Array(geometry.attributes.position.array.length), 3);
+        geometry.setAttribute('color', colors);
+        for(var i = 0; i < colors.count; i++)
+	        if(i < 31 * 7 || i >= 31 * 14)
+		        colors.setXYZ(i, 117/255, 170/255, 219/255);
+	        else
+		        colors.setXYZ(i, 1, 1, 1);
+        var material = new THREE.MeshBasicMaterial({side:THREE.DoubleSide, vertexColors: true});
+        this.mesh = new THREE.Mesh(geometry,material);
+        this.mesh.rotateX(Math.PI/2);
+
+        var scale = height / 3;
+        this.mesh.position.x = 1.5 * scale;
+        this.mesh.position.z = 1 * scale;
+        this.mesh.scale.setScalar(scale);
+        this.add(this.mesh);
+    }
+
+    animate() {
+	    var hor = 0.3;
+    	var speed = 0.1;
+	    var ver = 0.1;
+    	var swing = 0.5;
+	    var pos = this.mesh.geometry.attributes.position;
+        const time = Date.now() * speed / 50;
+    	for (let y=0; y<20+1; y++) {
+	        for (let x=0; x<30+1; x++) {
+	            const index = x + y * (30+1);
+	            const vertex = pos[index];
+	            pos.setZ(index, Math.sin(hor * x + ver * y - time) * swing * x / 40);
+	        }
+	    }
+	    pos.needsUpdate = true;
+    }
+}
+
+export { ArgentinianFlag };
diff --git a/js/checkboard.js b/js/checkboard.js
new file mode 100644
index 0000000..ff6420a
--- /dev/null
+++ b/js/checkboard.js
@@ -0,0 +1,25 @@
+/* Copyright (C) 2024 Sebastián Santisi <ssantisi@fi.uba.ar>, CSC-CONICET */
+import * as THREE from 'three';
+
+function checkBoard(width, height) {
+    var geometry = new THREE.PlaneGeometry(width, height, width, height);
+    geometry = geometry.toNonIndexed();
+    const colors = new three.BufferAttribute(new Float32Array(geometry.attributes.position.array.length), 3);
+    for(var i = 0; i < colors.count; i++) {
+        var col = Math.trunc(i / 6) % width;
+        var row = Math.trunc(i / 6 / width);
+        if((col + row % 2) % 2)
+            colors.setXYZ(i, 0x44 / 0xff, 0xaa / 0xff, 0);
+        else
+            colors.setXYZ(i, 0x55 / 0xff, 0xd4 / 0xff, 0);
+    }
+    geometry.setAttribute('color', colors);
+    const material = new THREE.MeshBasicMaterial({vertexColors: THREE.VertexColors});
+    var mesh = new THREE.Mesh(geometry, material);
+
+    mesh.position.x = width / 2;
+    mesh.position.y = height / 2;
+    return mesh;
+}
+
+export { checkBoard };
diff --git a/js/main.js b/js/main.js
new file mode 100644
index 0000000..c6971d4
--- /dev/null
+++ b/js/main.js
@@ -0,0 +1,185 @@
+/* Copyright (C) 2024 Sebastián Santisi <ssantisi@fi.uba.ar>, CSC-CONICET */
+
+import * as THREE from 'three';
+import { STLLoader } from 'https://cdn.jsdelivr.net/npm/three@0.136.0/examples/jsm/loaders/STLLoader.js';
+import { WindMill } from './windmill.js';
+import { Screen } from './screen.js';
+import { ArgentinianFlag } from './argentinianflag.js';
+import { checkBoard } from './checkboard.js';
+
+window.three = THREE;
+
+const scene = new THREE.Scene();
+const camera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000);
+const renderer = new THREE.WebGLRenderer({antialias: true});
+document.body.appendChild(renderer.domElement);
+//renderer.setPixelRatio( window.devicePixelRatio );
+
+function log(s) {
+    document.getElementById("text").innerHTML = s;
+    document.getElementById("popup").style.display = "block";
+}
+
+class WindSimulation {
+    constructor(width, height, mills) {
+        this.width = width;
+        this.height = height;
+        this.mills = mills;
+
+        this.wms = [];
+        this.init_windmills();
+
+        this.wm = null;
+        this.simulation = null;
+        this.xhr = null;
+
+        this.checkBoard = checkBoard(width, height);
+        scene.add(this.checkBoard);
+
+        const loader = new STLLoader();
+        loader.load('./MonumentoBandera.stl', (geometry) => {
+            var material = new THREE.MeshBasicMaterial({color: 0xffffff});
+            var mesh = new THREE.Mesh(geometry, material);
+            var scale = 0.0093;
+            mesh.scale.setScalar(scale);
+            mesh.rotation.z = -Math.PI / 2;
+            mesh.position.x = 9.5;
+            mesh.position.y = 0.3;
+            scene.add(mesh);
+            this.monument = mesh;
+        });
+
+        this.flag = new ArgentinianFlag(0.3);
+        this.flag.position.set(9.5, 0.3, 0.3);
+        this.flag.rotation.z = Math.PI;
+        scene.add(this.flag);
+    }
+
+    init_windmills() {
+        if(!WindMill.isReady()) {
+            setTimeout(() => { this.init_windmills() }, 100);
+            return;
+        }
+        for(var i = 0; i < this.mills; i++) {
+            var wm = new WindMill();
+            wm.position.set(i + 0.5, i + 0.5, 0);
+            wm.rotation.z = Math.PI;
+            scene.add(wm);
+            this.wms.push(wm);
+        }
+        this.wm = this.wms[0];
+    }
+
+    move(pos, ended=false) {
+        if(this.simulation) {
+            scene.remove(this.simulation);
+            this.simulation = null;
+        }
+
+        var wm = this.wm;
+
+        if(ended) {
+            if(this.wm != null) this.wm.select(false);
+            this.wm = null;
+        }
+
+        if(wm == null) return false;
+        if(pos.x > this.width - 0.5 || pos.x < 0.5 || pos.y > this.height - 0.5 || pos.y < 0.5) return false;
+        for(var i = 0; i < this.wms.length; i++) {
+            if(this.wms[i] == wm) continue;
+            if(pos.clone().sub(this.wms[i].position).length() < 1)
+                return false;
+        }
+        wm.position.x = pos.x;
+        wm.position.y = pos.y;
+        return true;
+    }
+
+    animate() {
+        requestAnimationFrame(() => { this.animate(); });
+
+        if(!Screen.isMobile || (Screen.isMobile && screen.clicked)) {
+            const intersects = screen.raycaster.intersectObjects(this.wms);
+            var wm = null;
+            for(var i = 0; i < intersects.length; i++) {
+                if(intersects[i].object.geometry.constructor.name != "CylinderGeometry") {
+                    wm = intersects[i].object.parent;
+                    break;
+                }
+            }
+
+            if(!screen.clicked || Screen.isMobile) {
+                if(this.wm != wm) {
+                    if(this.wm != null) this.wm.select(false);
+                    if(wm != null) wm.select(true);
+                }
+                this.wm = wm;
+            }
+        }
+
+        for(var i = 0; i < this.wms.length; i++) {
+            this.wms[i].animate();
+            //this.wms[i].rotation.z += 0.01;
+        }
+        //this.flag.rotation.z += 0.01;
+
+        this.flag.animate();
+
+        renderer.render(scene, camera);
+    }
+
+    simulate() {
+        if(this.xhr != null)
+            this.xhr.abort();
+
+        var xhr = new XMLHttpRequest();
+        this.xhr = xhr;
+        xhr.open("POST", "/solver/", true);
+        xhr.setRequestHeader("Content-Type", "application/json");
+        xhr.onreadystatechange = () => {
+            if(this.xhr != xhr) return;
+            if (xhr.readyState === 4 && xhr.status === 200) {
+                var json = JSON.parse(xhr.responseText);
+                this.add_simulation(json.ws);
+                this.xhr = null;
+            }
+        };
+        var pos = [];
+        for(var i = 0; i < this.wms.length; i++)
+            pos.push([this.wms[i].position.y, this.wms[i].position.x]);
+        var data = JSON.stringify({"pos": pos});
+        xhr.send(data);
+    }
+
+    add_simulation(ws) {
+        var geometry = new THREE.PlaneGeometry(this.width, this.height, 10 * this.width, 10 * this.height);
+        var colors = new three.BufferAttribute(new Float32Array(geometry.attributes.position.count * 4), 4);
+        geometry.setAttribute('color', colors);
+        const material = new THREE.MeshBasicMaterial({vertexColors: true, transparent: true,});
+        var mesh = new THREE.Mesh(geometry, material);
+        mesh.position.set(this.width / 2, this.height / 2, 90/126);
+
+        for(var i = 0; i < colors.count; i++) {
+            var j = Math.trunc(i / 101);
+	        colors.setXYZW(i, 1 - ws[i % 101][100 - j] / 8, 0, 0, 1 - ws[i % 101][100 - j] / 8);
+        }
+
+        if(this.simulation)
+            scene.remove(this.simulation);
+        this.simulation = mesh;
+        scene.add(mesh);
+    }
+}
+
+var width = 10;
+var height = 10;
+var ws = new WindSimulation(width, height, 5);
+
+var screen = new Screen(camera, renderer, new THREE.Vector3(width / 2 + 0.5, height / 2, -0.95));
+screen.setMoveCallBack((pos, end) => { ws.move(pos, end); });
+screen.onResize();
+
+window.ws = ws;
+window.screen = screen;
+window.scene = scene;
+ws.animate();
diff --git a/js/screen.js b/js/screen.js
new file mode 100644
index 0000000..1937a44
--- /dev/null
+++ b/js/screen.js
@@ -0,0 +1,117 @@
+/* Copyright (C) 2024 Sebastián Santisi <ssantisi@fi.uba.ar>, CSC-CONICET */
+import * as THREE from 'three';
+
+class Screen {
+    static isMobile = 'ontouchstart' in document.documentElement;
+
+    constructor(camera, renderer, center) {
+        this.camera = camera;
+        this.renderer = renderer;
+        this.center = center;
+        this.cbmove = null;
+
+        this.raycaster = new THREE.Raycaster();
+        this.pointerScreen = new THREE.Vector2();
+        this.pointerWorld = new THREE.Vector3();
+
+        this.radius = 23;
+        this.phi = -0.5;
+        this.theta = 0.45;
+        this.z = 15;
+        this.aspect = 2.24;
+
+        this.clicked = false;
+
+        this.camera.setFocalLength(60);
+
+        if(Screen.isMobile) {
+            window.addEventListener('touchstart', (event) => { this.onClick(event); });
+            window.addEventListener('touchend', (event) => { this.onMouseUp(event); });
+            window.addEventListener('touchmove', (event) => { this.onPointerMove(event); });
+        }
+        else {
+            window.addEventListener('mouseup', (event) => { this.onMouseUp(event); });
+            window.addEventListener('mousedown', (event) => { this.onClick(event); });
+            window.addEventListener('pointermove', (event) => { this.onPointerMove(event); });
+        }
+        window.addEventListener('resize', () => { this.onResize(); });
+    }
+
+    setMoveCallBack(cbmove) {
+        this.cbmove = cbmove;
+    }
+
+    updatePointers(event) {
+        if(Screen.isMobile) {
+            var touch = event.touches[0] || event.changedTouches[0];
+            var x = touch.pageX;
+            var y = touch.pageY;
+        }
+        else {
+            var x = event.clientX
+            var y = event.clientY;
+        }
+        this.pointerScreen.x = (x / window.innerWidth) * 2 - 1;
+        this.pointerScreen.y = -(y / window.innerHeight) * 2 + 1;
+        this.raycaster.setFromCamera(this.pointerScreen, this.camera);
+
+        var point = new THREE.Vector3(this.pointerScreen.x, this.pointerScreen.y, 0.5);
+        point.unproject(this.camera); 
+        point.sub(this.camera.position).normalize();
+        var distance = -this.camera.position.z / point.z;
+        this.pointerWorld.copy(this.camera.position).add(point.multiplyScalar(distance));
+    }
+
+    onClick(event) {
+        this.clicked = true;
+        this.updatePointers(event);
+    }
+
+    onMouseUp(event) {
+        this.clicked = false;
+        this.updatePointers(event);
+        ws.move(this.pointerWorld, true);
+        if(this.cbmove)
+            this.cbmove(this.pointerWorld, true);
+    }
+
+    onPointerMove(event) {
+        this.updatePointers(event);
+        if(this.clicked) {
+            if(this.cbmove)
+                this.cbmove(this.pointerWorld, false);
+        }
+    }
+
+    onResize() {
+        this.camera.aspect = window.innerWidth / window.innerHeight;
+        this.camera.fov = 15;
+        this.camera.updateProjectionMatrix();
+
+        var r;
+        if(this.camera.aspect > this.aspect)
+            r = this.radius;
+        else {
+            r = this.radius * this.aspect / this.camera.aspect;
+        }
+
+        this.renderer.setSize(window.innerWidth, window.innerHeight);
+        document.getElementById("container").style.height = window.innerHeight;
+        document.getElementById("container").style.width = window.innerWidth;
+        document.getElementById("rotate").style.display = this.camera.aspect > 1 ? "none" : "block";
+
+        var theta = Math.PI / 2 - this.theta;
+        var phi = this.phi - Math.PI / 2;
+        var x = r * Math.sin(theta) * Math.cos(phi) + this.center.x;
+        var y = r * Math.sin(theta) * Math.sin(phi) + this.center.y;
+        var z = r * Math.cos(theta) + this.center.z;
+
+        this.camera.position.set(x, y, z);
+        this.camera.up = new THREE.Vector3(0,0,1);
+        this.camera.lookAt(this.center);
+
+        this.raycaster.setFromCamera(this.pointerScreen, this.camera);
+    }
+}
+
+export { Screen };
diff --git a/spring.js b/js/spring.js
similarity index 100%
rename from spring.js
rename to js/spring.js
diff --git a/js/windcone.js b/js/windcone.js
new file mode 100644
index 0000000..c628bee
--- /dev/null
+++ b/js/windcone.js
@@ -0,0 +1,23 @@
+var geometry = new THREE.CylinderGeometry(0.09, 0.03, 0.5, 10, 5, true);
+    geometry = geometry.toNonIndexed();
+    var colors = new three.BufferAttribute(new Float32Array(geometry.attributes.position.array.length), 3);
+        geometry.setAttribute('color', colors);
+	for(var i = 0; i < colors.count; i++) {
+		if((Math.trunc(i / 6) + Math.trunc(i / 30) % 2) % 2)
+			colors.setXYZ(i, 1, 1, 1);
+		else
+			colors.setXYZ(i, 1, 0.3, 0);
+	}
+var material = new THREE.MeshBasicMaterial({vertexColors: true, side: THREE.DoubleSide});
+var mesh = new THREE.Mesh(geometry, material);
+mesh.position.z = 1;
+mesh.position.x = 9.5;
+mesh.position.y = 0.5;
+mesh.rotation.z = -Math.PI / 2;
+var cone = mesh;
+scene.add(mesh);
+
+/*
+	cone.rotation.y = 0.1 * Math.sin(Date.now() / 1000);
+	cone.rotation.x = 0.08 * Math.sin(Date.now() / 5000);
+*/
diff --git a/js/windmill.js b/js/windmill.js
new file mode 100644
index 0000000..40d377b
--- /dev/null
+++ b/js/windmill.js
@@ -0,0 +1,98 @@
+/* Copyright (C) 2024 Sebastián Santisi <ssantisi@fi.uba.ar>, CSC-CONICET */
+import * as THREE from 'three';
+import { STLLoader } from 'https://cdn.jsdelivr.net/npm/three@0.136.0/examples/jsm/loaders/STLLoader.js';
+import { Spring } from './spring.js';
+
+class WindMill extends THREE.Group {
+    static geometryBody = null;
+    static geometryBlades = null;
+
+    static {
+        const loader = new STLLoader();
+        loader.load('./aspas_126m_85.stl', function(geometry) {
+            WindMill.geometryBlades = geometry;
+        });
+        loader.load('./cuerpo_126m_50.stl', function(geometry) {
+            WindMill.geometryBody = geometry;
+        });
+    }
+
+    static isReady() {
+        return WindMill.geometryBody != null && WindMill.geometryBlades != null;
+    }
+
+    constructor() {
+        super()
+
+        this.material = new THREE.MeshBasicMaterial({color: 0xffffff});
+        this.materialCircle = new THREE.MeshBasicMaterial({color: 0xaa0000});
+        //this.materialCircle.transparent = true;
+        //this.materialCircle.opacity = 0.5;
+
+        this.meshBlades = new THREE.Mesh(WindMill.geometryBlades, this.material);
+        this.meshBlades.scale.set(0.0075, 0.0075, 0.0075);
+        this.meshBlades.position.z = 90/126;
+
+        this.meshBody = new THREE.Mesh(WindMill.geometryBody, this.material);
+        this.meshBody.scale.set(0.0075, 0.0075, 0.0075);
+        this.meshBody.position.z = 90/126;
+
+        var geometry = new THREE.CircleGeometry(0.5, 20);
+        this.meshCircle = new THREE.Mesh(geometry, this.materialCircle);
+        this.meshCircle.position.z = 0.01;
+        this.meshCircle.visible = false;
+
+        this.add(this.meshBlades);
+        this.add(this.meshBody);
+        this.add(this.meshCircle);
+
+        this.spring1 = new Spring(0.5, 2, 20, 6, 1, new THREE.MeshBasicMaterial({color: 0xff0000}));
+        this.spring1.position.z = 90/126;
+        this.spring1.rotation.z = -Math.PI/2;
+        this.spring1.rotation.x = -Math.PI;
+        this.spring1.update();
+        this.add(this.spring1);
+
+        this.spring2 = new Spring(0.5, 2, 20, 6, 1, new THREE.MeshBasicMaterial({color: 0xff0000}));
+        this.spring2.position.z = 90/126;
+        this.spring2.rotation.z = -Math.PI/2;
+        this.spring2.rotation.x = -Math.PI * 1 / 3;
+        this.spring2.update();
+        this.add(this.spring2);
+
+        this.spring3 = new Spring(0.5, 2, 20, 6, 1, new THREE.MeshBasicMaterial({color: 0xff0000}));
+        this.spring3.position.z = 90/126;
+        this.spring3.rotation.z = -Math.PI/2;
+        this.spring3.rotation.x = Math.PI * 1 / 3;
+        this.spring3.update();
+        this.add(this.spring3);
+
+        this.spring1.visible = this.spring2.visible = this.spring3.visible = false;
+
+        this.selected = false;
+    }
+
+    animate() {
+        this.meshBlades.rotation.x += 0.1;
+        this.spring1.rotation.x += 0.1;
+        this.spring2.rotation.x += 0.1;
+        this.spring3.rotation.x += 0.1;
+    }
+
+    select(selected) {
+        if(selected == this.selected) return;
+        this.selected = selected;
+	this.meshCircle.visible = selected;
+
+        if(selected)
+            this.material.color.set(0xff0000);
+        else
+            this.material.color.set(0xffffff);
+    }
+
+    show_springs(value) {
+	    this.spring1.visible = this.spring2.visible = this.spring3.visible = value;
+    }
+}
+
+export { WindMill };
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..bd51fdc
--- /dev/null
+++ b/style.css
@@ -0,0 +1,102 @@
+body {
+    margin: 0;
+    font-family: "Encode Sans", sans-serif;
+    font-weight: 500;
+    font-size: 4vh;
+    color: #fff;
+}
+
+#container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    user-select: none;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+#popup {
+    z-index: 1000;
+    max-width: 70vw;
+    max-height: 70vh;
+    overflow-x: hidden;
+    overflow-y: scroll;
+    width: auto;
+    border: solid #fff 5px;
+    height: auto;
+    background: #00000088;
+    padding: 4vh;
+    text-align: center;
+}
+
+#popup p + p {
+    margin-top: -3vh;
+}
+
+#close {
+    font-weight: 900;
+    float: right;
+    font-size: 1.5em;
+    margin-top: -5vh;
+    margin-right: -3.5vh;
+}
+
+#close:hover {
+    color: #fff;
+}
+
+#button {
+    position: absolute;
+    right: 4vh;
+    top: 4vh;
+    padding: 4vh;
+    background: darkblue;
+    font-weight: 800;
+}
+
+#button:hover {
+    background: blue;
+}
+
+#copyright {
+    z-index: 2;
+    font-size: 0.4em;
+    position: absolute;
+    bottom: 5px;
+}
+
+#rotate {
+   display: none;
+   position: absolute;
+   top: 0;
+   left: 0;
+   margin: 1vh;
+   font-size: 0.5em;
+   width: 20vh;
+}
+
+#rotate img {
+    width: 7vh;
+    float: left;
+    padding-right: 1vh;
+}
+
+#logo {
+    z-index: 1;
+    position: absolute;
+    right: 1vh;
+    bottom: 1vh;
+}
+
+#logo img {
+    width: 15vh;
+    opacity: 50%;
+}
+
+#logo img:hover {
+    opacity: 100%;
+}
