2017/10/09

Movimiento con las flechas del teclado

Control de un sprite con las flechas del teclado (javascript)



Código html:
<!doctype html>
<html lang="es">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  <title>Control de un sprite con las flechas del teclado</title>
</head>

<body style="text-align:center; margin:0px; background-color:white">
<!--  <h1 align="center">Control de un sprite con las flechas del teclado</h1>
-->  
  <canvas id="canvas" width="500" height="500" style="background:#999">
    Este navegador no es compatible con el canvas
  </canvas>
  <script type="application/javascript" src="juego.js"></script>
</body>

</html>

Código javascript:
var canvas = null;
var ctx = null;
var lastPress = null;
var pause = true;

var x = 0;
var y = 0;
var dir = 0;

var KEY_ENTER = 13;
var KEY_LEFT = 37;
var KEY_UP = 38;
var KEY_RIGHT = 39;
var KEY_DOWN = 40;

window.requestAnimationFrame = (function (){
  return window.requestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    function (callback) {
      window.setTimeout(callback, 17);
    };
}());

document.addEventListener('keydown', function(evt){
  lastPress = evt.which;
}, false);

function paint(ctx) {
  // Limpiar el canvas
  ctx.fillStyle = '#000';
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  
  // Dibujar un cuadrado
  ctx.fillStyle = '#0F0';
  ctx.fillRect(x, y, 10, 10);
  
  // Debug última tecla pulsada
  ctx.fillStyle = '#FFF';
  ctx.fillText('Codigo de la ultima tecla pulsada: ' + lastPress, 10, 15);
  
  ctx.fillText('Direccion: ' + dir, 10, 25);
  ctx.fillText('Pulsa las teclas de flecha para controlar la direccion', 10, canvas.height-10);
  ctx.fillText('Pulsa Enter para comenzar / pausar el juego', 10, canvas.height-20);
  
  // Escribe PAUSA
  if (pause) {
    ctx.textAlign = 'center';
    ctx.fillText('PAUSA', canvas.width/2, canvas.height/2);
    ctx.textAlign = 'left';
  }
}

function act() {
  // Cambio de dirección
  if (lastPress == KEY_UP) {
    dir = 0;
  }
  if (lastPress == KEY_RIGHT) {
    dir = 1;
  }
  if (lastPress == KEY_DOWN) {
    dir = 2;
  }
  if (lastPress == KEY_LEFT){
    dir = 3;
  }
  
  if (!pause) {
    
    // Mover el cuadrado
    if (dir == 0) {
      y = y - 10;
    }
    if (dir == 1) {
      x = x + 10;
    }
    if (dir == 2) {
      y = y + 10;
    }
    if (dir == 3) {
      x = x - 10;
    }
    
    // Si se sale de la pantalla
    if (x > canvas.width) {
      x = 0;
    }
    if (y > canvas.height) {
      y = 0;
    }
    if (x < 0) {
      x = canvas.width;
    }
    if (y < 0) {
      y = canvas.height;
    }
  }
  
  // Pausa
  if (lastPress == KEY_ENTER) {
    pause = !pause;
    lastPress = null;
  }
}

function repaint(){
  window.requestAnimationFrame(repaint);
  paint(ctx);
}

function run() {
  setTimeout(run, 20);
  act();
}

function init() {
  // Canvas y content
  canvas = document.getElementById('canvas');
  ctx = canvas.getContext('2d');
  
  //Iniciar el juego
  run();
  repaint();
}

window.addEventListener('load', init, false);

2017/10/08

Tap n'fun



Código html:
<!doctype html>
<html>
 <head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
  <title>Tap n' fun</title>
  <script language="javascript" type="text/javascript" src="libraries/p5.js"></script> 
  <script language="javascript" type="text/javascript" src="libraries/p5.sound.js"></script>
  <script language="javascript" type="text/javascript" src="Tapnfun.js"></script>
 </head>
 <body style="text-align:center; margin:0px; padding:0px; background-color:white">
 </body>
</html>

Código p5.js:
var rojo;
var verde;
var azul;
var amarillo;
var cyan;
var magenta;
var naranja;
var gris;
var blanco;
var negro;
var mySound;

