Antonio Vallecillos: 202110

2021/10/26

Generador de números aleatorios

2021/10/24

Algoritmo de conducción autónoma v0.04

Enlace (para mayor velocidad)

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>
    <script src="Coche.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 cuatro;
var hierba;
var t;
var clock;

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

function setup() {
  createCanvas(500, 800);
  //createCanvas(window.innerWidth, window.innerHeight);
  //createCanvas(windowWidth, windowHeight);
  uno = new Coche(width/2+10, height/2+190, 3.35, color(255,0,0));
  dos = new Coche(width/2+15, height/2+210, 3.3, color(0,255,0));
  tres = new Coche(width/2+30, height/2+190, 3.25, color(0,0,255));
  cuatro = new Coche(width/2+35, height/2+210, 3.2, color(255,255,0));  
  cinco = new Coche(width/2+50, height/2+190, 3.15, color(255,0,255));  
  seis = new Coche(width/2+55, height/2+210, 3.1, color(0,255,255)); 
  hierba = color(255, 215, 0);
  t = 5;
  clock = 0;
}

function draw(){
  t = t + 1;
  clock = clock + 1;
  background(hierba);
  imageMode(CENTER);
  image(circuito, width/2, height/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();
  marcador();

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

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

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

  cuatro.dibujar();
  cuatro.mover();

  cinco.dibujar();
  cinco.mover();

  seis.dibujar();
  seis.mover();

  if(t >= 6){
    uno.medir();
    uno.sentido();
    dos.medir();
    dos.sentido();
    tres.medir();
    tres.sentido();
    cuatro.medir();
    cuatro.sentido();
    cinco.medir();
    cinco.sentido();
    seis.medir();
    seis.sentido();
    t = 0;
  }
}

function marcador(){
  translate(10, 15);
  fill(uno.c);
  triangle(0,5,0,-5,12,0);
  fill(0);
  text(uno.laps + " Laps. Speed: " + uno.v, 15, 4);
  resetMatrix();

  translate(10, 30);
  fill(dos.c);
  triangle(0,5,0,-5,12,0);
  fill(0);
  text(dos.laps + " Laps. Speed: " + dos.v, 15, 4);
  resetMatrix();

  translate(10, 45);
  fill(tres.c);
  triangle(0,5,0,-5,12,0);
  fill(0);
  text(tres.laps + " Laps. Speed: " + tres.v, 15, 4);
  resetMatrix();

  translate(10, 60);
  fill(cuatro.c);
  triangle(0,5,0,-5,12,0);
  fill(0);
  text(cuatro.laps + " Laps. Speed: " + cuatro.v, 15, 4);
  resetMatrix();

  translate(10, 75);
  fill(cinco.c);
  triangle(0,5,0,-5,12,0);
  fill(0);
  text(cinco.laps + " Laps. Speed: " + cinco.v, 15, 4);
  resetMatrix();

  translate(10, 90);
  fill(seis.c);
  triangle(0,5,0,-5,12,0);
  fill(0);
  text(seis.laps + " Laps. Speed: " + seis.v, 15, 4);
  resetMatrix();
}

function debug(){
  fill(0);
  text("MOUSE:", 10, height-105);
  text("Position: " + round(mouseX) + " " + round(mouseY), 10, height-90);
  text("Color (RGBA): " + rgba, 10, height-75);
  text("Red: " + r, 10, height-60);
  text("Green: " + g, 10, height-45);
  text("Blue: " + b, 10, height-30);
  text("Alpha: " + a, 10, height-15);

  text("RED: " + uno.laps + " laps", 200, 20);
  text("Left G: " + uno.l, 200, 35);
  text("Right G: " + uno.r, 200, 50);
  text("Speed: " + uno.v, 200, 65);

  text("GREEN: " + dos.laps + " laps", 300, 20);
  text("Left G: " + dos.l, 300, 35);
  text("Right G: " + dos.r, 300, 50);
  text("Speed: " + dos.v, 300, 65);

  text("BLUE: " + tres.laps + " laps", 400, 20);
  text("Left G: " + tres.l, 400, 35);
  text("Right G: " + tres.r, 400, 50);
  text("Speed: " + tres.v, 400, 65);

  text("YELLOW: " + cuatro.laps + " laps", 200, 100);
  text("Left G: " + cuatro.l, 200, 115);
  text("Right G: " + cuatro.r, 200, 130);
  text("Speed: " + cuatro.v, 200, 145);

  text("PURPLE: " + cinco.laps + " laps", 300, 100);
  text("Left G: " + cinco.l, 300, 115);
  text("Right G: " + cinco.r, 300, 130);
  text("Speed: " + cinco.v, 300, 145);

  text("CYAN: " + seis.laps + " laps", 400, 100);
  text("Left G: " + seis.l, 400, 115);
  text("Right G: " + seis.r, 400, 130);
  text("Speed: " + seis.v, 400, 145);
}

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

Código p5.js (Objeto Coche.js):

function Coche(x,y,v,c){
  this.x = x;
  this.y = y;
  this.v = v;
  this.c = c;
  this.angulo = 180*(2*PI/360);
  this.l;
  this.m;
  this.r;
  this.f;
  this.t = 0;
  this.meta;
  this.laps = 0;
  this.sensorlx = 30;
  this.sensorm = 30;
  this.sensorly = 15;
  this.sensorf = -10;

  this.dibujar = function(){
    translate(this.x, this.y);
    rotate(this.angulo);
    fill(this.c);
    stroke(0);
    strokeWeight(1);
    triangle(0,5,0,-5,12,0);
    stroke(this.c);
    strokeWeight(2);
    //point(40, -15);
    //point(40, 0);
    //point(40, +15);
    noStroke();
    resetMatrix();
  }

  this.medir = function(){
    this.l = subset(get(this.x +this.sensorlx*cos(this.angulo)-this.sensorly*cos(this.angulo+(PI/2)), this.y +this.sensorlx*sin(this.angulo)-this.sensorly*sin(this.angulo+(PI/2))), 1, 1);
    this.m = subset(get(this.x +this.sensorm*cos(this.angulo), this.y +this.sensorm*sin(this.angulo)), 1, 1);
    this.r = subset(get(this.x +this.sensorlx*cos(this.angulo)+this.sensorly*cos(this.angulo+(PI/2)), this.y +this.sensorlx*sin(this.angulo)+this.sensorly*sin(this.angulo+(PI/2))), 1, 1);
    this.f = subset(get(this.x +this.sensorf*cos(this.angulo), this.y +this.sensorf*sin(this.angulo)), 1, 1);
  }

  this.mover = function(){
    if(this.l != "215" && this.m != "215" && this.r != "215"){
      this.v = v;
      this.angulo = this.angulo + 0*(2*PI/360); //sigue recto
    }

    if(this.l == "215" && this.m != "215" && this.r != "215"){
      this.v = v;
      this.angulo = this.angulo + 2*(2*PI/360); //gira a la derecha
    }

    if(this.l == "215" && this.m == "215" && this.r != "215"){
      this.v = v;
      this.angulo = this.angulo + 5*(2*PI/360); //gira mucho a la derecha
    }

    if(this.l != "215" && this.m != "215" && this.r == "215"){
      this.v = v;
      this.angulo = this.angulo - 2*(2*PI/360); //gira a la izquierda
    }

    if(this.l != "215" && this.m == "215" && this.r == "215"){
      this.v = v;
      this.angulo = this.angulo - 5*(2*PI/360); //gira mucho a la izquierda
    }

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

  this.sentido = function(){
    if(clock > 100 && this.m == "150"){
      this.meta = 0;
    }
    if(this.meta == "0" && (this.m == "140" || this.l == "140" || this.r == "140")){
      this.meta = 1;
    }
    if(this.meta == "0" && (this.m == "130" || this.l == "130" || this.r == "130")){
      this.meta = -1;
      this.angulo = this.angulo - 180*(2*PI/360);
    }
    if(this.meta == "1" && (this.m == "130" || this.l == "130" || this.r == "130")){
      this.meta = 2;
      this.laps = this.laps + 1;
    }
  }
}

2021/10/17

Generative Art: Circle v0.03

Código html (index.html):

<!doctype html>
<html>
  <head>
    <title>Circle</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 circulos = [];

function setup(){
  createCanvas(500,500);
  background(255,215,0);
  for (var i = 0; i < 100; i++) {
    circulos.push(new Circulo());
  }
}

function draw(){
  background(255,215,0,10);
  for (var i = 0; i < circulos.length; i++) {
    circulos[i].dibujar();
    circulos[i].mover();
  }
}

function Circulo () {
  this.x = width/2;
  this.y = height/2;
  //this.x = width/2 + random(-50,50);
  //this.y = height/2 + random(-50,50);
  this.d = random(0,700);
  this.s = random(0,2*PI);
  this.arc = random(PI/32,PI/2);
  this.vel = random(PI/256,PI/32);

  this.dibujar = function() {
    noFill();
    stroke(0);
    strokeWeight(1);
    arc(this.x, this.y, this.d, this.d, this.s, this.s + this.arc);
}

  this.mover = function() {
    this.s = this.s - this.vel;
    this.d = this.d + random(-2,2);
  }
}

Cinemática v0.02

Código html (index.html):

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8"/>
    <title>Cinemática</title>
    <script src="libraries/p5.js"></script>
    <script src="libraries/p5.sound.js"></script>
    <script src='libraries/p5.dom.js'></script>
    <script src="Cinematica.js"></script>
</head>
  <body style="text-align:center; margin:0px; background-color:white">
  </body>
</html>

Código JavaScript (Cinematica.js):

var canvas;
var bFuego;
var bPausa;
var div;
var texto;

var newton;
var manzana;

var x;
var x0 = 0;
var vx = 0;
var vx0 = 25;
var ax = 0;
var ax0 = 0;

var y;
var y0 = 500;
var vy = 0;
var vy0 = -97;
var ay = 0;
var ay0 = 9.81;

var t = 100;

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

function setup() {
  texto = createDiv('<h1 style="font-size:24px; text-align:center; color:grey;">CINEMÁTICA</h1>');
  texto.style("font-family:sans-serif; font-size:15px; width:500px; margin-left:auto; margin-right:auto; background-color:white");
  texto = createDiv('<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 target="_blank" href="https://play.google.com/store/apps/details?id=appinventor.ai_fotovallegrafia.Cinematica&feature=more_from_developer#?t=W251bGwsMSwyLDEwMiwiYXBwaW52ZW50b3IuYWlfZm90b3ZhbGxlZ3JhZmlhLkNpbmVtYXRpY2EiXQ.." style="text-decoration:none; color:#000000">enlace</a> o visitar la página de desarrollo en <a target="_blank" href="http://fotovallegrafia.blogspot.com.es/p/aplicaciones-android-cinematica.html" style="text-decoration:none; color:#000000">fotovallegrafía</a> para más información.</p>');
  texto.style("font-family:sans-serif; font-size:15px; width:500px; margin-left:auto; margin-right:auto; background-color:white");
  div = createDiv('');
  div.style("height:10px");
  canvas = createCanvas(500,500);
  div = createDiv('');

  bFuego = createButton('¡Fuego!');
  bFuego.style("width: 100px");

  bPausa = createButton('Pausa');
  bPausa.style("width: 100px");

  texto = createDiv('<h4 style="text-align:center; color:grey;">&copy; 2016 Antonio Vallecillos - <a target="_blank" href="https://twitter.com/fotovallegrafia" style="text-decoration:none; color:#000000">@fotovallegrafia</a></h4>');
  texto.style("font-family:sans-serif; font-size:15px; width:500px; margin-left:auto; margin-right:auto; background-color:white");
}

function draw() {
  imageMode(CORNER);
  image(newton,0,0,width,height);
  imageMode(CENTER);
  x = 0.5 * ax0 * pow(t, 2) + vx0 * t + x0;
  y = 0.5 * ay0 * pow(t, 2) + vy0 * t + y0;
  image(manzana, x, y-12, 25,25);
  //strokeWeight(15);
  //point(x, y-10);
  
  bFuego.mousePressed(fuego);
  bPausa.mousePressed(pausa);
  
  seguir();

}

function mousePressed(){
}

function fuego(){
  t = 0;
}

function seguir(){
  t = t + 0.1;
}

function pausa(){

}

Páginas

2021/10/26

Generador de números aleatorios

2021/10/24

Algoritmo de conducción autónoma v0.04

2021/10/17

Generative Art: Circle v0.03

Cinemática v0.02