Home
Admin | Edit

Technical details of my small programs

Contents

Introduction


Articles documenting my tiny graphics programs, best read in order (for Linux) to see progression.

Most release names are taken from the Star Control world, one of my favorite adventure game !
Sources can be found here.

Guides

Linux (x86, framebuffer)

2020

2021

2022

2023

TIC-80

2021

2022

2023

RISC OS / RPI / Acorn Archimedes (ARM)

2023

DOS (x86, MCGA / VGA)

p5js/tweet

Introduction

JavaScript / p5js code that i published on my Twitter account, no definite size goal but generally less than 256 characters.

Code of this category is not very well size optimized, they are more to show interesting short algorithms that i discovered on my own or intro effect that i replicated, made them with accessibility in mind (so not much arcane code stuff) and to use as few as possible p5js stuff. (so software rendering / can be ported easily)

Rotating Ortho. Cube (2023, ~230 characters)

no polygons, all integers orthographic cube render

w=128;f=0;setup=_=>createCanvas(w,w);draw=_=>{background(0);loadPixels();f+=.1;s=sin(f);c=cos(f);for(i=h=64;i--;)for(y=h;y--;)for(x=h;x--;){dx=32-x;dy=32-y;pixels[h+(dx*c-dy*s)+(((h+dx*s+dy*c)/2+i)<<7)<<2]=255-i*4};updatePixels()}

The idea is to show off the algorithm of many intros (i believe) which render pseudo 3d iso / ortho objects such as cubes in very small code, these objects can be built easily without going the usual way by iterating on an area with center 0,0 and applying a transform to the x,y; this produce a shape which can be extruded down (with an additional loop), this method also works with any complex shapes eg. a labyrinth or a text as long as you generate them and extrude them.

using logical operators

The shading can be done by using the extrusion loop value and more fancy shading such as per face shading is also easily possible by either doing it as a single pass or on a second pass by rendering the cube into a buffer and using the buffer to isolate face from pixel color / horizontal position. (or a combination)

fancy texturing / shading ! (logical operators, also note the lighting fakery)

composition, stacking and scrolling, almost like the cool 256b intro Pixel Town by Digimind, note here that the shading is only on the side faces, could also be applied on the upper face which would appear as a cheap roof

The rendering of multiple objects is also easy with a second pass, it can be pretty fast also since it is just a bitmap that is copied over. :)

multiple objects

2d map made of tiny patterns to isometric projection and with highly extruded ortho objects, wave is just a shading trick, still fairly small

The best way to map the cubes to the screen is to use this coordinates transform : x = (x - y) and y = (x + y) / 2

To go full 3D from this is not difficult, it will still stay tiny and fast, just adds 2D rotation to the coordinates, this will be equivalent to a forward mapping affine renderer (you might have to downscale the result to remove sampling holes, this can be done quite easily with scaling; a right arithmetic shift) and for perspective just add 3D rotation (with pitch component), texture mapping can also be added easily with the x and y coordinates and you will get a simple quad forward mapping 3D renderer at this point, 4-point quadrilaterals can also be made by adjusting the loop endpoints which would end up being comparable to a Sega Saturn / 3DO style rasterizer although they also go further with algorithms to fill the sampling holes, it will be a bit tricky compared to a triangles based rasterizer but it might do the job in size limited context or if you don't care about optimal performances.

back to topLicence Creative Commons