//function preload() {
//  mySound = loadSound('files/Sonido_01.mp3');
//}

function setup() {
  //createCanvas(window.innerWidth,window.innerHeight);
  createCanvas(500,500);
  rojo = new Circulo(random(width/3,2*width/3),random(height/3,2*height/3),50,random(1,3),color(255,0,0),0,color(0,0,0));
  verde = new Circulo(random(width/3,2*width/3),random(height/3,2*height/3),50,random(1,3),color(0,255,0),1,color(0,0,0));
  azul = new Circulo(random(width/3,2*width/3),random(height/3,2*height/3),50,random(1,3),color(0,0,255),2,color(255,255,255));
  amarillo = new Circulo(random(width/3,2*width/3),random(height/3,2*height/3),50,random(1,3),color(255,255,0),3,color(0,0,0));
  cyan = new Circulo(random(width/3,2*width/3),random(height/3,2*height/3),50,random(1,3),color(0,255,255),4,color(0,0,0));
  magenta = new Circulo(random(width/3,2*width/3),random(height/3,2*height/3),50,random(1,3),color(255,0,255),5,color(0,0,0));
  naranja = new Circulo(random(width/3,2*width/3),random(height/3,2*height/3),50,random(1,3),color(255,128,0),6,color(0,0,0)); 
  gris = new Circulo(random(width/3,2*width/3),random(height/3,2*height/3),50,random(1,3),color(128,128,128),7,color(0,0,0));
  blanco = new Circulo(random(width/3,2*width/3),random(height/3,2*height/3),50,random(1,3),color(255,255,255),8,color(0,0,0));
  negro = new Circulo(random(width/3,2*width/3),random(height/3,2*height/3),50,random(1,3),color(0,0,0),9,color(255,255,255));
}

function draw(){
  background(255,215,0);
  
  tituloApp();
  debug();
  
  rojo.dibujar();
  rojo.mover();
  verde.dibujar();
  verde.mover();
  azul.dibujar();
  azul.mover();
  amarillo.dibujar();
  amarillo.mover();
  cyan.dibujar();
  cyan.mover();
  magenta.dibujar();
  magenta.mover();
  naranja.dibujar();
  naranja.mover();
  gris.dibujar();
  gris.mover();
  blanco.dibujar();
  blanco.mover();
  negro.dibujar();
  negro.mover();
}

//function windowResized(){
//  resizeCanvas(window.innerWidth,window.innerHeight);
//}

function mousePressed(){
  rojo.tap();
  verde.tap();
  azul.tap();
  amarillo.tap();
  cyan.tap();
  magenta.tap();
  naranja.tap();
  gris.tap();
  blanco.tap();
  negro.tap();
  
//  mySound.setVolume(1);
//  mySound.play();
}

function tituloApp(){
  textSize(12);
  fill(100);
  strokeWeight(0);
  textAlign(CENTER);
  text('TAP `N FUN v0.03 [FEB-04-2017]',width/2,15);
  text('Design & coding: Antonio Vallecillos @fotovallegrafia',width/2,30);
  strokeWeight(1);
  stroke(100);
  line(0,40,width,40);
} 

function debug(){
  textSize(12);
  var p = [10,25,40,55,70,85,100,115,130,145,160,175,190,205];
  fill(100);
  strokeWeight(0);
  textAlign(LEFT);
  text('Debug:',10,height-p[8]);
  text('p[0] = ' + p[0],10,height-p[7]);
  text('Frame Rate: ' + frameRate().toFixed(0) + ' frames per second', 10,height-p[6]);
  text('width = ' + width + ' px',10,height-p[5]);
  text('height = ' + height + ' px',10,height-p[4]);  
  text('displayWidth = ' + displayWidth + ' px',10,height-p[3]);
  text('displayHeight = ' + displayHeight + ' px',10,height-p[2]);
  text('window.innerWidth = ' + window.innerWidth + ' px',10,height-p[1]);
  text('window.innerHeight = ' + window.innerHeight + ' px',10,height-p[0]);
}

