LED Light Strip with Pi Zero

Raspberry Pi Zero controlling a LED strip, with a hardwired clear button.

I wanted to set up a small (20 LEDs) light strip using a Raspberry Pi Zero, so students could learn how to remotely log in to a device, work with the Linux command line, run python programs, and get visible, real feedback on their progress.

Instructions and code are in the Github rpi-led-strip repository.

Web control for the LED strip.

The repository also has instructions and code for setting up a local server on the Pi so you can control the LED strip via a webpage. Students working on their own LED projects in the Makerspace will appreciate this.

The main idea here was to make the project as simple as possible. The web page is basic with minimal styling, so it should be easy to edit, but I do test out some of the newer HTML input elements, like the color picker. The README in the repository also includes instructions on how to, step by step, add components to the webpage to control the Pi: the “Blue” button is used as the example (it sets the entire strip to blue).

With only 20 LEDs you don’t need an external power supply so everything can be run through the Pi.

Adafruit’s CircuitPython NeoPixel library makes controlling the lights really easy. There are a few example programs in the rpi-led-strip/pyLED/ directory of the repository.

The full strip.

I’ve also included a physical button (it’s optional) that I’m using right now to just clear the LED strip. I may change it to just reboot the Pi, because I anticipate that things will get interesting when I have an entire class trying to connect to one or two devices. So far, I’ve had a small group of four students try this with some success.

HTML Animations using SVG

A basic animation test using the HTML SVG element instead of the CANVAS. This one uses the svg.js library. This library has it’s own, built in animation function that is used to make the red rectangle move back and forth (1 second period).

The green circle is moved using the requestAnimationFrame function with some coding to make it bounce back and forth.

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <script src='./svg.js/svg.min.js'></script>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <div id="svgPlace"></div>
  </body>

  <script type="text/javascript">
    var draw = SVG().addTo('#svgPlace').size(300,400);
    var line = draw.line([[20,20],[200,20]]).stroke({width: 1, color:'#f00'});

    //Metronome red rectangle.
    rect = draw.rect(50,100).move(200,20).fill('#f00');
    rect.radius(10);
    dir = 'left';

    setInterval(animate, 1000);
    function animate(){
      if (dir === 'left'){
        px = 20;
        py = 20;
        dir = "right";
      }
      else {
        px = 200;
        py = 20;
        dir = "left";
      }
      rect.animate({
        duration: 1000,
        when: 'now'
      }).move(px,py);
    }

    //Green circle
    circ = draw.circle(20).fill('#0f0').move(250,10);
    window.requestAnimationFrame(animateCirc);
    cx = 250;
    cy = 20;
    dy = 1;

    function animateCirc(){
      cy+=dy;
      circ.move(cx,cy);
      window.requestAnimationFrame(animateCirc);
      if (cy > 100 ){
        cy = 100;
        dy = -dy;
      } else if (cy < 20) {
        cy = 20;
        dy = -dy;
      }
    }

  </script>
</html>

Making Animations with HTML Canvas

Based off of Mozilla’s nice introduction to basic animations on the web, I made as simple of an animation as I could using the Canvas element in HTML. It just contains a static, red rectangle, and a green sphere that slowly moves across the canvas. This should serve as a simple introduction for my students who want to make online games.

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>

  <body>
    <div id="gameBoard"></div>

  </body>

  <script type="text/javascript">

    canvas_width = 400;
    canvas_height = 300;

    //create canvas
    cvs = document.createElement("CANVAS");
    cvs.height = canvas_height;
    cvs.width = canvas_width;
    document.getElementById("gameBoard").append(cvs);
    ctx = cvs.getContext("2d");
    cx = 10;
    cy = 20;

    window.requestAnimationFrame(animate);

    function animate(){
      //clear the canvas
      ctx.clearRect(0, 0, canvas_width, canvas_height); // clear canvas

      //set location of the circle
      cx += .2;
      cy += .1;
      
      //recreate the canvas (every time)
      ctx.fillStyle = '#ff0000';
      rect = ctx.fillRect(0, 0, 20, 100);

      ctx.beginPath();
      circ = ctx.arc(cx, cy, 10, 0, 2 * Math.PI);
      //ctx.stroke();
      ctx.fillStyle = '#00ff00';
      ctx.fill();

      window.requestAnimationFrame(animate);

    }

  </script>
</html>

This uses plain HTML and Javascript, with no additional libraries.

Monopoly Power

Kate Cox has, perhaps one of the best articles I’ve read, summarizing a recent congressional report on the use of monopoly power by Amazon, Facebook, Google, and Apple. It is very readable and well written, bet contains great details about the report’s findings about how these companies abuse their position in the market.

I particularly like her summary of the purpose of antitrust law:

Antitrust law is instead concerned with what you did to become dominant and what you do with the outsized power that comes from being the biggest. If you have a 90 percent market share but it all came from natural growth and you deal fairly with other companies and with consumers, antitrust regulators are probably going to leave you alone. But if nascent startups can demonstrate you used your bulk to knock them out before they could become real competition, or if competitors can show you unfairly leveraged different parts of your business to squeeze them out? Those are problems.

Kate Cox in Arstechnica.

2020: Lofi Background Music/Art

Lofi Cali Girl Meme by Yuumi

One of my favorite pieces of art from this year, perhaps because it captures so much of the 2020 experience, and speaks to the way we try to cope during a pandemic.

Having to work from home for most of the first half of the year prompted the persuit of some mellow, non-distracting background music. This lead to the discovery of lofi hip hop channels on YouTube. One of the most popular of which (on the ChilledCow channels) has a simple lofi study girl animation. This image seems to have its roots in the wonderful, Japanese, Studo Ghibli movie Whisper of the Heart.

The image evolved into a meme, with the girl being relocated to different parts of the world–Bored Panda has a number of examples.

Switched on Pop has an excellent podcast episode on the Lofi Music phenomenon called Why lo-fi is the perfect background music. It delves into the history and economics, but focuses on the musical qualities–beats, semi-random elements, etc–that make it well situated for background music.

Apart from the visual and contextual appeal of the Lofi Cali Girl image at the top of this post, the biography of the artist is quite interesting in how it encapsulates an internet-era artistic trajectory. In addition to traditional drawing classes and a BA in Art she credits:

What helped me the most was actually being part of the deviantART community where I learned from other artists by observing their works, and the free tutorials they provided.

Yuumei, FAQ

Her extensive use of them has lead her to create and publish her own free tutorials.

Fortune Teller


Eve’s Fortune Teller

The student project that I keep revisiting the most is the Fortune Teller webpage created a couple years ago by former student Eve J.

You get a randomly generated fortune, and Eve built in enough combinations that I still see unique fortunes two years later.

I think what I like the most about it is how well it captures Eve’s “voice”. The style of the sentences and the little twists that pop up here and there. I can’t help reading this in her voice.

Eve is off in college right now, and gave me permission to post about the project, and to adapt the code as necessary, as long as I keep her informed (Hi Eve!).

I’ve ported the core of her program from JavaScript to PHP so you can now just get just the fortune telling text.


Eve’s Fortune Teller

https://soriki.com/eve/fortune/fortune.php?name=Doc

I’ve also, sort of, memefied the fortunes but putting the text over a background image, which is what you see at the top of the post.

https://soriki.com/eve/fortune-m/meme-fortune.html?name=Doc

As an experiment, I now have a version that makes the image as an svg:

I have another student now who’s interested in making a smart mirror, and this will make it easier to include fortunes into that project.

I’ve also posted the project on Github: https://github.com/lurbano/fortune