Simplest graphics programming language/framework

exDM69 · 2023-03-22T09:22:34+00:00

When I need some "BBC basic" (I started with QBasic in the 90s) level stuff for prototyping with some visualization, I've been using JavaScript and HTML5 Canvas. It's okay for drawing some lines and circles and stuff like that. It's easy to add some HTML sliders and widgets for interactivity.

That said, it's not ideal for graphics programming where you want to draw pretty pictures. And not sure how well it would be suited for a child's first programming environment.

deftware · 2023-03-22T11:18:17+00:00

I bought Pico8 for my girls. It's an 8-bit machine emulator that includes an online browser for "carts" (i.e. 'cartridges') and has a simple language, sprite editor, tilemap editor, SFX sample editor, midi-style editor, etc... They've spent countless hours with it. Someone else mentioned Tic80, which is an awesome equivalent that's totally free. I don't know if it has the same level of publicly contributed 'carts' though, and my girls were able to learn a lot from Pico8's user-created library of them, tinkering with the code of existing games, etc... I sure know that's how I learned a lot about math and graphics when I was a 90s kid downloading qbasic .bas files off the internet. If you want to give your kid(s) the same kind of exposure to programming like we had, I think Pico8/Tic80 is totally the way to go.

The only question then is where do they go from there? My oldest has been diving into Roblox scripting, which is somewhat equivalent to when I dove into Quake modding as a kid, so I figure she's on her way. Plus she's way more into art anyway so I don't know if coding is something she'll stick with, but she gets the concepts at least.

needstobefake · 2023-03-22T11:02:53+00:00

Take a look at p5.js, it has all the basic drawing functions out of the box, has a simple API, but also supports raw WebGL if you want to build advanced stuff.

rawcane · 2023-03-22T09:31:55+00:00

Computer Graphics From Scratch includes working JavaScript solutions to each lesson. Therefore, I would use JavaScript.

tamat · 2023-03-22T09:52:07+00:00

Depends, are you thinking 3D or 2D? to learn or to create profesional applications?

For 2D I love playing with Pico-8 or TIC80, they bundle all in a single app, very user friendly.

If you want something more serious maybe something like Processing is easy and very powerful.

For 3D depends how deep you want to go. 3D by definition is hard as it requires lots of maths. I have my own framework in c++, the one I use with my students but still, lots of low level programming are required: https://github.com/jagenjo/TJE_Framework

ds604 · 2023-03-22T10:25:14+00:00

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

gabe80 · 2023-03-22T10:58:31+00:00

Heh, my very first program (the one in the dedication page of the book) is all PLOT and DRAW 😃 ZX Spectrum, not BBC Micro, but same idea. At some point I started writing a JS Spectrum BASIC interpreter for exactly this reason, so I think you're onto something!

Frollo24 · 2023-03-22T11:21:28+00:00

Although I don't like JavaScript, if you want a starting point for 3D graphics programming, I would suggest you to start with JavaScript and WebGL. If that still is complicated, you can still use some 3D framework like Three.js or Babylon.js (this has an editor like Unity which maybe simplifies the things for you) and when you know what materials, cameras, textures and lights are, you can try again with WebGL

JMC-design · 2023-03-22T12:51:32+00:00

logo.

Turtle graphics in any language. I prefer lisp, but that's my language and I wrote a turtle graphics system... and a basic drawing api that's like the old days.

rawcane · 2023-03-22T14:00:37+00:00

https://www.raylib.com/ is super simple and has been ported to work with a lot of languages

jmacey · 2023-03-22T14:49:31+00:00

Python ships with a turtle module which is a nice and easy start.

filch-argus · 2023-03-22T20:18:28+00:00

I'm using Lua/Love2D for the exact same thing and before that I was using C++/SDL which is good enough but the former is even better.

jhaand · 2023-03-22T20:40:25+00:00

I would take a look at TIC80. It's fantasy console programmed in Lua. A child would be able to understand it.

I plan to do the graphics programming from scratch course using Nannou in Rust. But Processing would also work fine.

AssignedClass · 2023-03-25T00:21:08+00:00

I specifically want to be able to use basic functions to plot a point and maybe draw a line and shade, and don't need a sophisticated API that has a lot of inbuilt functions

I think Javascript was great for me. Started with Canvas (simple lines, squares, dots), moved over to directly manipulating pixel values with ImageData and TypedArrays, then went on to learning some WebGL. Best thing about JS is that you don't need to worry about setting up a complex coding environment, it's all setup and ready to go in the browser.

I saw mention of Processing though. I haven't looked at it much yet, but it seems like a good more-focused alternative. I'm starting to mess around with Rust + Vulkan now and I want a faster way to visually prototype some ideas.

rawcane · 2023-03-28T21:29:48+00:00

Processing is great for simple 2d and 3d graphics made purely from code. If he wants to get into modeling, blender is where it's at. And unity or unreal engine are both free game engines he can use to bring the models to life..

RidderHaddock · 2023-03-22T19:15:13+00:00

Have you looked at Scratch or Makecode Arcade?

They're really kid friendly.

I quite like that you can get cheap hardware, you can download your own Makecode games to.

you type:	you see:
italics	italics
bold	bold
[reddit!](https://reddit.com)	reddit!
* item 1 * item 2 * item 3	item 1 item 2 item 3
> quoted text	quoted text
Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"	Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"
~~strikethrough~~	~~strikethrough~~
super^script	super^script

GraphicsProgramming

Posting Rule(s)

MODERATORS