function Circulo(extx,exty,extdiametro,extv,extcolor,extid,extidcolor) {
  this.x = extx;
  this.y = exty;
  this.diametro = extdiametro;
  this.velocidad = extv;
  this.angulo = random(0,2*PI);
  this.ccolor = extcolor;
  this.sw = 5;
  this.visible = 1;
  this.borde = 0;
  this.id = extid;
  this.idcolor = extidcolor;
  
  this.dibujar = function(ccolor) {
    strokeWeight(this.sw);
    stroke(this.borde);
    fill(this.ccolor);
    ellipse(this.x,this.y,this.diametro,this.diametro);
    
    fill(this.idcolor);
    stroke(this.idcolor);
    textAlign(CENTER);
    strokeWeight(2);
    textSize(40);
    text(this.id,this.x,this.y+14);
  }

  this.mover = function() {
    if(this.x >= width-this.sw-this.diametro/2){
      this.angulo = this.angulo + random(PI-PI/4, PI+PI/4);
      this.x = this.x-1;
    }else if(this.x <= this.sw+this.diametro/2){
      this.angulo = this.angulo + random(PI-PI/4, PI+PI/4);
      this.x = this.x+1;
    }else if(this.y >= height-this.sw-this.diametro/2){
      this.angulo = this.angulo + random(PI-PI/4, PI+PI/4);
      this.y = this.y-1;
    }else if(this.y <= this.sw+this.diametro/2){
      this.angulo = this.angulo + random(PI-PI/4, PI+PI/4);
      this.y = this.y+1;    
    }else{
      this.angulo = this.angulo + random(-PI/16,PI/16);
      this.x = this.x + cos(this.angulo)*this.velocidad;
      this.y = this.y + sin(this.angulo)*this.velocidad;
    }
  }
  
  this.tap = function(){
    if(this.x-this.diametro/2 <= mouseX && mouseX <= this.x+this.diametro/2 && this.y-this.diametro/2 <= mouseY && mouseY <= this.y+this.diametro/2){
      this.ccolor = color(255,200,0,50);
      this.borde = color(0,50);
      this.idcolor = color(0,50);
      this.velocidad = 0;
    }
  }

}

2017/10/06

Coding Challenge #76

Another take on 10PRINT in p5.js inspired by Daniel Shiffman @shiffman


Código html:
<!doctype html>
<html>
  <head>
    <title>Antonio Vallecillos</title>
    <script src="p5.js"></script>
    <script src="code.js"></script>
</head>
  <body style="text-align:center; margin:0px; background-color:white">
  </body>
</html>

Código p5.js:
x = 0;
y = 0;
a = 50;
b = 50;

function setup(){
  createCanvas(500,500);
  //w = round(window.innerWidth/a)*a
  //h = round(window.innerHeight/b)*b
  background(255,255,255);
}

function draw(){
  //background(255,200,0);
  //noStroke();
  stroke(255);
  fill(round(random(0,1))*255);
  ellipse(x + a/2, y + b/2, a-5, b-5);
  noStroke();
  fill(round(random(0,1))*255);
  ellipse(x + a/2, y + b/2, a-25, b-25);
  x = x + a;
  if (x >= width - a){
    x = 0;
    y = y + b;
  }
  if (y >= height - b){
    y = 0;
  }
}

Sistemas de representación de formas tridimensionales


Los sistemas de representación de formas tridimensionales son un conjunto de técnicas de carácter geométrico que permiten representar el espacio tridimensional sobre una superficie bidimensional y, por tanto, resolver en dos dimensiones los problemas espaciales garantizando la reversibilidad del proceso a través de la adecuada lectura.


Desde la antigüedad, el hombre ha sentido siempre la necesidad de representar gráficamente el entorno que le rodea, como lo demuestran los dibujos encontrados en las cuevas prehistóricas, pero no es hasta el renacimiento cuando se intenta representar la profundidad. Las nuevas necesidades de representación del arte y de la técnica empujan a ciertos humanistas a estudiar propiedades geométricas para obtener nuevos métodos que les permitan representar fielmente la realidad. Aquí se enmarcan figuras como Luca Paccioli, Leonardo da Vinci, Alberto Durero, Leone Battista Alberti, Piero della Francesca y muchos otros.



