Hace poco he ayudado a montar el CoderDojo de Carabanchel, que es un club de programación donde niños y niñas de entre 7 y 17 años aprenden a programar ayudados por mentores. Hasta antes de la cuarentena, nos reunimos los sábados por la tarde, y yo intentaba ir siempre que podía con mis dos hijas. Además, a veces preparaba talleres.

Al principio preparé un taller de p5js, que es una librería de JavaScript para crear arte interactivo en el navegador que gustó bastante.

Luego preparé un taller de iniciación a ToneJS, una librería JavaScript para programar música en el navegador.

Luego también preparé un taller de iniciación a ToneJS, una librería JavaScript para programar música en el navegador.

Luego preparé un taller en donde mezclaba tanto p5js como ToneJS.

Y por último, aunque todavía no lo he impartido en el CoderDojo, he preparado un taller en donde se programa un "Guitar Hero" con p5js, y ToneJS.

Si tenéis chicos y/o chicas, puede ser un bonito taller para realizar en casa durante esta cuarentena.

Tenéis todo el código y las librerías que necesitáis en un repositorio de mi GitHub.

En el taller he preparado varios ejercicios de dificultad creciente que podéis ver resultado en los siguientes enlaces:

Y a continuación os inserto el último ejemplo en un iframe para que lo disfrutéis desde mi blog :-)

Comparte: Facebook Twitter

2 de marzo de 2020

Taller de p5js y de ToneJS

Por Adolfo Sanz De Diego el 2.3.20 Sin comentarios

Hace poco he ayudado a montar el CoderDojo de Carabanchel, que es un club de programación donde niños y niñas de entre 7 y 17 años aprenden a programar ayudados por mentores. Nos reunimos los sábados por la tarde, y yo intento ir siempre que puedo con mis dos hijas. Además, a veces preparo talleres.

Al principio preparé un taller de p5js, que es una librería de JavaScript para crear arte interactivo en el navegador que gustó bastante.

Luego preparé un taller de iniciación a ToneJS, una librería JavaScript para programar música en el navegador. Este último taller está muy relacionado con un artículo que escribí hace justo un año en dónde explicaba cómo programar la música de Star Wars con Gibber. Esto lo digo porque en ese taller voy explicando en ejercicios de cada vez más dificultad, como ir programando notas, y al final terminamos tomando el 'Cumpleaños Feliz', y la música de 'Star Wars'.

Y por último he preparado un taller en donde mezclo p5js, y tonejs.

Tenéis todo el código y las librerías que necesitáis en un repositorio de mi GitHub.

En el taller he preparado varios ejercicios de dificultad creciente que podéis ver resultado en los siguientes enlaces:

Y a continuación os inserto el último ejemplo en un iframe para que lo disfrutéis desde mi blog :-)

Comparte: Facebook Twitter

3 de febrero de 2020

Taller de iniciación a ToneJS, una librería JavaScript para programar música en el navegador

Por Adolfo Sanz De Diego el 3.2.20 Sin comentarios

Hace poco he ayudado a montar el CoderDojo de Carabanchel, que es un club de programación donde niños y niñas de entre 7 y 17 años aprenden a programar ayudados por mentores. Nos reunimos los sábados por la tarde, y yo intento ir siempre que puedo con mis dos hijas. Además, a veces preparo talleres. Al principio preparé un taller de p5js, que es una librería de JavaScript para crear arte interactivo en el navegador que gustó bastante, y ahora he preparado un taller de ToneJS una librería JavaScript para crear música interactiva en el navegador. Este último taller está muy relacionado con un artículo que escribí hace justo un año en dónde explicaba cómo programar la música de Star Wars con Gibber.

Tenéis todo el código y las librerías que necesitáis en un repositorio de mi GitHub.

Este es el código más básico para crear un botón que al pulsarlo haga sonar una nota, en este caso un DO, en el navegador:

<!DOCTYPE html>
<html>
  <head>
    <title>ToneJS - 01 una nota</title>
    <script src="../lib/Tone.js"></script>
  </head>

  <body>
    <button id="do">UNA NOTA</button>
  </body>

  <script type="text/javascript">
    const synth = new Tone.Synth().toMaster();
    Tone.Transport.start();

    document.querySelector("#do")
      .addEventListener("click", async () => {
        synth.triggerAttackRelease("C4", "4n");
    });
  </script>
