Completo sin desafío

main
Sebastián Santisi 12 months ago
parent 10375e1faf
commit 4e281de747

Binary file not shown.

@ -31,7 +31,11 @@ function hide() {
function help() { function help() {
show('<h4>Simulador de Aerogeneradores y Parques Eólicos (SAPE)</h4>' + show('<h4>Simulador de Aerogeneradores y Parques Eólicos (SAPE)</h4>' +
'<div class="l s"><p>Desarrollado por:</p><ul><li>Dimas Barile (CSC-CONICET)</li><li>José Alberto Martínez Trespalacios (Universidad Tecnológica de Bolívar)</li><li>Sebastián Santisi (CSC-CONICET)</li></ul></div>'); '<p>Desarrollado por:</p><ul><li>Dimas Alejandro Barile (CSC-CONICET),</li><li>José Alberto Martínez Trespalacios (Universidad Tecnológica de Bolívar),</li><li>Sebastián Santisi (CSC-CONICET).</li></ul>' +
'<p>Monumento a la Bandera modelado por <a href="https://www.thingiverse.com/rfrosch/" target="_blank">rfrosch</a> bajo licencia CC BY-NC-SA.</p>' +
'<br /><p><b>¿Cómo se juega con el simulador?</b></p> <ul> <li>Clickeá sobre los aerogeneradores para ubicarlos donde creas que van a funcionar mejor.</li> <li>Intentá que todos los aerogeneradores reciban un viento con energía evitando posicionarlos atrás de otros aerogeneradores.</li> <li>Elegí la dirección de viento con los botones <div class="b"></div><div class="b"></div><div class="b"></div><div class="b"></div> y presiona ¡SIMULAR!</li> <li>Los aerogeneradores que reciban un viento poco energético se marcarán con un signo de exclamación ⚠️.</li> <li>El objetivo es que tu parque supere el 80% de eficiencia para cada uno de los vientos.</li> <li>Si ya cumpliste el objetivo para todos los vientos agregá más aerogeneradores con los botones <div class="b">+</div><div class="b">-</div>.</li> </ul>'
);
} }
/*function up() { light.shadow.camera.top += 1; light.shadow.camera.updateProjectionMatrix(); helper.update()} /*function up() { light.shadow.camera.top += 1; light.shadow.camera.updateProjectionMatrix(); helper.update()}
@ -58,13 +62,23 @@ function follow(e) {
<body> <body>
<div id="container"> <div id="container">
<div id="follower"></div> <div id="follower"></div>
<div id="results">Resultados</div> <div id="results"></div>
<div id="popup"> <div id="popup">
<div id="close" onclick="hide();"></div> <div id="close" onclick="hide();"></div>
<div id="text"> <div id="text">
<img src="assets/logooscuro.png" style="width: 30vh;" /><br /> <center><img src="assets/logooscuro.png" style="width: 30vh;" /></center>
<p>Simulador de Aerogeneradores y Parques Eólicos (SAPE)</p> <h3>Simulador de Aerogeneradores y Parques Eólicos (SAPE)</h3>
<p>Centro de Simulación Computacional para Aplicaciones Tecnológicas - CONICET</p> <h4>Centro de Simulación Computacional para Aplicaciones Tecnológicas (CSC) - CONICET</h4>
<p>¡Bienvenido al SAPE! Acá vas a poder experimentar de forma simplificada el diseño de un parque eólico.</p>
<p>¿Cómo se juega con el simulador?</p>
<ul>
<li>Clickeá sobre los aerogeneradores para ubicarlos donde creas que van a funcionar mejor.</li>
<li>Intentá que todos los aerogeneradores reciban un viento con energía evitando posicionarlos atrás de otros aerogeneradores.</li>
<li>Elegí la dirección de viento con los botones <div class="b"></div><div class="b"></div><div class="b"></div><div class="b"></div> y presiona ¡SIMULAR!</li>
<li>Los aerogeneradores que reciban un viento poco energético se marcarán con un signo de exclamación ⚠️.</li>
<li>El objetivo es que tu parque supere el 80% de eficiencia para cada uno de los vientos.</li>
<li>Si ya cumpliste el objetivo para todos los vientos agregá más aerogeneradores con los botones <div class="b">+</div><div class="b">-</div>.</li>
</ul>
</div> </div>
</div> </div>
<div id="right"> <div id="right">

@ -174,6 +174,8 @@ class WindSimulation {
scene.remove(this.simulation); scene.remove(this.simulation);
this.simulation = null; this.simulation = null;
this.simulationPot = null; this.simulationPot = null;
for(var i = 0; i < this.mills; i++)
this.wms[i].lowPower(false);
document.getElementById("follower").style.display = "none"; document.getElementById("follower").style.display = "none";
document.getElementById("results").style.display = "none"; document.getElementById("results").style.display = "none";
} }
@ -243,12 +245,24 @@ class WindSimulation {
add_simulation(ws, pot) { add_simulation(ws, pot) {
var sum = 0; var sum = 0;
for(let i = 0; i < pot.length; i++) { for(let i = 0; i < pot.length; i++) {
this.wms[i].lowPower(pot[i] < 2.75/*14.95 * 0.8*/) this.wms[i].lowPower(pot[i] < 14.95 * 0.5);
sum += pot[i]; sum += pot[i];
} }
var pasa = Math.round(sum / 14.95 / pot.length * 100) >= 80;
var results = document.getElementById("results") var results = document.getElementById("results")
results.innerHTML = (Math.round(sum * 100) / 100) + " GWh (" + Math.round(sum * 100 / 14.95 / pot.length) + "%)"; var innerHTML = '<h3>Resultados de la simulación</h3>' + (pasa ?
'<p style="max-width: 16em">🥳🥳🥳 ¡Tu simulación <b>está bien</b>! ¿Probaste otros vientos? Si sí agregá más aerogeneradores.</p>' :
'<p style="max-width: 16em">⚠️⚠️⚠️ ¡Tu simulación <b>no</b> funciona! Probá otras configuraciones.</p>') + '<table>';
for(let i = 0; i < pot.length; i++) {
var perc = Math.round(pot[i] / 14.95 * 100);
innerHTML += '<tr><td><b>Nº' + (i + 1) + ':</b></td><td>' + Math.round(pot[i] * 100) / 100 + ' GWh</td><td><div class="bar" style="background: linear-gradient(to right, ' + (perc >= 50 ? '#fff' : '#f00') + ' ' + perc + '%, #000 ' + perc + '%);"></div> ' + perc + '% ' + (perc < 50 ? '⚠️' : '') + '</td></tr>'
}
var perc = Math.round(sum / 14.95 / pot.length * 100);
innerHTML += '<tr class="last"><td>TOTAL:</td><td>' + Math.round(sum * 100) / 100 + ' GWh</td><td><div class="bar" style="background: linear-gradient(to right, ' + (perc >= 80 ? '#fff' : '#f00') + ' ' + perc + '%, #000 ' + perc + '%);"></div> ' + perc + '% ' + (perc < 80 ? '⚠️' : '') + '</td></tr></table>';
results.innerHTML = innerHTML;
results.style.display = "block"; results.style.display = "block";
var geometry = new THREE.PlaneGeometry(this.width, this.height, 10 * this.width, 10 * this.height); var geometry = new THREE.PlaneGeometry(this.width, this.height, 10 * this.width, 10 * this.height);

