Nambafa

This is my first attempt on a graphics tutorial. I wouldn't dare to call it a "demo school" or anything like that, as I expect it to be really basic stuff in here (reflecting my personal skill level). I am writing the tutorial mainly for my own learning and amusement, but I am hoping that it will be of some use to others as well. :)

The tutorial will be about computer graphics in its most basic form, i.e., by modifying the pixel buffer that feeds the display. Making graphics this way is really at the core of computer graphics, and learning the inner logic of it is both fun and instructional.

The tutorial is inspired by Denthor's VGA Trainer Program from the early 90's, which I just loved back in the days when I was a young boy trying to learn how to code. (Thanks, Denthor!)

The code implementations will be done in JavaScript using the canvas html element.

I will try to make it as simple as possible, but some basic html/JavaScript knowledge will be needed.

Each part of the tutorial will consist of a text and a live demo + a downloadable zip file. In the text I will try to explain the key aspects of the learning material, but I will not list all of the code or cover all of the details. The full source-code will be available from the attached zip file, and I will try to add comments and keep it structured.

I will also try to add a "Key takeaways" section in the beginning of each part of the tutorial, to summarise the core learnings and how to start playing with it.

I expect that I will do updates to both the text and the code as the tutorial develops, so things are definitively subject to change. I will do my best to keep the zip files up-to-date, but changes will be implemented on the website first. But then on the bright side, the zip files should be more stable. ;)

Each section of the text can be folded/unfolded using the [–] symbols at the end of the headings.

In this first tutorial set, I am planning to cover the following topics:

• Part 1: The basic elements (pixel buffer, canvas, applet)
• Part 2: Some basic pixel shapes (rectangles, ellipses)
• Part 3: Colormaps
• Part 4: The fire effect
• Part 5: Fireballs