Demo tutorials/resources

category: general [glöplog]
So Branch posted a cool video he made in the oneliner about how to get started in demo coding. Gargaj mentioned he was working on an interative tutorial. At some points I have also thought about writing a blog or something simple just to list resources I have found and used to learn more about demo coding.

I figured it might be worth having a thread so that people who are interested can discuss the topic in a better format than the oneliner. Maybe some people would like to collaborate on a tutorial, or perhaps just get some ideas or feedback to help refine their work. It may also save some redundancy by avoiding duplication of work by multiple people?

I think it is a worthwhile endeavour to help and encourage new comers to make demos. Speaking personally I was away from the demoscene for 20 years and my last exprience was on amiga so it took a bit of research to find out the current methods for pc demo coding. There is of course a lot of existing resources but things move so fast, for example when I started out pc sizecoding I found the great IN4k website but unfortunately a lot of the things there were outdated, I think most of the topics predated crinkler for example.

My thoughts on useful information are to focus on covering things specific to demoscene. A lot of the demo specific tools and sizecoding is the sort of thing that should be covered in detail. I don't think the world needs any more generic coding or opengl tutorials as there are plenty of good resources for that already. By all means point out the best examples of coding tutorials but I wouldn't waste too much time covering things that are not demoscene specific. Perhaps focus on coding tricks and techniques specific to demo coding, size tricks, working without any or minimal external libraries, procedural methods of generating geometry and such, the compression, scripting and tiny synths of course.

I think it would be cool to have a 4k tutorial for beginners for example. How to create a minimal startup framework or even start with one of IQ's frameworks, add a shader(s) with basic scripting and a clinkster or 4klang song and get a compressed executable with crinkler.

Anyway I just wanted to get some discussion happening. Feel free to contribute!
added on the 2016-10-24 00:27:17 by drift drift
added on the 2016-10-24 00:42:39 by psenough psenough
updates welcome
added on the 2016-10-24 00:43:10 by psenough psenough
Sorry, I hope you didn't take that as a critcism of in4k. Was just pointing out how fast information can change and at the time I discovered in4k I don't think it had been updated for a while. Of course if I ever get around to making any sort of tutorial I would be happy to contribute.
added on the 2016-10-24 01:04:27 by drift drift
didn't get offended at all.

i recovered it from outdated status a few months ago after noticing like you that it was pretty much dead in the water but could still be a useful resource.

i did what i can to bring it up to useful state, don't see what more i can do without contributions / revisions from others. which are more then welcome, just submit push request or create an issue. or give me your github handle and i'll add you to the group.

it's only meant for 1k/4k/8k but it's a good start resources into demomaking i think.
added on the 2016-10-24 01:47:58 by psenough psenough
Cool, for sure. Well I released my 1k source last year so I might as well put that up. I have a couple of ideas of what I wished I could have found when I first started looking into sizecoding and instead of talking about it I guess it is best to make something myself. I'll start putting some material together later today and see what I can come up with.

And yeah I think the sizecoding stuff is the most demoscene specific information. Of course there is lots of demoscene specifics, but when it comes to modern pc coding if you take away the size restriction then what is left crosses over heavily with game engine programming and there is already a lot of info out there on that.
added on the 2016-10-24 02:05:15 by drift drift
Happy to contribute my Demosplash tutorial after the party! I agree it is worthwhile to encourage newcomers (since I am one ;) ). Do you have a platform in mind for making the info available? newbie.untergrund or something?
added on the 2016-10-24 02:18:11 by cxw cxw
Gargaj, can you tell us more about the tool you mentioned. Sounds great.
added on the 2016-10-24 10:38:47 by branch branch
Gargaj, can you tell us more about the tool you mentioned. Sounds great.

In essence it's inspired by (= ripping off) Codecademy where you basically have a big editor and a little preview screen and you're guided through steps of creating something with an explanation for each step. I found Codecademy to be incredibly useful for people who needed help with learning simple stuff like HTML/CSS, so I wondered that if I set a baseline requirement of "you have to know how a for-loop works", is it possible to teach people graphics step-by-step, and I'm convinced that it is.

As of now I have three main "flavors" in my mind that are all doable in a browser: 2D shader ("Shadertoy"), Processing.js and Three.js; all of these would be relatively easy to do, they cover enough ground and they all provide an interesting skillset enough for people to potentially get hooked. I'm planning to release the 2D shader version hopefully within the next month or so - I haven't done anything publicly because I prefer to fail in private, and my private talks with people about this have been a mixed bag, everyone seems to have their own ideas on what they think is "simple". :)

The plan is to put the whole thing up as a Shithub Page and then just hopefully (=lol) get some PRs in for further development. Up until then I'll work on it in private - but do feel free to shoot me a mail for discussion :)
added on the 2016-10-24 10:57:08 by Gargaj Gargaj
Sounds cool Gargaj. So the focus is on graphics programming?