@ -11,6 +11,14 @@ body {
color: #fff; color: #fff;
} }
a {
color: #fff;
}
h3, h4 {
text-align: center;
}
#container { #container {
position: absolute; position: absolute;
top: 0; top: 0;
@ -35,19 +43,30 @@ body {
height: auto; height: auto;
background: #00000088; background: #00000088;
padding: 4vh; padding: 4vh;
text-align: center; text-align: left;
font-size: .7em;
} }
#popup p + p { #popup p + p {
margin-top: 1vh; margin-top: 1vh;
} }
.l { #popup h4 {
text-align: left; margin-bottom: 1vh;
} }
.s { #popup li {
font-size: .7em; margin-left: 5vh;
}
#popup .b {
display: inline-block;
font-weight: 800;
border: solid white .4vh;
border-radius: 1vh;
width: 1em;
text-align: center;
margin: 0 .2vh;
} }
#close { #close {
@ -114,6 +133,21 @@ body {
left: 1vh; left: 1vh;
} }
.bar {
border: solid white 1px;
display: inline-block;
width: 4em;
height: .7em;
}
tr.last {
font-weight: bold;
}
.last td {
border-top: solid white 1px;
}
#copyright { #copyright {
z-index: 2; z-index: 2;
font-size: 0.4em; font-size: 0.4em;

Loading…
Cancel
Save