Coding Graphics in C: SetPixel, LineDraw, Moire and More!
ฝัง
- เผยแพร่เมื่อ 23 เม.ย. 2023
- Dave takes you on a tour of the C code used to write graphics primitives for the ancient Commodore KIM-1 computer. See how setpixel, linedraw, and more are implemented from first principles.
- วิทยาศาสตร์และเทคโนโลยี
![ไม่ต้องมีที่ที่ให้ฉันอยู่ แต่ขอแค่มีฉันอยู่ก็พอ (Spaceless) - getsunova [OFFICIAL MV]](http://i.ytimg.com/vi/4N8idbxZ-7M/mqdefault.jpg)
![[Full Episode] MasterChef Junior Thailand มาสเตอร์เชฟ จูเนียร์ ประเทศไทย Season 3 Episode 2](http://i.ytimg.com/vi/YpQnHoQvZt4/mqdefault.jpg)
You should definitely do more things like this with how programming works
Couldn’t agree more. I especially liked the other videos Dave had on C and Assembly. 10-20 mins like this on one relatively simple program gives me lots of practice material to learn from.
@@milk-it no doubt. would also like to learn more about how the magic compiler turns if statements into actual bits that get fed into the cpu
Agreed! So happy to see this type of low level coverage
@@milk-it This video is like "coding from the scratch". The times when developers had to code their graphics drivers on their own are gone. Nowadays, software engineering is not about the basics, but about much more abstract topics like portability, reliability, security and so on on that ground of primitive hardware based drivers.
@@Railur Good point. That's why so many apps look and feel the same nowadays.
This brings back a lot of memories. It was like 2000 or 2001 and I was learning C using books and a compiler written in the 80s! (Borland Turbo C/C++ 1.1) I still have a great sense of nostalgia for that blue background with chunky yellow text and seeing functions written in that glorious font with pointers that poke and peek directly into memory and occasionally prodding hardware registers brings back some fond memories. Thanks , Dave!
Wow, that was really close to when I was doing the same thing, except I found DJGPP, the GNU 32bit DOS compiler, which was used to make Quake as well. Definitely brings back memories for me as well! Loved coding my own graphics like this, and the GNU compiler made it so much easier as you didn't have to worry about things like long jumps, memory boundaries etc... DJGPP handled all that for you.
@@NeilRoy Ha, yeah! I discovered DJGPP a year or so later. It really opened up a lot of options since I was no longer limited to a measly 640k of RAM. Though I think it came at the cost of operating in protected mode which meant you couldn't quite access memory with the same directness as before.
same but the 90s!
TurboC! i remember using it from 1.0 up to a german 3.7 version!
Get off my lawn. This takes me back to 1981.
Your fluency with bit-shifting and boolean is mesmerizing; a master-class video from you would be solid gold.
That idea may be logic but i don't think he has the skills to be a good teacher. Just because we know something that doesn't makes us smart to teach it.
That's really very basic stuff. Bit tricks go a lot further than this in the real world, it's a heap of fun! Just as an exercise for you: try to think of a way to swap two variables without using a temporary variable, but by just using bit operations. Or have a look at a fast bitcount, etc.
Greetings from San Francisco. I thought there were no time machines, but you just brought me back to 1979. I loved it the first time around, and I'm (almost) ready to break out my Poly88 with a Cromemco Dazzler and write code along with you. Almost... but sanity prevailed. Dave, you are a BAD influence. I can't wait for your next stroll through my faded youth.
I remember implementing the Bresenham circle algorithm in assembly and also figuring out the math behind it when I was in 8th or 9th grade where I had just learnt the the Pythagorean theorem. It was so awesome :)
You can speed up that Bresenham's implementation considerably by avoiding calls to SETPIXEL. Instead, translate the x,y starting point to a byte address and a mask (as done within SETPIXEL), and within the loop, treat x moves as shifts of that mask (adding/subtracting one to the byte offset if the mask becomes 0), and treat y moves as adjustments (add/subtract BYTESPERROW) of the byte address.
Back in the day (circa 1985 with an EGA/VGA adapter on a PC running MS-DOS) I had an assembly language Bresenham's that was nearly as fast as a NEC 7220 based board.
Also, for a lot of applications (I was doing CAD work at the time), it is well worth the minimal effort to optimize horizontal and vertical lines.
Back on my CGA machine I was doing just that. I started with a setpixel (ASM inside of C code). That was about 200x faster than the built in command..
I started with this level of simple line command, setting every pixel of the line. Then improved it with a look at how many bits in a byte are set and did them all at once.
Fun times!!
@@hrayz Yeah, BGI, Borland's graphics library, was useless. It was nice and compatible, but useless in terms of speed. And couldn't access MCGA / 256-colour mode. Better to just set a big pointer to graphics RAM and do it yourself.
More C programming please. Love it!
This reminds me so much of when I was a kid programming different early machines that did not have any built in graphics like the early Atari and TRS80. I love it, please make more videos like this one. Thank you very much.
Great video!!
I never have to touch low-level programming in my line of work but as time goes on in deepening my appreciation for this technology and the people who both understand it and are willing to share it. Everything is built on top of this! Incredible!
That was awesome! I remember doing this in the early 80's. I have a lot of nostalgia for this and sometimes actually miss it, if you can believe that! More please!
Loved this! Man, this takes me back. I still prefer to program in C (not C++) to this day, usually using a GNU compiler which supports the newer versions of C. I remember programming graphics in DOS on my old computer in the 1990s. I wrote my own graphics library much like you have here by accessing A000 etc... as I learned I added more functions to it for lines, some optimized functions for straight lines (I think that used memset commands to set larger amounts at once). I loved those days and the fact that it wasn't done for you. I created a free game called Deluxe Pacman 1 & 2 for DOS, older Windows and modern Windows (last tested on Windows 10) and it is coded entirely using C (no plusses), only it uses the Allegro library (I honestly wish I had done it entirely on my own and never used a library). Good times anyhow.
Oh, and I used to use DJGPP for DOS back then, it handled the memory limitations for you, so no worries about things like long jumps and the like. I believe Quake was written with it. Very nice.
This is so cool. I always wonder how did you guys learn these things, I really love low level programming but I don't understand it that much.
I'm trying to learn what you did to write Pacman, but my graphics library will be entirely vector-based, so no more of those yucky antialiased jagged textures, and made especially for SVGA. I'm doing this for my own optical engine, then onto the FI and POST for my homemade operating system Chiplock, and then for what's known as a GCLI, which is just a regular CLI with graphical elements included to create a sense of immersion. It would have also been handy if CRT monitors were still common.
Really love this Dave! It's so great to draw some wisdom from the older generation of programmers. I'm continually amazed at the kind of fundamentals you develop if you don't spend all your day debugging yaml templating
Hi Dave, thanks for the great video!
This takes me back to my C64 days. You're absolutely right about the bit pattern for the characters being right to left on a left to right ordered screen memory. Though I never even gave it a second thought at the time, it just made sense since it was writing a byte to memory and that's the order of the bits for a 6502/6510
You're my hero 💙 and all I have been looking for.
Finally now I have a tutorial guide for the idea behind how graphics were designed and implemented.
This is great. I recently wrote my own graphics API using similar algorithms. I will have to add Moire! Thank you for your channel.
A few years ago I wrote a graphics primitive library for Arduino driving a 20*10RGB led array. This was used in a series of digital art workshops as part of our National Arts Festival. The best of the art was later displayed on our huge Rgb periodic table display. Each element was about 6x6” . Since the pixels were wired in an odd order I created a translation table to translate x/y to pixel number. Fun times.
Dave, this was super-cool! Thank you so much for posting this video. Yes, would love to see more content like this. Cheers!
Great video, it's always great to take a stroll through low level land and look under the hood. We take a lot of modern libraries for granted!
This is amazing! It also shows up how in previous a programmer have to think twice before using a single byte otherwise they may run out of volatile memory. The code was clean and explanation wad on point. Really great work!
Why you don't say ram instead of volatile memory? Anyway agreed
Thanks Dave, it really is quite nice to receive a master lesson on such simple graphics outputs. Reminds me of learning Fortran over a night shift so that I could modify a shift trivia quiz to include a graphical image, using ascii characters. Amazing what you learn when you need it! Writing Trev wins with an image of a winners cup, no matter who wins, was the result I famously added to the code! Take that A-shift! Hahaha 🤣
I'm learning Spring Boot and Java, a real programming language as many people say, not like JavaScript. I found out Java was based on C. So many things worked thanks to C, it's incredible. I also just found out your channel, it looks very interesting. Keep it up. 👏👏👏
Love you explanations, so easy to understand.
I’m a beginner but still so interested in low level programming. This is amazing! I feel like C is such an awesome first language
That display is beautiful. I love old graphics
Dave, enjoy your podcast. Would like to see you interview the folks who made up the team that created the 6502.
I would be interested in this as well!
Assembler gets my vote :)
Thank you, Dave!
As someone with little programming knowledge this video is really good.
Excellent. Please continue professor...
Really enjoyed this one. I am somewhat in the middle of working out how to render text to the C64 bitmap display, so this was a handy video.
It brings me back to the good old days when the bar was low regarding customer expectations, and it was easy to impress people. Even yourself.
Happy memories of designing a tiny antialiased font to draw text in 256 color SuperVGA. It was for a simple GUI to acquire and show CCD camera data for use in an electrophysiology lab (looking at calcium transients in cells using calcium-sensitive fluorescent dye). Somehow there was enough room on the screen to display the image frame, a histogram and a control panel at the same time. The advantage of whatever mode I used was it had square pixels (so the image frame wasn't distorted) and there were enough colors to represent the range of intensity values coming in from the camera. If I remember right, it was a variable width font with maximum width 6 pixels and a height of 9 pixels. The manual 'antialiasing' was two-tone.
This C stuff is so great to watch it was a simpler time, but at the same time more complicated (?)
I'm surprised how simple this code looks, despite the fact that it's so low-level. Very interesting!
I'm glad that i took hard copy of my gfx library back in mid 90's. After HDD crash it would have been gone otherwise. "beautiful" C and assembler code in actual paper made by bit over twenty years old Airjuri. :D
It has filled polygon, bresenham line, -circle and some screen fading effects. Off course all optimized for 320x200 screen. I should probably finish that game project i started back then ;)
Ah brings back memories getting into assembly on my 6502 atari 800 xl back in 1981 or something... Still up till this day, 40 years later one of the most satisfying periods in my life :P
You're very talented. This video is great
Thank you sir. You are a living library.
It's cool because I always knew how font code in terminals technically works and probably could write it myself but its just cool to see it. I never really knew where that code actually exists in Linux whether it's a library function or something in BASH. It's such a basic thing to draw ascii it just feels like one of those things that's so rudimentary yet important that i don't even know where to find it
Nice tutorial short & to the point.
excellent, expect more things like this, thank you
I love the fact that you are probably going to be the only human on this planet running this code, but you still have sanity checks to ensure that you're not going outside of screen memory. The force of habit from a person who has had to reflexively sanitize inputs his entire life.
Hi. Great video. Every video I've ever seen you make is a great video.
I wrote a line-draw algorithm using Bresnahan's algorithm, which is faster than the most modern line-drawing algorithm. I used system functions to draw text. I might rewrite that to make the text code more portable.
At 3:22, you said the 127 was for the leftmost pixel and 1 was the rightmost pixel. I think you meant 128 and 1, unless the pixel is set to zero, in which case a mask of 127 is correct for the left-most pixel, and a mask of 254 is needed for the rightmost pixel. I'm sure you know what, and that most people realized what you meant.
FINALLY
someone who gets my goals c:
I remember doing this kind of programming for the PC before windows came out. Sound drivers too… fun times. Blew up a monitor or two.
I gave this a thumbs up before I even skipped past the ad that preceded it
Edit; And after watching, I wasn't wrong.
I’ll absolutely take more of this. I’d like to see code for capturing mouse and keyboard input.
Idk how to do it from scratch but There are functions for that in the windows library. GetAsyncKeyState will capture keys(even when the program is minimized).
@@bobfarker4001 Well it doesn't matter if the program is minimized unless you have focus checks or you wait event. Peek event or no window / draw loop at all will just make the program work in the background. I made a little keylogger like that, forgot about it for awhile and checked the file later only to see me trash talking people in tf2.
@@puppergump4117 LOL. it is funny when you look at your own logs. I've made several keyloggers, some email some save locally. If you're email that is doing the logging gets hacked you're fucked.
That takes me back to programming on a VGA in assembler. I remember wishing I could do it in C.
I used to love creating my own character graphics on bbc basic. I’d have loads of 8x8 graph paper doodles then calculate the byte for each line. I was 8.
Hey Dave,
Very cool! Love the KIM-1 drawing some cool stuff.
Some ideas for next videos:
- Since you now have the Commodore start screen, implement BASIC 🙂
- Let it draw the Mandelbrot set 🙂
- Port a C64 game to the KIM-1. Probably an "easy" one, without sprites... OR, implement you own game... e.g. Tetris 🙂
Keep up the cool videos, especially about Commodore stuff and the KIM-1.
Greetings from Germany,
Nils
Yes, I remember my first challenger in programming when I was teenager and was to create a line function, no internet, no books. Then next challenger was a painting function, seriously very complex for me and more easy was to create a draw circle or ellipse function, only play with sines and cosines.
Really great. thanks for the insight.
Thanks for the memories.
That reminds me of the first games I tried to make in high school. Going from amiga to a PC, playing with power basic and int 13h screen modes. How you could swap between 2 screen buffers to not see the screen flicker during updates. It was cool how drawing triangles, and fill routines worked. Reading code from dr.dobbs journal in asm.
Hi dave, I made my own petscii font (C64) in python with hex codes in a list. I used it for the LED Matrix TEXT scroller I built from a leftover 2812b strip. It was fun to do.
Taking in stuff that's over your head is the first step to raising your head so time well spent.
I started using C for direct screen graphics in the DOS days using interrupt 10 to set VESA video modes. There day I still enjoy writing directly to the screen using C++ and the frame buffer and more recently drm/kms on Linux.
This is so beautiful
Dave, would you be willing to do a programming series? I'm talking about all programming languages, from the ground up, at least the basics. I need that, and I'd bet others do too. You explain things better than most.
Awesome explained
Nice idea of porting a C compiler, even if limited, to the KIM-1. Good stuff.
@@Dm_official_Daves_Garage BOT! All, do not reply to the fake Dave!
It is not porting. CC65 just generate 6502 code from C. You need to set a configuration to target KIM-1 - it is pretty much the extra stuff you need (beside the actual code) to make it easier/useable by the system.
It would be interesting to see how LLVM-MOS compares to CC65 these days. There are some rather large projects using LLVM-MOS now, including CP/M for the 6502.
Will we ever see a new Tempest bath robe record run again? Loved the last record video and the atmosphere where you had a casual morning with your coffee and setting a new record. Highly enjoyed watching it during my morning routine as well. :)
Loved it... Just the episode for "weirdos" like me that think doing stuff like a console graphics library, console raycasting renderers and the like is "fun". A graphics "first principles" of sorts. If i may suggest, add a text renderer that won't wrap and only draws whatever is within the valid screen area. Scrolling text, floating text, moving text in general. Guess FloodFill is next :P
Sounds like the beginning of a C only/CPU only 3d renderer from scratch series :)
3:22 *Correction:* 128 is the first left pixel. 127 would be the right 7 pixels of the first 8 pixels.
The Apple 2 reverses the bits for HGR. LSB is left-most bit, MSB is a palette bit, and bit 6 is the right-most pixel.
True, thanks!
Would love to see you make a program or game for the Commander x16. I've programmed C for 3-4 years, and I struggled to grasp this from the first second. If that is basic, I bow to your skills.
I think I would have needed 3x more lines. Great job.
Really nice👍
I’ve always had this misunderstanding of how to use bit shifting and utilizing bitwise operands, a video on that would be very nice !
Actually, adding another comment has become my trade mark. So I would add that we should explore the layers of programming onions to see if we can create a screen function, similar to screen 1,1; or screen 2 altering the mode to graphics mode, just like the PET. Be interested to see if you could add this to the simple graphics card in some fashion! 😊
Very nice!
Good stuff. There is a DirectBitmap class on stack overflow that'll give you C# for drawing pixels at speed in winforms using a pinned memory array. What graphics functions could leverage parallelized linq? That's probably an unexplored niche.
I'm wondering if you have enough memory on that thing to implement the full libc. If so I'd love to see it. As for the table, I'd use one regardless of how many or few edge cases there are because it'll always be faster and 256 bytes is really not too much to ask in this instance. If we were talking about upper and lower casing things, then it might be too much.
I think I need this
Mode 0x13
Oh this bring back the good ole tutorials
Dave you are a badass.
Man, it's been many decades since I've seen code this far down in the weeds, but I do remember the good old bit flipping days of C/ASM. Thanks for refreshing those brain (RAM) cells... should be good for another 30 years or I get unplugged.
Thank you Pal!!!! ESPECIALLY Thank you for Windows 95b OSR2 - my first "my" PC my dad bought me was a 133MHz Pentium w/MMX inside Packard Bell, i wish i still had it. I remember finding out that the Right-Mouse button did stuff 0.0 and then as i explore every little piece i could, i would check out the About... and find your name many times.
before that my computers were the tandy color computer line, i remember creating my own operating system/client-user-interface/data-decoding-REencoder using an interfacer with my coco3 and two half height floppy drives. course at the time i didnt know any of those words, i was just trying to create a master program i could have perform multiple computation tasks while i was at school and then review the results on disk when i got home from time to time. but i was like 12 or something, soo...
You though, you totally rock man!!! I love your videos and show them to people i know in my local area including a friend a few days about about your book, he told me he's going to check it out.
and for the on-topic subject: yes i love your videos, every chance i get some free time, im checking them out. i especially love your style of C/C++ which is gnarly awesome!! I am in the process of working on my own (is it 'retro' the kids calling it these days??) anywho, my own 'computer' of sorts from scratch. I am hopeful i can get something that i can eventually mass produce and sell but we'll see
ohh i meant to say yes I would like to see more videos on programming graphics in C/C++ and on your computer research! +1
Love it 👏👏👏
Hi, Dave. nice c video. do you have some videos about your IDE and plugins/extensions you used in the video? nice piece eye catching is the mouse-over tooltip showing variables/functions call info. that's nice to have
This is definitely fascinating writing runnable programs for the PET in C. Some quick questions about it, is this being cross-compiled eg. like on x86-x64 platform with the toolchain targeting whatever instruction set the PET uses? Is there anything like a notion of an executable format on the PET? eg. PE32 on windows, ELF on Linux. How do you load the compiled executable onto the PET?
He mentioned CC65 which is a C cross compiler for the 6502 CPU. The CC65 compiler can generate multiple output formats, like raw images of machine code or even a PRG-file for the C64 etc. I have a few videos on my channel about the CC65 compiler. I'm not anywhere Daves level though. :)
You just recalled 0xb8000 to me. Hercules forever! ;)
This is my morning drug
Why not reorder the ramfont instead of using translation tables for finding the right index?
Brings back happy memories of coding on a DOS box and having to implement all of that functionality myself. How quickly could it render to a screen buffer and then flip it to the display? Or is there not enough main memory for a buffer?
nooo buffers there...
If you were lucky then the video RAM didn’t suffer contention with the CPU (you’d see visible glitches on screen when both tried to access it at once. The PET tried to restrict it’s self to video updates during the blanking period because of this). RAM was far to expensive to waste for a double buffer.
Takes me wayyyy back to the 80s/90s when I was teaching myself graphics programming. Turned out it was a passing phase and sysadmin/programming then database work was where my future lay, but fun nonetheless.
I once had to do something similar in TRS-80 basic to render a working analog clock. The "pixel" drawing was quite interesting in that machine since the character set contained 64 characters consisting of 2x3 black&white (black&green) blocks (one character for each possible combination of those 6 "pixels"). The way of walking a line to draw each pixel was pretty much the same as in your case, Dave. The "mathematics" (missing most of the C bit manipulation options) of setting/clearing specific pixels was a bit of brain teaser though. And needles to say that it was slow enough to make a real-time seconds hand unthinkable.
On the other hand, clearing/filling the screen (when done in machine code) was fast enough to create a stroboscope thanks to the mere 1K of video memory and the mighty handy LDIR or LDDR instructions (those of you with any Z80 experience can probably code that in under a minute).
Anyway, thanks for an entertaining trip back in time to those early times where problems had to be solved by pure brain-power rather than processor-power. :)
Sixel graphics.
This reminds me times when I was seven years old with zx spectrum at home, some programs in basic and one book to look at and to learn from. For some reason my mother which knew something about programming (algol, prolog ,fortran ... not sure) from university helped me with writing programs drawing doilies. I guess it was some cycloids with use of trigonometric functions. But I'm sure basic had sin, cos, putpixel or similar command. It was nice to watch cause it took some time.
I'm surprised that computer from that era has C.
That's a great memory, Pavel.
It’s a modern C compiler that targets 6502 code. C was far from popular on that generation of hardware at the time.
@@stevetodd7383ops. Yes. Editor in 80s didn't have syntax highlighter and I was not thinking about cross compiler. Which brings question how to transfer data. USB to serial? Old computer with floppy drive? Audio cable emulating tape?
@@pavelperina7629 I think Dave mentioned connecting via serial. These machines did lack a lot of the oompf needed for a modern IDE, and even at the time a lot of commercial work was cross compiled on mini computers (MS BASIC started life on a PDP IIRC).
awesome ty
Does the setpixel also has a starting point and ending point where the pixel draw is starting from and ending on? to make it possible to calculate from each side where to perform a future possible draw call within some future functionality. This could be useful for determining light sources on surfaces and what not for 2D or 3D games.
cool thank you
Hey Dave excellent show..long time listener first time caller...:-) I subbed after your addressable RGB LED series. Ive also had to work with these functions mostly in the last few years in writing graphics to OLED screens and I utilized these same functions you've described here but in my applications drawing graphics pixel by pixel while sending and receiving data takes up too many cpu cycles so i had to find another way... I can display an entire 30 second (10 frame/s) graphic animation to the screen using somewhat less cpu cycles by drawing the entire screen frame by frame( from const char pixel bitmap pixel arrays) but theres a shortcut because i just turn black and white images into frames and those can be sourced from anything. ..my knowledge has some gaps i need help with one main thing. How can i write the display using a changeable char array instead of constant char so i can rewrite each frame after compilation or how do i write the data directly to the memory location of the const char to change its contents in the loop? i tried a few pointer based methods before but i think it either didnt compile or kept crashing. i probably just needed to tighten up syntax somewhere...
Hi Dave … would you consider to create an Assembler and C-Language Beginner tutorial series? I know there are a lot of tutorials here on YT, but not in that type of quality 👌🏻
If you think that in 8 min you will learn C/ASM ... then yes, there are no tutorials "in that type of quality" :D
Could also use xxd -i to generate the font array.
You could save 256+ bytes from result just rearranging of font array. And even save some ticks of CPU. Precalculatable things should be precalculated.
I'm doing the same thing today, on MCU ;p (started on Apple 2 in 81, 8Bits, Official Atari dev, Next, BeOS, Mac, PC, Dreamcast, GC, Wii, PSP, PS2 3 4 5, Xbox etc.. And now back to the roots on MCU, and back to 2D, Threads, Memory, Filesystem, bootstrap and void main(void) ;p
was always looking for something like this.
I am learning to design graphic library for embedded displays. Do you know any books where I can learn more on this topic about ??
When a grid misaligns with one that's behind, that's a Moire!
You forgot the "🎵"!
With SVGA graphics, the SetPixel function must obviously be tweaked for what colour the pixel should be; obviously an int type will do, but care must be taken to ensure the proper ordering of alpha, blue, green, and red channels.
And now I also know how my own homebrew library, for rendering NURBS contours, should be written.
jurassic park
Dave, rock on!