</html>

El resultado es el siguiente (pulsa el botón para probar):

En este punto hay que remarcar que las notas se ponen en el estilo anglosajón:

DO=C
RE=D
MI=E
FA=F
SOL=G
LA=A
SI=B

El número que sigue a la nota hace referencia a la octava (ya sea esta más grave o más aguda).

A continuación, parte del código para hacer una especie de piano con botones:

<!DOCTYPE html>
<html>
  <head>
    <title>ToneJS - 02 varias notas</title>
    <script src="../lib/Tone.js"></script>
  </head>

  <body>
    <button id="do">DO</button>
    <button id="re">RE</button>
    ...
  </body>

  <script type="text/javascript">
    const synth = new Tone.Synth().toMaster();
    Tone.Transport.start();

    document.querySelector("#do")
      .addEventListener("click", async () => {
        synth.triggerAttackRelease("C4", "4n");
    });

    document.querySelector("#re")
      .addEventListener("click", async () => {
        synth.triggerAttackRelease("D4", "4n");
    });

    ...
  </script>
</html>

El resultado es el siguiente (pulsa los botones para probar):

A continuación mostramos el código para que suene una escala:

<!DOCTYPE html>
<html>
  <head>
    <title>ToneJS - 03 escala</title>
    <script src="../lib/Tone.js"></script>
  </head>

  <body>
    <button id="escala">ESCALA</button>
  </body>

  <script type="text/javascript">
    const synth = new Tone.Synth().toMaster();
    Tone.Transport.start();

    document.querySelector("#escala")
      .addEventListener("click", async () => {
        synth.triggerAttackRelease("C4", "8n", 1);
        synth.triggerAttackRelease("D4", "8n", 2);
        synth.triggerAttackRelease("E4", "8n", 3);
        synth.triggerAttackRelease("F4", "8n", 4);
        synth.triggerAttackRelease("G4", "8n", 5);
        synth.triggerAttackRelease("A4", "8n", 6);
        synth.triggerAttackRelease("B4", "8n", 7);
        synth.triggerAttackRelease("C5", "8n", 8);
    });
  </script>
</html>

El resultado es el siguiente (pulsa el botón para probar):

Ahora hacemos algo un poco más elaborado utilizamos 2 arrays: uno para las notas y otro para las duraciones de las notas.

Aquí hay que remarcar que para los tiempos hay que tener en cuenta que:

1n hace referencia a una redonda (4 tiempos)
2n hace referencia a una blanca (2 tiempos)
4n hace referencia a una negra (1 tiempo)
8n hace referencia a una corchea (0,5 tiempos)
16n hace referencia a una semicorchea (0,25 tiempos)

Teniendo en cuenta esto, a continuación el código para hacer una escala con diferentes tiempos:

<!DOCTYPE html>
<html>
  <head>
    <title>ToneJS - 04 notas</title>
    <script src="../lib/Tone.js"></script>
    <script src="../lib/Rhythm.js"></script>
  </head>

  <body>
    <button id="notas">NOTAS</button>
  </body>

  <script type="text/javascript">
    var synth = new Tone.Synth().toMaster();

    document.querySelector("#notas").addEventListener("click", async () => {

      var notas = [
        "C4","D4","E4","F4","G4","A4","B4","C5"];
      var duraciones = [
        "2n","4n","8n","16n","16n","8n","4n","2n"];

      var cancion = Rhythm.mergeDurationsAndPitch(duraciones, notas);

      var part = new Tone.Part(function(time, value){
        console.log(value.note + " " + value.duration);
        synth.triggerAttackRelease(value.note, value.duration, time);
      }, cancion );
      
      part.start(0);
      Tone.Transport.start();
    });
  </script>
</html>

El resultado es el siguiente (pulsa el botón para probar):

Ahora vamos a coger una partitura sencilla, la del cumpleaños feliz:

Y la codificamos con ToneJS:

