Antonio Vallecillos: Cinemática v0.03

2017/10/19

Cinemática v0.03

Código html (index.html):

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8"/>
    <title>Botón</title>
    <script src="libraries/p5.js"></script>
    <script src="libraries/p5.dom.js"></script>
    <script src="code.js"></script>
  </head>
  <body link="black" style="text-align:center; margin:0px; background-color:white; font-family:sans-serif; font-size:12px; width:500px; margin-left:auto; margin-right:auto;">
    <h1 style="font-size:24px; text-align:center; color:grey;">CINEMÁTICA</h1>
    <p style="text-align:justify; color:grey;">Cinemática es una aplicación orientada al estudio del movimiento de un objeto en lanzamiento libre. Puedes descargarte una versión para dispositivos android en el siguiente <a href="https://play.google.com/store/apps/details?id=appinventor.ai_fotovallegrafia.Cinematica&feature=more_from_developer#?t=W251bGwsMSwyLDEwMiwiYXBwaW52ZW50b3IuYWlfZm90b3ZhbGxlZ3JhZmlhLkNpbmVtYXRpY2EiXQ.." style="text-decoration:none" target="_blank">enlace</a> o visitar la página de desarrollo en <a href="http://fotovallegrafia.blogspot.com.es/p/aplicaciones-android-cinematica.html" style="text-decoration:none" target="_blank">fotovallegrafía</a> para más información.</p>
    <p style="text-align:justify; color:grey;">El botón <b><cite>¡Fuego!</cite></b> inicia el movimiento con los parámetros prefijados en el formulario. En cualquier momento puedes cambiar los valores numéricos de posición, velocidad y aceleración inicial en <b><cite>x</cite></b> y en <b><cite>y</cite></b> para simular lanzamientos diferentes. Puedes detener el objeto en cualquier momento mediante el botón <b><cite>Pausa</cite></b>.</p>
    <table style="border:1px solid black; margin: 0 auto; width:500px">
      <tr>
        <th style="text-align:right; color:grey">Posición x inicial:</th>
        <th><input type="number" id="px0" placeholder="0" onclick="fpx0()" style="width:70px"></input></th>
        <th style="text-align:right; color:grey">Posición y inicial:</th>
        <th><input type="number" id="py0" placeholder="400" onclick="fpy0()" style="width:70px"></input></th>
      </tr>
      <tr>
        <th style="text-align:right; color:grey">Velocidad x inicial:</th>
        <th><input type="number" id="vx0" placeholder="25" onclick="fvx0()" style="width:70px"></input></th>
        <th style="text-align:right; color:grey">Velocidad y inicial:</th>
        <th><input type="number" id="vy0" placeholder="-75" onclick="fvy0()" style="width:70px"></input></th>
      </tr>
      <tr>
        <th style="text-align:right; color:grey">Aceleración x inicial:</th>
        <th><input type="number" id="ax0" placeholder="0" onclick="fax0()" style="width:70px"></input></th>
        <th style="text-align:right; color:grey">Aceleración y inicial:</th>
        <th><input type="number" id="ay0" placeholder="9,81" onclick="fay0()" style="width:70px"></input></th>
      </tr>
    </table>
    <p>
    <table style="border:1px solid black; margin: 0 auto; width:500px">
      <tr>
        <th><button onclick="ffuego()" style="width:240px">¡Fuego!</button></th>
        <th><button onclick="fpausa()" style="width:240px">Pausa</button></th>
      </tr>
    </table>
    <p>
  </body>
</html>

Código p5.js (code.js):

var lienzo;
var div;
var t = 0;
var x;
var y;
var px0 = 0;
var py0 = 500;
var vx0 = 25;
var vy0 = -95;
var ax0 = 0;
var ay0 = 9.81;
var newton;
var manzana;
var movimiento = 0;

function preload(){
  newton = loadImage("files/IsaacNewtonB05.jpg");
  manzana = loadImage("files/AppleA01.gif");
}

function setup(){
  lienzo = createCanvas(500,500);
  div = createElement('div', 'Antonio Vallecillos 2017');
  div.style("font-family", "sans-serif");
  div.style("color", "grey");
  div.style("font-size", "12px");
  div.style("padding", "5px");
}

function draw(){
  background(255,215,0);
  imageMode(CORNER);
  image(newton, 0, 0, 500, 500);
  x = 0.5 * ax0 * t * t + vx0 * t + round(px0);
  y = 0.5 * ay0 * t * t + vy0 * t + round(py0);
  vx = ax0 * t + vx0;
  vy = ay0 * t + vy0;
  noFill();
  rect(0,0,499,499);
  imageMode(CENTER);
  image(manzana, x, y-2, 25, 25);
  debug();
  if (movimiento == 1) {
    t = t + 0.1;
  }
}

function fpx0() {
  px0 = document.getElementById("px0").value;
}

function fpy0() {
  py0 = document.getElementById("py0").value;
}

function fvx0() {
  vx0 = document.getElementById("vx0").value;
}

function fvy0() {
  vy0 = document.getElementById("vy0").value;
}

function fax0() {
  ax0 = document.getElementById("ax0").value;
}

function fay0() {
  ay0 = document.getElementById("ay0").value;
}

function ffuego(){
  t = 0;
  movimiento = 1;
}

function fpausa(){
  movimiento = 0;
}

function debug(){
  fill(128, 0, 0);
  text("px0 = " + round(px0), 10, 15);
  text("py0 = " + round(py0), 10, 25);
  text("vx0 = " + round(vx0), 10, 35);
  text("vy0 = " + round(vy0), 10, 45);
  text("ax0 = " + round(ax0), 10, 55);
  text("ay0 = " + ay0, 10, 65);
  text("x = " + round(x), 80, 15);
  text("y = " + round(y), 80, 25);
  text("vx = " + round(vx), 80, 35);
  text("vy = " + round(vy), 80, 45);
  text("ax = " + round(ax0), 80, 55);
  text("ay = " + ay0, 80, 65);
}

Páginas

2017/10/19

Cinemática v0.03