I’ve remember when I was young, reading about Demoscene. Something inside of me pushed me to write first mail to first contact. Back then it wasn’t contact it was *ctx”. My first mail was ugly, some random stuff and toughts, I think I’ve send about 3 mails, each was floppy disk.

Time passed. I even forgot I’ve send anything. And then…First mail arrived, floppy inside, lot of falyers, funny smell. First names came up like Scorpik or Lazur, first Zins from demoscene. Finally I was “swapping” disks with about 20 ctx, I was going on parties like Xenium’99 and enjoyed this brand new world. I’ve meet a lot of friends, I went deep into demoscene and lost myself there.

Yet somehow I wasn’t prepared for that. I was thinking about programming, I was reading coding stuff & assembler stuf… I don’t know, maybe I was just stupid. I couldn’t get into things like offsets in assembler, tunel effects and other stuff were mystery for me.

Now this misterry reveals itself, but verry slow. I feel stupid again, yet I have more determination to acctually understand all of this stuff. It’s my great challenge and I will do it.

But I want to do it on my own, I want to understand and grasp each line of code. I don’t want just copy & paste, hope that it will work. I wan’t to be surre of each pixel… So I’m still struggling with Bump Mapping, yet I can promise, that if this fight continues, I will provide maybe something more easier for me. Plasma of Fire effect are goint to be next. Stay tuned.

So I was trying to do Old School pixel bump mapping and failed misserably. At first I was thinking that should be quite easy task, after all I have some code examples and resources.

Unfortunatelly I believe I didn’t took eneough time to really understand how normals and vectors are working in 2D bump mapping.

Also I think I should go a little bit different approach in my journey into demoscene effects. Making more “demo” and less “effects” version of presentation. Maybe music generation in background isn’t good idea, but some kind of beginning, text and ending would be nice.

So this time again without code & example.

Instead let enjoy together great demo from 99’

Norferin Brama

So finally I did my own tunel effect and I’m quite happy about it. It’s simple, it’s not perfect, but it’s mine :)

So lets back to thinking about tunel. What do we acctually need?

• Texture - that we have from roto zoom effect (x xor y)*
• Scaling from the center to the edges *

Remember how to scale texture? Just draw each pixel as many times as much you want to scale. So if we want to have big texture at the edges of scene, then we need to divide X coordinate by distance from the center.

Let’s do some psuedo code:

var distance = Math.sqrt(Math.pow(center_x,2)+Math.pow(center_y,2))+1; //distance from the center will use for X of Texture

//shiftX/Y is just for little animation for each frame
var xsize = Math.floor((x*ratio/distance)+shiftX)%width;
var ysize = Math.floor((y*ratio/distance)+shiftY)%height;  

var color = texture[ysize][xsize];
          
_Screen.SetPixel(x,y,ColorPalette[color]);  

full code

And now, presentation:

I remember watching demoscene efects and wondering “What the hell?! How they make those pixels bending into a tunel?” Back then I didn’t quite understand tunel effect. I was dreaming about different ways of bending, my head was floating into abstract concepts instead of just go back to school at do the math. In precious post I was describing roto zoom efect and when you think about it a little bit harder then it gets quite obvious. To have tunel effect you have to: 1. Scale up texture 2. Rotate texture 3. Make this scale around circle from inside to the edges of screen

Seems easy, no? Acctually I’m still strugling with it, so I promise next time I will be here with some code & examples

One of simplest DemoScene effects is RotoZoom which consists of two parts - scaled texture & rotation. Rotation is the easiest part, just simple old school angle calculation for new x/y coordinates. Texture is more tricky part. There are many ways for scaling image yet coders from demoscene quickly found a way to produce both texture and scaling it at the same time. Assuming you have generated grayscale colors from 0 to 255 if you do

	color = graycolors[x^y % 255]

you will get nice checker board. When you apply division both to X and Y then you will be scaling board up, and when you multiply in this equastion X and Y then you will be scalling down. Why? Well I will show you this in code:

	var pixels = [0,255,0,255];
	for(var x=0;x<100;x++){
		draw(pixels[x%4]);
	}

This will produce you nice black/white line. Now lets divide x by 2 and round down - what will happen? For X=0,1 you will get 0, for 2,3 - one and so on which means you will draw twice first pixel, then twice second. By dividing position of pixel you are actually scaling up texture!

So main part for rotation & drawing a texture will look like this:

//multipler - just any next number used for rotating to new angle
function DrawChecker(multipler){
	_Screen.FillWithColor(ColorPalette[0]);
	angle=multipler*Math.PI;
	cosinus_angle = Math.cos(angle);
	sinus_angle = Math.sin(angle);
    for(y=0;y<height;y++){
		 center_y=-y+halfHeight; // transform x/y to Cartesian coordinate system
         for(x=0;x<width;x++){
	        center_x=x-halfWidth;
			   
		    newx=Math.floor(cosinus_angle*center_x - center_y*sinus_angle)+center_x+halfWidth;
			newy=Math.floor(sinus_angle*center_x + center_y*cosinus_angle)+center_y+halfHeight;
		
		
			index = Math.abs((newx*multipler)^(newy*multipler))%256;
			   
			_Screen.SetPixel(x,y,ColorPalette[index]);

        }
    }
		  
	_Screen.Draw();
}

full code

And now, presentation:

There was a while when I last wrote anything for blog. Dajsiepoznac intiative by Maciej Aniserowicz is a good kick to back to this habbit. There was a dream I has when I was younger - it was dream about being great coder like guys from Demoscene. Although I liked writing stories and poems, although I was fascinated and mesmerized by music and graphic, those cool 3D effects were like magic for me. So lets try to go together through all Demoscene coders effect.

function DemosceneChallenge(){
	console.log("Begin!");	
}