<!DOCTYPE html>
<html>
  <head>
    <title>ToneJS - 05 cumpleaños feliz</title>
    <script src="../lib/Tone.js"></script>
    <script src="../lib/Rhythm.js"></script>
  </head>

  <body>
    <button id="notas">CUMPLEAÑOS FELIZ</button>
  </body>

  <script type="text/javascript">
    var synth = new Tone.Synth().toMaster();

    document.querySelector("#notas").addEventListener("click", async () => {

      var notas = [
        "C4", "C4", 
        "D4", "C4", "F4", 
        "E4", "C4", "C4", 
        "D4", "C4", "G4",
        "F4", "C4", "C4",
        "C5", "A4", "F4",
        "E4", "D4", "Bb4", "Bb4",
        "A4", "F4", "G4",
        "F4"];
      var duraciones = [
        "8n", "8n", 
        "4n", "4n", "4n",
        "2n", "8n", "8n",
        "4n", "4n", "4n",
        "2n", "8n", "8n", 
        "4n", "4n", "4n", 
        "4n", "4n", "8n", "8n",
        "4n", "4n", "4n",
        "2n"];

      var cancion = Rhythm.mergeDurationsAndPitch(duraciones, notas);

      var part = new Tone.Part(function(time, value){
        console.log(time + " " + value.note + " " + value.duration);
        synth.triggerAttackRelease(value.note, value.duration, time);
      }, cancion );
      
      part.start(0);
      Tone.Transport.start();
    });
  </script>
</html>

El resultado es el siguiente (pulsa el botón para probar):

Y para terminar, hacemos lo mismo con la partitura de Star Wars:

Aquí hay que tener en cuenta que los trisillos se codifican con una t, en vez de con una n (ejemplo 8t). Y para los puntillos hay que disminuuir su número (ejemplo 3n).

<!DOCTYPE html>
<html>
  <head>
    <title>ToneJS - 06 Star Wars</title>
    <script src="../lib/Tone.js"></script>
    <script src="../lib/Rhythm.js"></script>
  </head>

  <body>
    <button id="notas">Star Wars</button>
  </body>

  <script type="text/javascript">
    var synth = new Tone.Synth().toMaster();

    document.querySelector("#notas").addEventListener("click", async () => {

var notas = [
        "F3", "C4",
        "Bb3", "A3", "G3", "F4", "C4",
        "Bb3", "A3", "G3", "F4", "C4",
        "Bb3", "A3", "Bb3", "G3", "C3", "C3", "C3",
        "F3", "C4",
        "Bb3", "A3", "G3", "F4", "C4",
        "Bb3", "A3", "Bb3", "G3", "C3", "C3",
        "D3", "D3", "Bb3", "A3", "G3", "F3",
        "F3", "G3", "A3", "G3", "D3", "E3", "C3", "C3",
        "D3", "D3", "Bb3", "A3", "G3", "F3",
        "C4", "G3", "G3", "C3", "C3",
        "D3", "D3", "Bb3", "A3", "G3", "F3",
        "F3", "G3", "A3", "G3", "D3", "E3", "C4", "C4",
        "F4", "F3",
        "C4", "C3", "C3", "C3",
        "F3", "C4",
        "Bb3", "A3", "G3", "F4", "C4",
        "Bb3", "A3", "G3", "F4", "C4",
        "Bb3", "A3", "Bb3", "G3", "C3", "C3", "C3",
        "F3", "C4",
        "Bb3", "A3", "G3", "F4", "C4",
        "Bb3", "A3", "G3", "F4", "C4",
        "Bb3", "A3", "Bb3", "G3", "C3", "C3", "C3",
        "F4", "F4", "F4", "F4", "F4"];
      var duraciones = [
        "2n", "2n",
        "8t", "8t", "8t", "2n", "4n",
        "8t", "8t", "8t", "2n", "4n",
        "8t", "8t", "8t", "2n", "8t", "8t", "8t",
        "2n", "2n",
        "8t", "8t", "8t", "2n", "4n",
        "8t", "8t", "8t", "2n", "8n", "8n",
        "3n", "8n", "8n", "8n", "8n", "8n",
        "8t", "8t", "8t", "8n", "8n", "4n", "8n", "8n",
        "3n", "8n", "8n", "8n", "8n", "8n",
        "8n", "8n", "2n", "8n", "8n",
        "3n", "8n", "8n", "8n", "8n", "8n",
        "8t", "8t", "8t", "8n", "8n", "4n", "8n", "8n",
        "2n", "2n",
        "1n", "8t", "8t", "8t",
        "2n", "2n",
        "8t", "8t", "8t", "2n", "4n",
        "8t", "8t", "8t", "2n", "4n",
        "8t", "8t", "8t", "2n", "8t", "8t", "8t",
        "2n", "2n",
        "8t", "8t", "8t", "2n", "4n",
        "8t", "8t", "8t", "2n", "4n",
        "8t", "8t", "8t", "2n", "8t", "8t", "8t",
        "4n", "8t", "8t", "8t", "4n"];

      var cancion = Rhythm.mergeDurationsAndPitch(duraciones, notas);

      var part = new Tone.Part(function(time, value){
        console.log(time + " " + value.note + " " + value.duration);
        synth.triggerAttackRelease(value.note, value.duration, time);
      }, cancion );
      
      part.start(0);
      Tone.Transport.start();
    });
  </script>
