breathing circle on MatrixLED

このエントリーをはてなブックマークに追加

What's this

By using MatrixLED_MAX7219 and HTML5 Canvas. Drawing circle animation on Matrix LED.

Program

<!-- HTML Example -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <script src="https://unpkg.com/obniz@2.0.2/obniz.js"></script>
</head>

<body>
<div id="obniz-debug"></div>
<br>
<div class="text-center">
    <h1>DotMatrix Breath</h1>
</div>

<script>

/* This will be over written on obniz.io webapp page */
var obniz = new Obniz("OBNIZ_ID_HERE");

obniz.onconnect = async function () {
  const matrix = obniz.wired("MatrixLED_MAX7219", {vcc:0, gnd:1, din:2, cs:3, clk:4});
  matrix.init(8*4, 8);
  matrix.brightness(7);
  
  const ctx = obniz.util.createCanvasContext(matrix.width, matrix.height);
  
  var r = 0;
  obniz.repeat(async function() {
    ctx.fillStyle = "black";
    ctx.fillRect(0, 0, matrix.width, matrix.height);
    ctx.fillStyle = "white";
    ctx.strokeStyle = "white";
    ctx.beginPath();
    ctx.arc(8*2, 4, 2 + 3*(Math.sin(r/4)+1), 0, 2*Math.PI);
    ctx.stroke();
    r++;
    
    matrix.draw(ctx);
  }, 1000/30);
  
}
    
</script>
</body>
</html>

Run Now

The html will be opened to run a program.

You will Get in Few Days

Circuit for Starter “obniz Board” is available on Amazon and other online stores.
You can get it at below

Our products and resellers

Forum

Visit our developer’s forum to discuss and discover technologies.

Forum

Contact

Feel free to contact out support and technical team.

Contact us