2021/12/20

JUEGO EDUCATIVO: Light-Bot

Dale instrucciones al robot para que encienda todas las luces. Dile el orden en que quieres que avance, gire, salte y active su antena para poder pasar de nivel.

Enlace al juego: https://www.cooljuegos.com/juego-en-linea/light-bot/


Level 01:


Level 02:


Level 03:


Level 04:


Level 05:


Level 06:


Level 07:


Level  08:


Level 09:


Level 10:


Level 11:


Level 12:


2021/11/09

Mecavolt: nuevos bloques BX

Los nuevos bloques BX (BoX) sirven para encapsular componentes e incorporarlos a la métrica de Mecavolt. Por ejemplo, las siguientes dos piezas encapsulan un pequeño motor eléctrico.

 

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);
  }
}