Set pixel (x,y) to color (r,g,b)
I wish today’s kids had this with as little overhead as possible
Set pixel (x,y) to color (r,g,b)
I wish today’s kids had this with as little overhead as possible
Interestingly, by abusing some architectural oddities, people have been able to create new graphics modes on the 64 that support more colors than the original 16 and in hi-res. But it's still not as easy as set pixel (x, y).
Flicker free 320x200 high res on C64 (flicker free starts at 42s):
https://www.youtube.com/watch?v=Vcm0ecni5d4
This one's flickery, but still pretty nice:
Video RAM was expensive back then, so the common "gaming" hardware worked around the issues in ways that made use of graphics as independently colored pixels very difficult, and this includes things like the game consoles, Amigas and Atari STs and their lack of chunky graphics modes.
A Macintosh II with a full-color display card and an RGB display from 1987 could be one of the oldest commodity hardware setups that could do what you ask for; simple fully buffered frame buffer supporting 24bit RGB colors. VRAM-wise they were 32bit really, but 8 bits per pixel were wasted, because RGBA wasn't supported and it wasn't until early 90s Apple supported 16bit modes; 1/2/4/8/24bit graphics were your only options on Macs until then. They had accelerated 2D drawing primitives from the OS / graphics card firmware-driver (Color QuickDraw) supporting with APIs doing what you describe and in a way where your software wasn't dependent on the hardware implementation; software written for them would work until 2006 and the Intel Macs, and discontinuation of the Classic environment in Mac OS X 10.5 Leopard on the PPC Macs.
Some nonstandard "extended" VGA cards before VESA standardization of "SVGA modes" could also do it by late 80s/early 90s, but those were pretty much hardware-dependent and you had to use them at bare metal until OS / driver support for such came around in Windows 3 times. Some MS-DOS software, like Deluxe Paint would support many of them though.
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = `rgb(${r}, ${g}, ${b})`;
ctx.fillRect(x, y, 1, 1);
I say it's pretty close. <canvas id="canvas" width="400" height="400"></canvas>
<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var width = canvas.width;
var height = canvas.height;
var imagedata = ctx.createImageData(width, height);
function draw(r, g, b, x, y){
var pixelindex = (y * width + x) * 4;
imagedata.data[pixelindex] = r;
imagedata.data[pixelindex+1] = g;
imagedata.data[pixelindex+2] = b;
imagedata.data[pixelindex+3] = 255; //alpha
ctx.putImageData(imagedata, 0, 0);
}
</script>
This gives you a 400x400 space to draw on. Open the console and call draw(). draw(0,0,0,15,15);And then people wonder why computers feel slower than they did 15 years ago.