Skip to content
Advertisements

Seven Segment Display javascript

https://codepen.io/guldus/pen/NVgvwr?editors=0110

CODE

    <div id="canvasWindow" style="
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
    ">
    </div>


<script>

      /*
      sources:
      wikipedia:  https://en.wikipedia.org/wiki/Seven-segment_display
      w3schools:  https://www.w3schools.com/js/js_bitwise.asp
      youtube: https://www.youtube.com/watch?v=MlRlgbrAVOs&list=WL&index=31&t=0s
      
      hexadecimal encodings:
      0 ---> 0x73
      1 ---> 0x30
      2 ---> 0x6D
      3 ---> 0x79
      4 ---> 0x33
      5 ---> 0x5B
      6 ---> 0x5F
      7 ---> 0x70
      8 ---> 0x7f
      9 ---> 0x7B
      */

      

      function getColor(arr,shift){
          var r = 255;
          var g = 255;
          var b = 255;
          var a = 255 * ((arr >> shift) & 1);
          return color(r,g,b,a)
        }

      
      class SevenSegment{

        sevenSeg(arr){
          noStroke();
          fill(getColor(arr,6));
          rect(350,70,100,20,20); // A
          fill(getColor(arr,5));
          rect(450,90,20,100,20); // B
          fill(getColor(arr,4));
          rect(450,210,20,100,20) // C
          fill(getColor(arr,3));
          rect(350,310,100,20,20); // D
          fill(getColor(arr,2));
          rect(330,210,20,100,20); // E
          fill(getColor(arr,1));
          rect(330,90,20,100,20); // F
          fill(getColor(arr,0));
          rect(350,190,100,20,20); // G

        }
      }  


      
      let nums = [0x7E,0x30,0x6D,0x79,0x33,0x5B,0x5F,0x70,0x7f,0x7B];
      const sevenSegment = new SevenSegment();
      let index = 0;
      function setup(){
        cv = createCanvas(800,400);
        cv.parent("canvasWindow");
        frameRate(1);
      }
      function draw(){
        background(26);
        sevenSegment.sevenSeg(nums[index])
        index++;
        if(index > 9){
          index = 0;
        }
      }

    </script>
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: