Antonio Vallecillos: 2017

2017/12/16

Casos de tangencias

Trazado de una circunferencia en Axonométrico y Cónico

Sección plana de una pirámide

Trazado de una elipse por afinidad

Izquierda: Dada pa elipse por sus ejes principales
Derecha: Dada la elipse por un par de diámetros conjugados

2017/12/09

Transformaciones Geométricas: Escala

Transformaciones Geométricas: Simetría

Transformaciones Geométricas: Giro

Transformaciones Geométricas: Traslación y Giro

Sistema Axonométrico

Diferencias entre los sistemas Isométrico, Dimétrico y Trimétrico.

Plano del cuadro

Circunferencias

Puntos, segmentos, ángulos y áreas característicos de una circunferencia.

Desarrollo de una pirámide

Izquierda: Giro de una pirámide (ejercicio sin resolver).
Derecha: Desarrollo de una pirámide.

Desarrollo de una pirámide

Sistema Diédrico Directo

Poliedros regulares: Hexaedro

Hexaedro regular apoyado en un vértice en equilibrio.

Poliedros regulares: Hexaedro

Hexaedro regular apoyado en una arista en equilibrio.

Poliedros regulares: Tetraedro

Izquierda: Tetraedro apyado en una arista en equilibrio.
Derecha: Tetraedro apoyado en una cara.

Poliedros regulares: Tetraedro

Tetraedro apoyado en una cara

Normalización y vistas

Diferencias entre el sistema europeo (ISO) y el americano.

2017/12/03

Algoritmo de conducción autónoma v0.02

Código html (index.html):

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8"/>
    <title>Robot sigue líneas</title>
    <script src="libraries/p5.js"></script>
    <script src="code.js"></script>
</head>
  <body style="text-align:center; margin:0px">
  </body>
</html>

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

var circuito;
var rgba, r, g, b, a;
var uno;
var dos;
var tres;
var hierba;
var t;

function preload(){
  circuito = loadImage("images/Circuito04.png");
}

function setup() {
  //createCanvas(500, 500);
  //createCanvas(window.innerWidth, window.innerHeight);
  createCanvas(windowWidth, windowHeight);
  uno = new Coche(window.innerWidth/2, window.innerHeight/2, 2, color(255,0,0));
  dos = new Coche(window.innerWidth/2, window.innerHeight/2, 2.5, color(255,255,0));
  tres = new Coche(window.innerWidth/2, window.innerHeight/2, 1.5, color(0,0,255));
  hierba = color(0, 120, 30);
  t = 5;
}

function draw(){
  t = t + 1;
  background(hierba);
  imageMode(CENTER);
  image(circuito, window.innerWidth/2, window.innerHeight/2);
  rgba = get(mouseX, mouseY);
  r = subset(rgba, 0, 1);
  g = subset(rgba, 1, 1);
  b = subset(rgba, 2, 1);
  a = subset(rgba, 3, 1);
  debug();

  uno.dibujar();
  uno.mover();

  dos.dibujar();
  dos.mover();

  tres.dibujar();
  tres.mover();

  if(t >= 5){
    uno.medir();
    dos.medir();
    tres.medir();
    t = 0;
  }
}

function debug(){
  fill(255);
  text("MOUSE:", 10, 20);
  text("Position: " + round(mouseX) + " " + round(mouseY), 10, 35);
  text("Color (RGBA): " + rgba, 10, 50);
  text("Red: " + r, 10, 65);
  text("Green: " + g, 10, 80);
  text("Blue: " + b, 10, 95);
  text("Alpha: " + a, 10, 110);
  text("RED:", 200, 20);
  text("Left G: " + uno.l, 200, 35);
  text("Right G: " + uno.r, 200, 50);
  text("Speed: " + uno.v, 200, 65);
  text("YELLOW:", 300, 20);
  text("Left G: " + dos.l, 300, 35);
  text("Right G: " + dos.r, 300, 50);
  text("Speed: " + dos.v, 300, 65);
  text("BLUE:", 400, 20);
  text("Left G: " + tres.l, 400, 35);
  text("Right G: " + tres.r, 400, 50);
  text("Speed: " + tres.v, 400, 65);
}

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

