WebVDU

Retro graphics JavaScript library

Experiment with chunky pixels

Create 8-bit retro graphics with a few lines of JavaScript!

This demo page uses an experimental implementation of the BBC Micro (1981) VDU drivers for JavaScript and HTML5 canvas.

Go to the WebVDU GitHub page

      new WebVDU()

      for (let x=0;x<800;x++){
        GCOL(0,RND(7))
        DRAW(RND(1280),RND(1024))
      }

      PRINT("Hello world!")

 

Same code, different eras

Choose chunky 80s pixels, finer 90s Acorn Archimedes or smooth modern day resolutions by just adding a MODE command:

Based on BBC BASIC by @baffinsquid on BBC Micro Bot
        new WebVDU()
        MODE(0)
        PRINT("Blackhole rules!")
        for (let X=-25;X<25;X++){
          for (let Y=-25;Y<25;Y++){
            let x = 640-15*X-12*Y
            let y = 512-X+7*Y+50*(-8/SQR(1+(X*X+Y*Y)/5))
            PLOT(69,x,y)
          }
        }

 

Real-time animation

Put animation loop code in a function to be called every frame with ANIMATE

Based on BBC BASIC by @monke_child on BBC Micro Bot
          new WebVDU()
          function draw(){
            MODE(1)

            //...your cool shader JS here

            GCOL(0,color)
            PLOT(69,x,y)
          };
          ANIMATE(draw);
        

 

That's a Moire

Build interactions with webVDU the same as you would with any HTML5 canvas.

 

Try it now

You can see 100s of examples of what's possible on the original 1980s BBC Micro on BBC Micro Bot.

Note this library is a barebones alpha with many VDU functions yet to be implemented.

Go to the WebVDU GitHub page