2018/06/30

Electrónica

  1. Electrónica
    1. Conceptos básicos
    2. Señales
    3. Microprocesadores
    4. Microcontroladores
    5. Conceptos físicos
    6. Semiconductores
    7. Componentes electrónicos
    8. Fuentes de alimentación y baterías
    9. Circuitos electrónicos
  2. Plataformas de hardware libre
    1. Arduino
    2. Raspberry Pi
  3. Programación de hardware
  4. Puertos e interfaces del PC
  5. Álgebra binaria
  6. Código ASCII
  7. Circuitos lógicos
    1. Señales analógicas y digitales
    2. Señales y medidas
    3. Puertas lógicas
    4. Tablas de verdad
  8. Álgebra de Boole
  9. Control y robótica
  10. Prototipado
  11. Proyectos

2018/06/08

Fractal App (WIP)



Código html:
<!doctype html>
<html>
  <head>
    <title>Fractal</title>
    <script src="libraries/p5.js"></script>
    <script src="libraries/p5.dom.js"></script>
    <script src="code.js"></script>
</head>
  <body style="text-align:center; margin:0px">
  </body>
</html>

Código j5.js:
var button;

function setup(){
  createCanvas(500,500);
  button = createButton('GO');
    button.position((windowWidth/2)+(width/2)-50, 12);
    button.mousePressed(go);
}

function draw(){
  background(255,215,0);
  textAlign(CENTER);
  textSize(24);
  text('FRACTAL TREE', width/2, 220);
  textSize(12);
  text('Desing and coding by Antonio Vallecillos', width/2, 235);
  text('Press de upper right button and enjoy', width/2, 250);
}

function go(){
  window.location.href = "screen1.html";
}

Código html:
<!doctype html>
<html>
  <head>
    <title>Fractal</title>
    <script src="libraries/p5.js"></script>
    <script src="libraries/p5.dom.js"></script>
    <script src="code_screen1.js"></script>
</head>
  <body style="text-align:center; margin:0px">
  </body>
</html>

Código j5.js:
var slider1;
var slider2;
var button;

function setup(){
  createCanvas(500,500);
  slider1 = createSlider(0, 3*PI/4, PI/8, PI/512);
  slider1.position((windowWidth/2)-(width/2)+10, 10);
  slider2 = createSlider(2/3, 3/4, 12/17, 0.0001);
  slider2.position((windowWidth/2)-(width/2)+10, 40);
  button = createButton('BACK');
    button.position((windowWidth/2)+(width/2)-66, 12);
    button.mousePressed(go);
}

function draw(){
  background(255,215,0);
  angulo = slider1.value();
  relacion = slider2.value();
  stroke(0);
  strokeWeight(1);
  translate(width/2, height);
  rama(120);
}

function rama(longitud){
  line(0, 0, 0, -longitud);
  translate(0, -longitud);
  if (longitud > 8) {
    push();
    rotate(angulo);
    rama(longitud * relacion);
    pop();
    push();
    rotate(-angulo);
    rama(longitud * relacion);
    pop();
  }
}

function go(){
  window.location.href = "index.html";
}

2018/06/05

Fractal



Código html:
<!doctype html>
<html>
  <head>
    <title>Fractal</title>
    <script src="libraries/p5.js"></script>
    <script src="libraries/p5.dom.js"></script>
    <script src="code.js"></script>
</head>
  <body style="text-align:center; margin:0px">
  </body>
</html>

Código p5.js:
var slider;

function setup(){
  createCanvas(500,500);
  slider = createSlider(0, 3*PI/4, PI/8, PI/512);
  slider.position((windowWidth/2)-(width/2)+10, 10);
}

function draw(){
  background(255,215,0);
  angulo = slider.value();
  stroke(0);
  strokeWeight(1);
  translate(width/2, height);
  rama(140);
}

function rama(longitud){
  line(0, 0, 0, -longitud);
  translate(0, -longitud);
  if (longitud > 4) {
    push();
    rotate(angulo);
    rama(longitud * 0.667);
    pop();
    push();
    rotate(-angulo);
    rama(longitud * 0.667);
    pop();
  }
}

2018/05/23

Generative art



Código 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:
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,25);
  for (var i = 0; i < circulos.length; i++) {
    circulos[i].dibujar();
    circulos[i].mover();
  }
}

function Circulo () {
  this.x = width/2 + random(-50,50);
  this.y = height/2 + random(-50,50);
  this.d = random(300,350);
  this.s = random(0,2*PI);

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

  this.mover = function() {
    this.s = this.s + -PI/128;
    this.d = this.d + random(-1,1);
  }
}

2018/05/14

Array de objetos en p5.js


Código html:
<!doctype html>
<html>
  <head>
    <title>Array de objetos en p5.js</title>
    <script src="libraries/p5.js"></script>
    <script src="code.js"></script>
    <script src="Asteroide.js"></script>
</head>
  <body style="text-align:center; margin:0px">
  </body>
</html>

Código p5.js:
var asteroides = [];

function setup(){
  createCanvas(500,500);
  for (var i = 0; i < 100; i++) {
    asteroides.push(new Asteroide());
  }
}

function draw(){
  background(255,215,0);
  translate(width/2, height/2);
  for (var i = 0; i < asteroides.length; i++) {
    asteroides[i].dibujar();
    asteroides[i].mover();
  }
}

Código p5.js (objeto Asteroide):
function Asteroide () {
  this.x;
  this.y;
  this.z = random(width);

  this.dibujar = function() {
    fill(0);
    noStroke();
    this.ax = map(this.x / this.z, 0, 1, 0, width);
    this.ay = map(this.y / this.z, 0, 1, 0, height);
    this.r = map(this.z, 0, width, 25, 0);
    rect(this.ax-this.r/2, this.ay-this.r/2, this.r, this.r);
  }

  this.mover = function() {
    this.z = this.z - 10;
    if (this.z < 1) {
      this.x = random(-width/4, width/4);
      this.y = random(-height/4, height/4);
      this.z = width;
    }
  }
}