FWIW I started off with javascript/three.js/webgl. It found it easy to pick up and convenient and as a bonus being browser based it is cross platform mostly. Once you get your head around that it is not so hard to move on to C/C++ and replace the functionality of three.js with some of the available opengl helper libraries. From there you learn to write your own code to replace the library functions once you know and understand exactly what you want to do.
added on the 2016-10-24 11:24:34 by drift drift
Yeah my impression is that there are more than enough resources to learn programming in general, but graphics just seems to be a very specific sideline even though a lot of people are interested in it.
added on the 2016-10-24 12:03:22 by Gargaj Gargaj
Re. OpenGL, my experience looking for tutorials and PC frameworks last year was that you already have to know the difference between classic (fixed-function) and modern (shader+VBO) in order to find the right resources to learn either! I think an internally-consistent walkthrough for three.js would be very useful.
added on the 2016-10-24 12:18:42 by cxw cxw
Agreed. I experimented with DX and GL in C (mmmh NeHe, good ol times), C#, Java, and JS was actually the most fun to play with. You get nice results FAST.
added on the 2016-10-24 19:54:19 by MandelBOT MandelBOT
in the rare case anyone of you wants do dive into <= 256b sizecoding, there is also

added on the 2016-10-24 20:40:10 by HellMood HellMood
I have often reflected on the fact that teaching kids (schoolchildren) maths or physics via democoding/game programming would be absolutely an AWESOME thing to do!
Is there any interest hereabouts for something like that? Once it's done, I could learn from it!! - still hazy on my high school maths! :)
Not exactly democoding, but pretty close: The Nature of Code by Daniel Shiffman http://natureofcode.com/ and http://hello.processing.org/
added on the 2016-10-26 09:00:37 by giddy giddy
hello.processing.org is pretty awesome, if a bit overly kindergarten :)
added on the 2016-10-26 11:11:32 by Gargaj Gargaj
Great links! Always good to work on a project for which content already exists. :)
What I haven't seen mentioned yet in this thread:
- Cross-site taxonomy or tag cloud for discovering resources
- Consolidated feed of new content
- Space to create/host content other than via git, and that isn't sizecoding (mediawiki). (Not every programmer is comfortable with git. Also, some students might want to give back but not be used to pull requests.)
- Cross-site study plan. "To learn X, do Gargaj's ShaderToy tutorial, then Y on in4k, then Z on whatever other site, then release at small party W."
- Q&A for students (demoscene stack exchange? ;) ) - could probably use gamedev.SE
- Peer review, especially ahead of a first or second release.

It strikes me that bitfellas might have a lot of the infrastructure for the above (e.g., posts, news, voting). Any BF folks on this thread who could weigh in?
added on the 2016-10-26 14:12:24 by cxw cxw
Another plan of mine some time ago was simply a "career choice" site where it throws you a bunch of questions and suggests you a starting toolset / tutorial to work with. Basically something like "What OS do you wanna work on" "How well do you know programming already" "Do you prefer 3D or 2D coding" etc.
added on the 2016-10-26 14:48:12 by Gargaj Gargaj
Gargaj: I like that idea - especially good for beginners who don't yet know what terms to search for!
added on the 2016-10-26 15:09:12 by cxw cxw
Not every programmer is comfortable with git. Also, some students might want to give back but not be used to pull requests.

Imho ever programmer should though. I would imagine that when just starting out having a versioned code base will aid the learning process as one has to reason every commit and in case one broke things because of "I dont know what I'm doing"(TM) there are easy ways to recover instead of hoping that your editors undo history is long enough. In addition to that getting the git basics down should be a matter of minutes maybe one afternoon and will save you days of frustrating bug hunts in the long run. There are a ton of good resources and guides like git-scm, they also have a nice interactive in-browser tutorial.
added on the 2016-10-26 15:16:07 by LJ LJ
Let's not go into a VCS argument again :)
added on the 2016-10-26 15:34:11 by Gargaj Gargaj
cxw: My big problem was mostly that it was hard to formulate the questions - most people probably have no clue of what they really want, they just want "demos", but they usually don't watch enough (or they watch way too high-end stuff) to say "hey I like that style" or "I could do that".

Another thing is that some choices sometimes produce undesirable results; if e.g. someone right off the bat goes "yeah I wanna make 64ks", as possible as it is, you sometimes have to point out that it might not be the best of ideas, especially if they don't know much about graphics programming (or programming in general) yet, but if you do then sometimes you dishearten them - though of course you could argue that if they can be easily disheartened then perhaps they weren't cut out to do this.
added on the 2016-10-26 15:40:05 by Gargaj Gargaj
Let me rephrase a bit about 64ks, before someone gets the wrong impression: Making them is a great idea, but e.g. size limitations can often be a cold shower of reality if you're not used to low-level / specific-purpose programming in general.
added on the 2016-10-26 15:41:59 by Gargaj Gargaj
Just saying that using any VCS will provide great value especially for people just starting out. :)
added on the 2016-10-26 16:07:38 by LJ LJ