Todos ellos, al descubrir la perspectiva y la sección crean la necesidad de sentar las bases formales en las que se asiente la nueva forma de Geometría que ésta implica: la Geometría proyectiva, cuyos principios fundamentales aparecen de la mano de Gérard Desargues en el siglo XVII. Esta nueva geometría también fue estudiada por Blaise Pascal o por de la Hire, pero debido al gran interés suscitado por la Geometría Cartesiana y sus métodos, no alcanzó tanta difusión.
El posterior desarrollo de la técnica hizo necesario aplicar las teorías matemáticas a la práctica, proceso que culminó en 1795 con la publicación de la obra de Gaspard Monge «Geometría descriptiva».

CONTENIDOS:

1. Proyecciones
     1.1. Definición
     1.2. Tipos de proyecciones
2. Sistema Diédrico
3. Perspectivas
     3.1. Perspectivas Axonométricas
          3.1.1. Perspectiva Isométrica
          3.1.2. Perspectiva Dimétrica
          3.1.3. Perspectiva Trimétrica
     3.2. Perspectivas Axonométricas Oblicuas
          3.2.1. Perspectiva Caballera
          3.2.2. Perspectiva Militar
     3.3. Perspectivas Cónicas
          3.3.1. Perspectiva Cónica Frontal o de UN Punto de Fuga
          3.3.2. Perspectiva Cónica Oblicua de DOS Puntos de Fuga
          3.3.3. Perspectiva Cónica Oblicua de TRES Puntos de Fuga

1. Proyecciones
Todos los sistemas de representación objetiva de la forma tienen un fundamento común: el de las proyecciones.

1.1. Definición
Se conoce como proyección del punto P sobre el plano de proyección, al punto P' obtenido de la intersección de la línea proyectante, sobre el plano de proyección.


1.2. Tipos de proyecciones
Según cómo sean los haces de líneas proyectantes, tendremos los siguientes tipos de proyección:

Proyección Cilíndrica Ortogonal
Cuando los haces de líneas proyectantes son paralelos entre sí y perpendiculares al plano de proyección. Este tipo de proyección es el que se da en el Sistema Diédrico, en las Perspectivas Axonométricas y en el Sistema de Planos Acotados o Sistema Acotado.


Proyección Cilíndrica Oblicua
Cuando los haces de líneas proyectantes son paralelos entre sí pero oblicuos al plano de proyección. Este tipo de proyección es el que se da en las Perspectivas Axonométricas Oblicuas.


Proyección Cónica
Cuando los haces de líneas proyectantes concurren en un único punto llamado punto de vista (V). Por lo tanto los haces de líneas proyectantes no son paralelos entre sí. Este tipo de proyección es el que se da en las Perspectivas Cónicas.


Para explicar los diferentes tipos de perspectivas que obtenemos con estas proyecciones, vamos a usar siempre esta figura, para que sea más sencilla la comparación.


2. SISTEMA DIÉDRICO
Se trata de un sistema de proyección cilíndrica ortogonal sobre un plano horizontal y uno (o dos) verticales.
De esta forma, una figura cualquiera queda definida por su vista en planta y en alzado (y en perfil, si usamos el segundo plano vertical de proyección).
En la siguiente figura podemos ver cómo la pieza se proyecta sobre los planos horizontal y los dos verticales.


Una vez abatidos los planos de proyección, obtenemos la siguiente representación en sistema diédrico. Los puntos correlativos en plata y alzado tienen que estar en la misma vertical, así como los puntos correlativos en alzado y perfil deben estar en la misma horizontal. Esto es lo que se conoce como Sistema Europeo. Este tipo de representación se usa para planos técnicos donde necesitamos que las piezas estén perfectamente definidas:

- Las líneas paralelas en la figura se mantienen paralelas en el dibujo.
- Podemos tomar medidas en planos paralelos a los de proyección.
- Podemos medir ángulos en planos paralelos a los de proyección.


3. Perspectivas
Ofrecen una visión más realista del objeto representado, pero a cambio, ofrecen algunas dificultades para el trazado y la toma de datos sobre ellas.