function Coche(x,y,v,c){
  this.x = x;
  this.y = y;
  this.v = v;
  this.c = c;
  this.angulo = 0;
  this.l;
  this.r;

  this.dibujar = function(){
    translate(this.x, this.y);
    rotate(this.angulo);
    fill(this.c);
    triangle(0,5,0,-5,10,0);
    stroke(255);
    strokeWeight(3);
    point(30, -10);
    point(30, +10);
    stroke(0);
    noStroke();
    resetMatrix();
  }

  this.medir = function(){
    this.l = subset(get(this.x +25*cos(this.angulo)-10*cos(this.angulo+(PI/2)), this.y +25*sin(this.angulo)-10*sin(this.angulo+(PI/2))), 1, 1);
    this.r = subset(get(this.x +25*cos(this.angulo)+10*cos(this.angulo+(PI/2)), this.y +25*sin(this.angulo)+10*sin(this.angulo+(PI/2))), 1, 1);
  }

  this.mover = function(){
    if(this.l == "0" && this.r == "0"){
      this.angulo = this.angulo + 0*(2*PI/360);
    }else if(this.l !== "0" && this.r == "0"){
      this.angulo = this.angulo + 5*(2*PI/360);
    }else if(this.l == "0" && this.r !== "0"){
      this.angulo = this.angulo - 5*(2*PI/360);
    }else if(this.l !== "0" && this.r !== "0"){
      this.angulo = this.angulo - 2*(2*PI/360);
    }
    this.x = this.x + cos(this.angulo)*this.v;
    this.y = this.y + sin(this.angulo)*this.v;
  }
}

2017/12/02

Poliedros regulares: Octaedro

Izquierda: Octaedro apoyado en un vértice en equilibrio.
Derecha: Octaedro apoyado en una arista en equilibrio.

Octaedro apoyado en una cara.

2017/11/25

Prueba con la biblioteca p5.play

Código html (index.html):

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8"/>
    <title>Prueba p5.play</title>
    <script src="libraries/p5.js"></script>
    <script src="libraries/p5.play.js"></script>
    <script src="code.js"></script>
</head>
  <body style="text-align:center; margin:0px">
  </body>
</html>

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

var alien;
var secuenciaInvader;

function preload(){
  secuenciaInvader = loadAnimation(
    "images/SpriteAlien04a.png",
    "images/SpriteAlien04b.png",
    "images/SpriteAlien04c.png",
    "images/SpriteAlien04d.png",
    "images/SpriteAlien04e.png",
    "images/SpriteAlien04f.png",
    "images/SpriteAlien04g.png",
    "images/SpriteAlien04h.png"
    );
}

function setup() {
  createCanvas(500, 500);
  alien = createSprite(width/2, height/2,40,25);
  alien.addAnimation("default", secuenciaInvader);
  alien.rotateToDirection = false;
  alien.maxSpeed = 2;
  alien.friction = 0.05;
}

function draw() {
  background(255,215,0);
  if (mouseIsPressed) {
    alien.attractionPoint(0.5, mouseX, mouseY);
  }
  drawSprites();
}

2017/11/18

Objetos en p5.js

Código html (index.html):

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8"/>
    <title>Objetos en p5.js</title>
    <script src="libraries/p5.js"></script>
    <script src="code.js"></script>
</head>
  <body style="text-align:center; margin:0px">
  </body>
</html>

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

var cuadrado;

function setup() {
  createCanvas(500, 500);
  background(255,215,0);
  cuadrado = new Poligono();
}

function draw(){
  background(255,215,0,10);
  cuadrado.mover();
  cuadrado.dibujar();
}

