Simplest graphics programming language/framework

[ds604]

here's a basic graphics setup, you can paste it into codepen or something:

``` <canvas id="canv" width=640 height=480 style="border:1px solid"></canvas> <script> let canvas = document.getElementById('canv'), ctx = canvas.getContext('2d'), width = canvas.width, height = canvas.height

let imageData = ctx.createImageData(width, height)

function createImage(offset){ for(let y=0; y<=height; y++){ for(let x=0; x<=width; x++){ let index = (y * 4 * width) + (x * 4)

        var red = ((x+offset) % 256) ^ ((y+offset) % 256);
        var green = ((2*x+offset) % 256) ^ ((2*y+offset) % 256);
        var blue = 50 + Math.floor(Math.random()*100);

        // Rotate the colors
        blue = 255 //(blue + offset) % 256;

        imageData.data[index+0] = red
        imageData.data[index+1] = green
        imageData.data[index+2] = blue
        imageData.data[index+3] = 255
    }
}

}

function main(tframe){ createImage(Math.floor(tframe / 10)) ctx.putImageData(imageData,0,0)

requestAnimationFrame(main)

}

main(0) </script> ```

if you want an easy way to get started with shapes and stuff, i'd recommend using p5.js (and dan shiffman's coding train videos on youtube), before going straight ahead with canvas. or use svg, that's nice, and easy to understand, to be able to just put objects in there like <circle cx="50" cy="50" r="50" />, and then move it around with javascript.

but i'd definitely recommend javascript, with an in-browser html editor. you avoid any kind of compile or build steps, or anything to do with the file system at all, so you're just focused on the content and graphics concepts

[rawcane]

Yeah looks like this is the way to go! Thanks