3.1. Perspectivas Axonométricas
Son sistemas de proyección cilíndrica ortogonal sobre un plano oblicuo al triedro trirrectángulo formado por un plano horizontal y dos verticales. La intersección de estos tres planos entre sí nos da los ejes axonométricos X, Y, Z, que a su vez se proyectan perpendicularmente al plano de proyección. En función de qué angulo formen entre sí estos ejes proyectados, obtendremos los diferentes tipos de perspectivas axonométricas.

3.1.1. PERSPECTIVA ISOMÉTRICA
Cuando los tres ejes forman ángulos iguales de 120º.


Es el sistema más utilizado por la facilidad de su trazado, ya que podemos aprovechar los ángulos del cartabón para trazar todas las líneas paralelas a los ejes X,Y,Z.




3.1.2. Perspectiva Dimétrica
Cuando sus ejes forman dos ángulos iguales y uno desigual, por ejemplo 100º, 100º y 160º. Suelen ser iguales a ambos lados del eje vertical y desigual el otro.


3.1.3. Perspectiva Trimétrica
Cuando todos los ángulos que forman sus ejes son desiguales entre sí, por ejemplo 100º, 120º y 140º.


Las perspectivas axonométricas nos ofrecen una visión más realista de la pieza, pero a cambio, son menos útiles para tomar medidas directamente sobre ellas o para modificarlas:

- Las líneas paralelas en la figura se mantienen paralelas en el dibujo.
- No podemos tomar medidas en planos paralelos al triedro trirrectángulo (sí en planos paralelos al de proyección, pero esto es tan raro que carece de utilidad).
- No podemos medir ángulos en planos paralelos al triedro trirrectángulo (sí en planos paralelos al de proyección, pero esto es tan raro que carece de utilidad).

3.2. Perspectivas Axonométricas Oblicuas
Son sistemas de proyección cilíndrica oblicua. Nos ofrecen una visión deformada de la figura. Sin embargo, han tenido mucha difusión en el pasado debido a la facilidad que ofrecía su trazado sobre el tablero.
El plano de proyección es paralelo a uno de los planos del triedro trirrectángulo, por lo que la proyección de la figura ha de hacerse necesariamente oblicua al plano del cuadro. En función de cuál de los tres planos sea paralelo al plano de proyección, tendremos una perspectiva caballera o una perspectiva militar.

3.2.1. Perspectiva Caballera
El plano de proyección es paralelo a uno de los planos verticales. Se dibujan en verdadera magnitud todas las caras paralelas al plano del cuadro. El resto de la figura es muy artificial.


3.2.2. Perspectiva Militar
El plano de proyección es paralelo al plano horizontal, por lo que se dibujan en verdadera magnitud todas las caras horizontales. Esta perspectiva ha sido muy utilizada en arquitectura y urbanismo, por la facilidad que ofrece para dibujar edificios a partir de su vista en planta.


3.3. Perspectivas Cónicas
La perspectiva cónica permite representar o dibujar la realidad tal y como la vemos con nuestros ojos o como la podemos captar con una cámara fotográfica. Es, por tanto, la imagen más real, la que nos permite percibir y representar la profundidad espacial (la sensación de realidad).
La perspectiva cónica es un método que permite lograr la sensación de que los dibujos adquieren distancia, relieve y profundidad en un soporte plano. Es la expresión de una ilusión óptica. Cuando un objeto está próximo a nosotros y otro objeto idéntico se encuentra lejos, parecen diferentes, pero siguen siendo iguales.
La regla fundamental de la perspectiva cónica es que, cuando miramos un grupo de líneas paralelas que se alejan de nosotros y tratamos de dibujarlas en un plano, no las representamos como líneas paralelas, sino que se van acercando gradualmente hasta que convergen en un punto llamado punto de fuga.
En la perspectiva se interpone un plano entre el ojo del observador y el objeto representado que se encuentra al otro lado. Este plano es la lámina de dibujo o el lienzo del cuadro sobre el que se hace la perspectiva, y se conoce como plano del cuadro.
Existen tres tipos de perspectiva cónica: de uno, dos o tres puntos de fuga. En realidad los tres son el mismo, sólo que más complicado cuantos más puntos de fuga tengamos. El número de puntos de fuga depende sólo de cómo miremos al objeto representado.

