Jump to content
Please Use CODE Tags

Programming 2D Renderer...what should I use?

TheNuzziNuzz
By TheNuzziNuzz
in Programming
 Share
Posted

For my latest project I am building an LED matrix control software of sorts. Basically I have some addressable strips connected to an arduino. My goal is to have a 2D virtual space in which I can place colors via an API. It would do things like an "explode" effect from a single point and spread out the color from that point. I've done the backend in Node.JS but I quickly found using thousands of tiny divs in the DOM to render a graphical preview doesn't work too well.

 

Would anyone have any recommendations for how to make these previews? They need to be fast, and ideally be able to run on the GPU. Can this be done with some node package? Maybe something that runs on OpenGl? I don't know almost anything about graphics and am in need of expertise. I would love to continue writing in node given my experience with it, but maybe I should explore some new languages to accomplish this? 

 

Thank You! :)

Computers r fun

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author
4 minutes ago, James Evens said:

If you can parallel the divisions and some other tweaks then OpenCl should be fast enough.

parallel divisions? What does that mean in terms of producing lights at coordinates?

Computers r fun

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
8 hours ago, TheNuzziNuzz said:

Basically I have some addressable strips connected to an arduino

 

Sounds very much like what James did in this video:

720 LED Graphical Equalizer

Spoiler

CPU: Intel i7 6850K

GPU: nVidia GTX 1080Ti (ZoTaC AMP! Extreme)

Motherboard: Gigabyte X99-UltraGaming

RAM: 16GB (2x 8GB) 3000Mhz EVGA SuperSC DDR4

Case: RaidMax Delta I

PSU: ThermalTake DPS-G 750W 80+ Gold

Monitor: Samsung 32" UJ590 UHD

Keyboard: Corsair K70

Mouse: Corsair Scimitar

Audio: Logitech Z200 (desktop); Roland RH-300 (headphones)

 

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

You could use html5 canvas element to draw things in it.

 

See Pixel manipulation with canvas

 

Here's a crappy example I just made :

  

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <button onClick="javascript:hitme();" >Hit me!</button>
    <canvas id="canvas" style="width:256px;height:256px;" />
    
    <script>
        function hitme() {
        const myCanvas = document.getElementById('canvas');
        const ctxCanvas = myCanvas.getContext('2d');
        const imgCanvas = ctxCanvas.createImageData(256,256);

        console.log(myCanvas,ctxCanvas,imgCanvas);
        var i = 0;
        var j = 0;
        for (j=0;j<256;j=j+1) {
            for (i=0;i<256;i=i+1) {
                let offset = (j*256+i) *4 
                imgCanvas.data[offset + 0] = i; // R
                imgCanvas.data[offset + 1] = j; // G
                imgCanvas.data[offset + 2] = i; // B
                imgCanvas.data[offset + 3] = j; // A
            }
        }
        ctxCanvas.putImageData(imgCanvas,0,0);
    }
    </script>
</body>
</html>

 

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author
On 10/17/2019 at 8:47 AM, James Evens said:

GPU are just fast if you can do many identical operations at the same time and place them in a "good" pattern in the memory. 

How could I go about doing this? How could I use it to render to say html canvas?

Computers r fun

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author
On 10/19/2019 at 1:44 AM, James Evens said:

There is WebCl & WebGl. 

 

Why do you want to let it run in the browser?

Its not important to have it run in browser. It just would have been easier because I've been writing the app in electron.

Computers r fun

Link to comment
Share on other sites
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing Programming

×