function Poligono(){
  this.x;
  this.y;
  this.lado = 15;
  this.centroX = random(0 + this.lado, width - this.lado);
  this.centroY = random(0 + this.lado, height - this.lado);
  this.alpha = 0;

  this.mover = function(){
    this.x = this.centroX + cos(this.alpha)*25;
    this.y = this.centroY + sin(this.alpha)*25;
    this.alpha = this.alpha + (2*PI/360)*5;
  }

  this.dibujar = function(){
    rectMode(CENTER);
    fill(255,0,0);
    rect(this.x, this.y, this.lado, this.lado);
  }
}

2017/11/16

Caso 2A (PPR) de Apolonio

Caso 2: PPR

Caso 2A: Los dos puntos están en el mismo lado de la recta.

Trazar las circunferencias que pasan por A y B y son tangentes a r.

2017/11/14

Algoritmo de conducción autónoma v0.01

Código html (index.html):

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8"/>
    <title>Robot sigue líneas</title>
    <script src="libraries/p5.js"></script>
    <script src="code.js"></script>
</head>
  <body style="text-align:center; margin:0px">
  </body>
</html>

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

var circuito;
var rgba, r, g, b, a;
var rojo;

function setup() {
  //createCanvas(500, 500);
  //createCanvas(window.innerWidth, window.innerHeight);
  createCanvas(windowWidth, windowHeight);
  circuito = loadImage("images/Circuito04.png");
  rojo = new Coche(window.innerWidth/2, window.innerHeight/2, 3);
}

function draw(){
  background(0, 180, 50);
  imageMode(CENTER);
  image(circuito, window.innerWidth/2, window.innerHeight/2);
  rgba = get(mouseX, mouseY);
  r = subset(rgba, 0, 1);
  g = subset(rgba, 1, 1);
  b = subset(rgba, 2, 1);
  a = subset(rgba, 3, 1);
  debug();
  rojo.dibujar();
  rojo.mover();
}

function debug(){
  fill(255);
  text("MOUSE:", 10, 20);
  text("Position: " + round(mouseX) + " " + round(mouseY), 10, 35);
  text("Color (RGBA): " + rgba, 10, 50);
  text("Red: " + r, 10, 65);
  text("Green: " + g, 10, 80);
  text("Blue: " + b, 10, 95);
  text("Alpha: " + a, 10, 110);
  text("ROJO:", 200, 20);
  text("Left G: " + rojo.l, 200, 35);
  text("Right G: " + rojo.r, 200, 50);
}

function Coche(x,y,v){
  this.x = x;
  this.y = y;
  this.v = v;
  this.angulo = 0;
  this.l;
  this.r;

  this.dibujar = function(){
    translate(this.x, this.y);
    rotate(this.angulo);
    fill(255,0,0);
    triangle(0,5,0,-5,10,0);
    stroke(255);
    strokeWeight(3);
    point(30, -10);
    point(30, +10);
    stroke(0);
    noStroke();
    this.l = subset(get(this.x +25*cos(this.angulo)-10*cos(this.angulo+(PI/2)), this.y +25*sin(this.angulo)-10*sin(this.angulo+(PI/2))), 1, 1);
    this.r = subset(get(this.x +25*cos(this.angulo)+10*cos(this.angulo+(PI/2)), this.y +25*sin(this.angulo)+10*sin(this.angulo+(PI/2))), 1, 1);
  }

  this.mover = function(){
    if(this.l == "0" && this.r == "0"){
      this.angulo = this.angulo + 0*(2*PI/360);
    }else if(this.l == "180" && this.r == "0"){
      this.angulo = this.angulo + 5*(2*PI/360);
    }else if(this.l == "0" && this.r == "180"){
      this.angulo = this.angulo - 5*(2*PI/360);
    }else if(this.l == "180" && this.r == "180"){
      this.angulo = this.angulo - 2*(2*PI/360);
    }
    this.x = this.x + cos(this.angulo)*this.v;
    this.y = this.y + sin(this.angulo)*this.v;
  }
}

Páginas

2017/12/16

2017/12/09

2017/12/03

2017/12/02

2017/11/25

2017/11/18

2017/11/16

2017/11/14