</html>

El resultado es el siguiente (pulsa el botón para probar):

Espero os haya gustado ;-)

Comparte: Facebook Twitter

21 de agosto de 2019

Recursos de mi taller "Cómo desarrollar aplicaciones descentralizadas en la Blockchain de Ethereum" en el CommitConf

Por Adolfo Sanz De Diego el 21.8.19 Sin comentarios

En mi último post podéis ver los recursos de la charla de "Cómo desarrollar aplicaciones descentralizadas en la Blockchain de Ethereum" que dí en el Codemotion. En realidad esa charla era un resumen del taller que dí con anterioridad en el CommitConf.

En este taller hago una breve introducción teórica sobre Bitcoin, Blockchain y Minado y sobre Ethereum, Smart Contracts y ÐApps, y a continuación desarrollo una pequeña aplicación descentralizada con un pequeño contrato inteligente en la Blockchain de Ethereum.

En el taller muestro un poco de Solidity, un lenguaje para programar contratos inteligentes. Muestro también Truffle, un framework para desarrollar y testear aplicaciones descentralizadas. Muestro como usar web3js para llamar desde nuestra web a la Blockchain. Muestro también como usar MetaMask para interactuar con la aplicación. Y muestro además como minar nuestras transacciones de prueba levantando una instancia de Ganache.

Recursos:

Comparte: Facebook Twitter

10 de julio de 2019

Recursos de mi "Taller de 0 a 100 de Bash Shell Scripting y AWK" en el T3chFest

Por Adolfo Sanz De Diego el 10.7.19 Sin comentarios

Ahora que tengo un poco más de tiempo, estoy recopilando los recursos de cursos, charlas y talleres que he impartido en los últimos meses.

En este taller que impartí en el T3chFest de 2018, intenté enseñar a programar scripts de Bash desde cero subiendo la complejidad para terminar con AWK. Me basé en un curso de Bash Shell Script Avanzado que impartí hace tiempo.

Los recusos:

Comparte: Facebook Twitter

Adolfo Sanz De Diego

Asesor. Desarrollador. Profesor. Formador.

30 de marzo de 2024

Recopilación de mis entrevistas, charlas, talleres, cursos, artículos y recetas (edición 2024)

22 de marzo de 2020

Programando un "Guitar Hero" con p5js y ToneJS

2 de marzo de 2020

Taller de p5js y de ToneJS

3 de febrero de 2020

Taller de iniciación a ToneJS, una librería JavaScript para programar música en el navegador

21 de agosto de 2019

Recursos de mi taller "Cómo desarrollar aplicaciones descentralizadas en la Blockchain de Ethereum" en el CommitConf

10 de julio de 2019

Recursos de mi "Taller de 0 a 100 de Bash Shell Scripting y AWK" en el T3chFest

Categories

Entradas populares

About me

Licencia