Yeah, it looks nice, but how did you do this?
Explaining a simple demo effect
Sven Oliver "SvOlli" Moll - 31C3 - 2014-12-28

Plasma Effect

From Wikipedia:

The plasma effect is a computer-based visual effect animated in real-time. It uses cycles of changing colours warped in various ways to give an illusion of liquid, organic movement.

Plasma was probably invented by demo coders for use in their demos where the effect was heavily used, especially in the early 1990s. [...] Plasma can also be implemented easily in software rendering by using sinus tables and pseudocolor palettes, and it has also been the first true demo effect for many beginning PC democoders.

Annotation from me:

Here I'll be showing only ONE way to do a plasma effect. The word "Plasma Effect" describes rather a "family" of effects, than just a specific one. There are some reference implementations, but using them will end up getting something that's missing that "new and exciting"-feature.

Some random notes

Motivation

Last year I did a lightning talk on why I'm coding demos, today I'll explain how I coded a simple effect. At this rate, you'll be able to code your own demo at 42C3.

This is an 8-bit implementation

The implementation took place on an Atari 2600 VCS (1979). So it's integer based, things might be different when implementing on an current PC, but the principles should be very alike.

Biggest limitation: can't do full resolution effects on X axis.

Tables For Fast Calculation

What is the fastest way to do y=f(x), for x and y being [0..255] (8-bit architecture)?
Using a 256 byte table as a function!

Sinus Table

The sine wave function is one of the demo coders best friends. It makes movement seem natural.

Pseudocolor Palette Table

Matching a single number to set of RGB values. On 8-bit hardware usually done in hardware. Sometimes it was configurable, but this rather happend with the start of the 16 bit machines, like the Amiga.

The Pseudocolor Palette Table

The Pseudocolor Palette Table

 $00$01$02$03$04$05$06$07$08$09$0A$0B$0C$0D$0E$0F
$00                
$10                
$20                
$30                
$40                
$50                
$60                
$70                
$80                
$90                
$A0                
$B0                
$C0                
$D0                
$E0                
$F0                

A simple pseudocolor palette would be a gray scale from 0 to 255.

The Atari 2600 VCS doesn't provide this, let's see what we've got.

Color Table for NTSC

 $00$01$02$03$04$05$06$07$08$09$0A$0B$0C$0D$0E$0F
$00                
$10                
$20                
$30                
$40                
$50                
$60                
$70                
$80                
$90                
$A0                
$B0                
$C0                
$D0                
$E0                
$F0                

Color Table for PAL

 $00$01$02$03$04$05$06$07$08$09$0A$0B$0C$0D$0E$0F
$00                
$10                
$20                
$30                
$40                
$50                
$60                
$70                
$80                
$90                
$A0                
$B0                
$C0                
$D0                
$E0                
$F0                

Color Table for SECAM

 $00$01$02$03$04$05$06$07$08$09$0A$0B$0C$0D$0E$0F
$00                
$10                
$20                
$30                
$40                
$50                
$60                
$70                
$80                
$90                
$A0                
$B0                
$C0                
$D0                
$E0                
$F0                

Better Color Table for PAL (1)

 $00$02$04$06$08$0A$0C$0E $00$02$04$06$08$0A$0C$0E
$00        $00
$10        $10
$20        $20
$30        $30
$40        $40
$50        $50
$60        $60
$70        $70
$80        $80
$90        $90
$A0        $A0
$B0        $B0
$C0        $C0
$D0        $D0
$E0        $E0
$F0        $F0
original PALreference?

Better Color Table for PAL (2)

 $00$02$04$06$08$0A$0C$0E $00$02$04$06$08$0A$0C$0E
$00        $00        
$10        $10        
$20        $20        
$30        $30        
$40        $40        
$50        $50        
$60        $60        
$70        $70        
$80        $80        
$90        $90        
$A0        $A0        
$B0        $B0        
$C0        $C0        
$D0        $D0        
$E0        $E0        
$F0        $F0        
original PALNTSC

Better Color Table for PAL (3)

 $00$02$04$06$08$0A$0C$0E $00$02$04$06$08$0A$0C$0E
$00        $00        
$10        $10        
$20        $20        
$30        $30        
$40        $40        
$50        $50        
$60        $60        
$70        $70        
$80        $80        
$90        $90        
$A0        $A0        
$B0        $B0        
$C0        $C0        
$D0        $D0        
$E0        $E0        
$F0        $F0        
permutated PALNTSC

Better Color Table for PAL (4)

 $00$02$04$06$08$0A$0C$0E $00$02$04$06$08$0A$0C$0E
$00        $00        
$10        $10        
$20        $20        
$30        $30        
$40        $40        
$50        $50        
$60        $60        
$70        $70        
$80        $80        
$90        $90        
$A0        $A0        
$B0        $B0        
$C0        $C0        
$D0        $D0        
$E0        $E0        
$F0        $F0        
permutated PALNTSC

Better Color Table for PAL (5)

 $00$02$04$06$08$0A$0C$0E $00$02$04$06$08$0A$0C$0E