3.3.1. PERPECTIVA CÓNICA FRONTAL
También llamada de un punto de fuga. Se da cuando mantenemos la mirada horizontal y paralela a uno de los sistemas de líneas y caras paralelas entre sí, que tiene el objeto.


Este tipo de perspectivas es el más fácil de percibir en la vida real, en entornos arquitectónicos y urbanos. Es fácil percatarse de que todas las líneas paralelas confluyen en un único punto. A este punto le hemos llamado punto de fuga. Si desde el punto de fuga trazamos una línea horizontal, obtendremos la línea del horizonte.



Elementos de una perspectiva cónica de uno o dos puntos de fuga:

-Punto de vista (V): es el centro del cono de proyección, el ojo del observador o el objetivo de la cámara fotográfica.
-Plano del cuadro (PC): considerado transparente, se denomina también cuadro de proyección porque sobre él se representa el objeto.
-Punto o puntos de fuga (F, F'): es la proyección perpendicular del punto de vista (V) sobre el plano del cuadro. Las líneas que son paralelas en la realidad, convergen hacia estos puntos de fuga en el dibujo o plano del cuadro (PC).



3.3.2. Perspectiva Cónica Oblicua de DOS Puntos de Fuga
Se da cuando mantenemos la mirada horizontal y oblicua a dos de los sistemas de líneas y caras paralelas entre sí, que tiene el objeto.


La siguiente serie de dibujos nos muestra, paso a paso, cómo se forma una perspectiva cónica (da igual de cuántos puntos de fuga estemos hablando) y muestra sus elementos principales.







3.3.3. Perspectiva Cónica Oblicua de TRES Puntos de Fuga
Se da cuando hacia arriba o hacia abajo de un objeto y por tanto mantenemos la mirada oblicua a los tres sistemas de líneas y caras paralelas entre sí, que tiene el objeto.


En la siguiente fotgrafía podemos observar el tercer punto de fuga, donde confluyen las líneas verticales. Este tipo de fotografías de llaman de picado (cuando miras hacia abajo) y de contrapicado (cuando miras hacia arriba).


MAPA CONCEPTUAL:
A continuación se expone un resumen de los contenidos de este artículo en forma de mapa conceptual.

2017/10/05

Coding Challege #76

10PRINT in p5.js



Código html:
<!doctype html>
<html>
  <head>
    <title>Antonio Vallecillos</title>
    <script src="../p5.js"></script>
    <script src="code.js"></script>
</head>
  <body style="text-align:center; margin:0px; background-color:white">
  </body>
</html>

Código p5.js:
var x = -10;
var y = -10;
var r;

function setup(){
  createCanvas(500,500);
  background(0);
  strokeWeight(5);
}

function draw(){
  stroke(map(y,0,500,0,255),map(x,0,500,0,255),map(x+y,0,1000,255,0));
  r = round(random(0,1));
  if (r == 0){
    line(x+0,y+0,x+10,y+10);  
  }else{
    line(x+10,y+0,x+0,y+10);
  }
  x = x + 10;
  if (x >= width+10){
    x = -10;
    y = y + 10;    
  }
}

2017/09/12

Material para la asignatura de Dibujo Técnico


Material obligatorio:

Dos portaminas de 0,5 y/o 0,7 mm.


Minas de 0,5 y/o 0,7 mm dureza H y HB.


Portagomas.


 Compás con tornillo central.



Escuadra de medida 30 cm.


Cartabón de medida 30 cm.


Es importante que estas plantillas (escuadra y cartabón) no estén milimetradas ni tengan el borde biselado.


Regla milimetrada con borde biselado.


Transportador de ángulos.


Cuaderno DIN A4 sin cuadrícula.



Material Opcional:

Escalímetro.



Juego de plantillas de medida 15 cm para tomar apuntes en clase.


Uno o dos portaminas de 2 mm.


Minas de 2 mm dureza H y HB.


Afilaminas de 2 mm.


Bolígrafos, rotuladores, etc para marcar soluciones o distintos tipos de línea en los apuntes tomados en clase.