$00        $00        
$10        $10        
$20        $20        
$30        $30        
$40        $40        
$50        $50        
$60        $60        
$70        $70        
$80        $80        
$90        $90        
$A0        $A0        
$B0        $B0        
$C0        $C0        
$D0        $D0        
$E0        $E0        
$F0        $F0        
permutated PAL with frog-dnaNTSC

A Short Recap
Because something is still missing.

Original Color Table for PAL

 $00$01$02$03$04$05$06$07$08$09$0A$0B$0C$0D$0E$0F
$00                
$10                
$20                
$30                
$40                
$50                
$60                
$70                
$80                
$90                
$A0                
$B0                
$C0                
$D0                
$E0                
$F0                
Pixel:
Frame:

NTSC-Like Color Table for PAL

 $00$01$02$03$04$05$06$07$08$09$0A$0B$0C$0D$0E$0F
$00                
$10                
$20                
$30                
$40                
$50                
$60                
$70                
$80                
$90                
$A0                
$B0                
$C0                
$D0                
$E0                
$F0                
Pixel:
Frame:

Demo Suitable Color Table for PAL

 $00$01$02$03$04$05$06$07$08$09$0A$0B$0C$0D$0E$0F
$00                
$10                
$20                
$30                
$40                
$50                
$60                
$70                
$80                
$90                
$A0                
$B0                
$C0                
$D0                
$E0                
$F0                
Pixel:
Frame:

Demo Suitable Color Table for PAL

 $00$01$02$03$04$05$06$07$08$09$0A$0B$0C$0D$0E$0F
$0000020406080A0C0E0E0C0A0806040200
$1020222426282A2C2E2E2C2A2826242220
$2020222426282A2C2E2E2C2A2826242220
$3040424446484A4C4E4E4C4A4846444240
$4060626466686A6C6E6E6C6A6866646260
$5080828486888A8C8E8E8C8A8886848280
$60A0A2A4A6A8AAACAEAEACAAA8A6A4A2A0
$70C0C2C4C6C8CACCCECECCCAC8C6C4C2C0
$80D0D2D4D6D8DADCDEDEDCDAD8D6D4D2D0
$90B0B2B4B6B8BABCBEBEBCBAB8B6B4B2B0
$A090929496989A9C9E9E9C9A9896949290
$B070727476787A7C7E7E7C7A7876747270
$C050525456585A5C5E5E5C5A5856545250
$D030323436383A3C3E3E3C3A3836343230
$E030323436383A3C3E3E3C3A3836343230
$F020222426282A2C2E2E2C2A2826242220
Pixel:
Frame:

The Sinus Table

The Sinus Table

 $00$01$02$03$04$05$06$07$08$09$0A$0B$0C$0D$0E$0F
$00404143444647494A4C4E4F5152545557
$1058595B5C5E5F60626364666768696A6C
$206D6E6F7071727374757676777879797A
$307B7B7C7C7D7D7E7E7E7F7F7F7F7F7F7F
$407F7F7F7F7F7F7F7F7E7E7E7D7D7C7C7B
$507B7A7979787776767574737271706F6E
$606D6C6A69686766646362605F5E5C5B59
$705857555452514F4E4C4A494746444341
$80403E3C3B393836353331302E2D2B2A28
$902726242321201F1D1C1B191817161513
$A01211100F0E0D0C0B0A09090807060605
$B004040303020201010100000000000000
$C000000000000000000101010202030304
$D004050606070809090A0B0C0D0E0F1011
$E0121315161718191B1C1D1F2021232426
$F027282A2B2D2E303133353638393B3C3E

Adding Two Sinus Tables

  c(x) = sin(frame + x) * 2

Adding Two Sinus Tables

c(x) = sin(frame + x) * 2 c1(x) = sin(frame - 3*x)
c2(x) = sin(frame + x) * 0.5
("* 0.5" really is ">> 1")

Adding Two Sinus Tables

c1(x) = sin(frame - 3*x)
c2(x) = sin(frame + x) * 0.5
("* 0.5" really is ">> 1")
c(x) = sin(frame - 3*x)
       + sin(frame + x) * 0.5

Adding Two Sinus Tables

c(x) = sin(frame - 3*x)
       + sin(frame + x) * 0.5
turned 90° clockwise

Adding Two Sinus Tables

turned 90° clockwise Atari 2600 VCS pseudocolor table

Adding Two Sinus Tables

turned 90° clockwise grayscale pseudocolor table

Adding Two Sinus Tables

turned 90° clockwise Atari 2600 VCS pseudocolor table

Original Implementation

Plasma in 1D

Going 2D

Going 2D

c(x,y) = sin(frame - 3*x)
          + sin(frame + y) * 0.5
 

Going 2D

c(x,y) = sin(frame - 3*x)
          + sin(frame + y) * 0.5
The same as on the left side,
just in a 16x16 pixel raster

Original Implementation

Plasma in 2D

Conclusion

Thank you!

Want to see the full demo?

  • Live presentation: visit me at Leitstelle 511 / Milliways
    • In the hackcenter between Türtris and the Tardis.
  • Internet: http://xayax.net/bang!/

Want to start coding on the Atari 2600 VCS?

(Presentation done with deck.js and animated GIFs.)

           

/