Building a Procedural Rope Effect in PlayBASIC

January 29, 2026

 


Building a Procedural 'Rope' Effect in PlayBASIC

Scanlines, Gouraud Shading, and Pixel Format Testing

At first glance, this demo looks like a twisting, three-dimensional rope floating over a smoothly scrolling, colour-banded background. It animates fluidly, reacts to user input, and even lets you switch pixel formats in real time.

What makes it interesting is how little machinery is actually involved.

There’s no 3D engine.

  • No meshes.
  • No textures.
  • No z-buffer.
  • Instead, the entire effect is built using 2D horizontal gouraud strips, some trigonometry, and a deliberate approach to colour interpolation. This makes it not only visually appealing, but also an excellent example of how PlayBASIC encourages efficient, low-level graphics thinking.


    What This Demo Is Designed to Show

    This program serves three purposes at once:

  • 1. Demonstrate how complex, organic effects can be built from simple 2D primitives
  • 2. Showcase PlayBASIC’s gouraud rendering and colour interpolation
  • 3. Stress-test different pixel formats (15, 16, 24, and 32-bit) using the same effect
  • You can switch pixel formats at runtime using F5–F8, and press Space to increase the number of edges used to construct the rope.


    Rendering to an FXImage (Why It Matters)

    Rather than drawing directly to the screen, the demo renders everything into an FXImage.

    This allows the program to:

  • Recreate the render target on demand
  • Change pixel depth without restarting
  • Ensure the exact same effect is rendered under different colour formats
  • When the user presses one of the function keys, the FXImage is deleted and recreated at the requested depth. The rendering logic itself doesn’t change — only the underlying pixel format does.

    This makes visual differences between colour depths immediately obvious, especially in gradients and gouraud shading.


    The Background: Colour Bands Built One Scanline at a Time

    The background consists of vertically repeating colour bands that slowly scroll upward. Each band blends smoothly into the next, creating a soft, continuous gradient.

    Pleasant Colours via Golden Ratio Stepping

    Instead of random colours, the palette is generated using a golden-ratio hue step. This ensures evenly spaced hues around the colour wheel and avoids clusters or muddy transitions.

     `NiceRGB()` advances the hue by ~0.618 each step, producing visually balanced colour sequences.
    

    Horizontal Gouraud Strips

    Each scanline is rendered using multiple horizontal gouraud strips, each with its own start and end colour. Because this happens line-by-line, the result is a smooth vertical gradient with excellent control over colour precision.

    This alone already provides a strong test of pixel formats:

  • Lower bit depths show banding earlier
  • Higher depths preserve smoother blends

  • The Rope: A 3D Illusion Built from 2D Spans

    The rope itself looks three-dimensional, but it isn’t.

    At its core, the rope is a rotating ring built from multiple edges arranged in a circle. Each edge is treated as a point in 3D space (X and Z), then projected into screen space.

     Screen X = `(X * focal_length) / Z`
    

    Each pair of adjacent edges becomes a horizontal span — a left and right X coordinate with a colour at each end.

    Only spans that face the camera (left X ≤ right X) are kept, which naturally removes back-facing segments without explicit clipping logic.


    Fake Lighting via Depth-Scaled Colour

    There’s no lighting model in this demo — and it doesn’t need one.

    Instead, colour brightness is scaled based on depth:

    > RGB values are multiplied by a constant and divided by Z
    

    As a segment moves farther away, its colour darkens. As it moves closer, it brightens. This simple relationship produces a convincing sense of depth and curvature, especially when combined with smooth interpolation.

    Because this happens before the colour is packed into the target pixel format, it also makes colour precision differences between formats very obvious.


    One Rope, Many Scanlines

    A key optimisation in this demo is that the rope geometry is calculated once per frame, not once per scanline.

    The projected spans are stored in an array, and then reused for every scanline. The illusion of movement comes from shifting those spans horizontally as the screen is drawn.

    This is where the rope gets its organic motion.


    Motion Through Layered Waves

    Instead of bending geometry, the demo applies several cosine-based offsets per scanline:

  • A slow, wide wave
  • A faster, tighter wave
  • Additional ripples layered on top
  • Each scanline adds these offsets together, producing a flowing, ribbon-like motion that feels far more complex than it really is.

     Geometry stays the same — only the X offset changes per scanline.
    

    This technique is extremely efficient and works beautifully with scanline-based rendering.


    Why Horizontal Gouraud Strips Are Ideal Here

    Every part of this demo is built around horizontal gouraud strips, and that’s very intentional.

    They are:

  • Cache-friendly
  • Deterministic
  • Perfectly suited to scanline effects
  • Consistent across all pixel formats
  • Using the same primitive for both the background and the rope ensures consistent behaviour and makes the demo easier to reason about.


    Scaling the Effect

    Pressing Space increases the number of rope edges. This:

  • Increases the number of spans
  • Adds visual complexity
  • Stresses colour interpolation further
  • Yet the core rendering logic remains unchanged. The effect scales naturally, which is a hallmark of a good procedural design.


    Final Thoughts

    This demo is a great example of PlayBASIC’s strengths:

  • Low-level control without unnecessary complexity
  • Powerful 2D primitives that can fake 3D convincingly
  • A rendering model that encourages efficient thinking
  • Most importantly, it shows that good visual effects are about understanding perception, not just throwing more technology at the problem.


    Full Source Code

    The complete PlayBASIC source code for this demo is included below for those who want to explore it in detail, experiment with it, or adapt the techniques for their own projects.

    Happy coding — and enjoy bending pixels the old-school way.



    	; This is pixel format test version of this demo
    
    	; Function keys f5/f6/f7/f8 to set the display depth
    	;  Space key to add more sides of objects
    
    
    	; open a tall strip like screen for the short
    	openscreen 800,1000,32,1
    
    	PositionScreen GetSCreenXpos(),0
    
    	; Load a new bigger font over the default font
       LoadFont "Courier New",1,48,0,8
       ; set the font rendering mode of font #1 to alpha blend
       fontdrawmode 1,1
    
    	; force a known randomize sequence by seeding  the generator
    	randomize 8262
    
       Global RopeEdges=3
    
    	Dim WaveRippleAngle#(10)
    
    	ScreenWidth  =GetScreenWidth()
    	ScreenHeight  =GetScreenHeight()
    
    	ScreenDepth=32
    	Screen=		NewFXImage(ScreenWidth,ScreenHeight)
    
    	Type RopeVerts
    		X1#,X2#, rgb1,rgb2
    	endtype
    
    
    
    
    For Tests=0 to 20
    
    
    	; init the palette
    	Dim Palette(RopeEdges+2)
    	For lp=0 to RopeEdges-1
    		Palette(lp) =NiceRGB(lp,0.25,0.90)
    	next
    	Palette(lp+1) =Palette(0)
    
    
       Dim RopeSegs(Ropeedges) as Ropeverts
    
    	Do
    
    			if functionkeys(5) then	ScreenDepth = 15
    			if functionkeys(6) then	ScreenDepth = 16
    			if functionkeys(7) then	ScreenDepth = 24
    			if functionkeys(8) then	ScreenDepth = 32
    
    			if GetIMageDepth(Screen) <> ScreenDepth
    					deleteimage Screen
    					Screen =GetFreeImage()
    					CReateFXImageEX Screen,GetScreenWidth(),GetScreenHeight(),ScreenDepth
      			endif
    
    			rendertoimage Screen
    
    
    		// backdrop
    		X1=ScreenWidth *0.00
    		X2=ScreenWidth *0.25
    		X3=SCreenWidth *0.50
    		X4=SCreenWidth *0.75
    		X5=SCreenWidth *1.00
    
    		lockbuffer
    			PaletteBandSize=50
    			ThisRGB1=Palette(0)
    			for ylp=0 to getscreenheight()-1
    
    				YOffset = mod(Ylp+ScrollY,PaletteBandSize*(RopeEdges-1))
    
    				Index = mod(yoffset/PaletteBandSize,(RopeEdges-1))
    				ThisRGB1=Palette(Index)
    				ThisRGB2=Palette(Index+2)
    
    				//  Scale /blend level between bands
    				Scale# = (Yoffset-(PaletteBandSize*Index)) / float(PaletteBandSize)
    
    				ThisRGB	 =  RgbAlphaBlend(ThisRGB1,ThisRGB2, Scale#*80)
    				ThisRGB50 = Rgbfade(ThisRGB,50)
    				ThisRGB20 = Rgbfade(ThisRGB,10)
    
    				GouraudStripH x1,ThisRGB,X2,ThisRGB50,Ylp
    				GouraudStripH x2,ThisRGB50,X3,ThisRGB20,Ylp
    				GouraudStripH x3,ThisRGB20,X4,ThisRGB50,Ylp
    				GouraudStripH x4,ThisRGB50,X5,ThisRGB,Ylp
    
    			next
    
    			DrawRope()
    
    		unlockbuffer
    		ScrollY=mod(ScrollY+1,PaletteBandSize*(RopeEdges-1))
    
    		renderimage Screen,0,0
    
    
    		Sync
    loop spacekey()
    
    RopeEdges++
    	flushkeys
    next
    
    	end
    
    
    
    Function DrawRope()
    
    	Static RadiusAngle
    	RadiusAngle=wrapangle(RadiusAngle +1)
    
       radius=250+cos(RadiusChange)*50
       ScReenHeight=GetScreenHeight()
    	basex=GetScreenwidth()/2
    
    	//  step the global angles
    		AngleStep=2
    		WaveAngle#= WaveRippleAngle#(1)
    		WaveAngle2#= WaveRippleAngle#(2)
    		WaveAngle3#= WaveRippleAngle#(3)
    		WaveAngle4#= WaveRippleAngle#(4)
    
    		WaveRippleAngle#(1)=wrapangle(WaveAngle#,0.7*AngleStep)
    		WaveRippleAngle#(2)=wrapangle(WaveAngle2#,1.2*AngleStep)
    		WaveRippleAngle#(3)=wrapangle(WaveAngle3#,2.1*AngleStep)
    		WaveRippleAngle#(4)=wrapangle(WaveAngle4#,-0.4*AngleStep)
    
    	EdgeAngleStep#=360.0/(RopeEdges)
    
    	BaseZ=1000
    
    	Segments=0
    		static BaseAngle#
    
    		ThisRGB1 = Palette(RopeEdges)
    
    		For lp=0 To RopeEdges-1
    			ThisRGB2 = Palette(lp+1)
    
    			Angle#=BaseAngle#+(EdgeAngleStep#*lp)
    			Angle2#=Angle#+EdgeAngleStep#
    
    
    			X1#=Cosradius(angle#,Radius)
    			X2#=CosRadius(angle2#,Radius)
    			Z1#=basez+SinRadius(angle#,Radius)
    			Z2#=basez+SinRadius(angle2#,Radius)
    
    			Px1#=((X1#*400)/z1#)
    			Px2#=((X2#*400)/z2#)
    
    			If pX1#<=pX2#
    
    				R=RgbR(ThisRgb1)
    				G=RgbG(ThisRgb1)
    				B=RgbB(ThisRGB1)
    
    				R1=(R*500)/z1#
    				G1=(G*500)/z1#
    				B1=(B*500)/z1#
    				R=RgbR(ThisRgb2)
    				G=RgbG(ThisRgb2)
    				B=RgbB(ThisRGB2)
    
    				R2=(R*500)/z2#
    				G2=(G*500)/z2#
    				B2=(B*500)/z2#
    
    				RopeSegs(Segments).x1=px1#
    				RopeSegs(Segments).x2=px2#
    				RopeSegs(Segments).rgb1=rgb(r1,g1,b1)
    				RopeSegs(Segments).rgb2=rgb(r2,g2,b2)
    				inc segments
    			EndIf
    
    			ThisRGB1=ThisRGB2
    		Next
    
    	dec segments
    
    	For ThisScanLine=0 To ScreenHeight-1
    		Xoffset=basex+cosradius(wAVEangle#,50)
    		Xoffset=Xoffset+cosradius(wAVEangle2#+wAVEangle#,40)
    		Xoffset=Xoffset+cosradius(wAVEangle3#,80)
    		Xoffset=Xoffset+cosradius(wAVEangle4#,30)
    
    		For lp=0 to Segments
    				GouraudStripH Xoffset+RopeSegs(lp).x1,RopeSegs(lp).rgb1,Xoffset+RopeSegs(lp).x2,RopeSegs(lp).rgb2,ThisScanline
    	;			GouraudStripV Xoffset+RopeSegs(lp).x1,RopeSegs(lp).rgb1,Xoffset+RopeSegs(lp).x2,RopeSegs(lp).rgb2,ThisScanline
    		next
    		waveangle#	+=	0.15
    		waveangle2#	+=	0.25
    		waveangle3#	+=	0.35
    		waveangle4#	+= 0.33
    
    	Next
    
     	BaseAngle#++
    EndFunction
    
    
    
    
    ; ===============================================================
    ;   Golden Ratio based pleasant random colors
    ;   - Each call with incrementing index gives nicely spaced hues
    ; ===============================================================
    	constant GoldenRatio# = 0.6180339   ; ˜ (v5 - 1) / 2
    
    Function NiceRGB(Index=0, Saturation#=0.75, Value#=0.88)
    	 Local Hue#
    
        ; Start from a random base hue, then walk by golden ratio
        ; (mod 1.0 to wrap around colour wheel)
        Hue# = mod(Rnd#(1) + (Index * GoldenRatio#),1)
        Hue# = Hue# - Floor(Hue#)           ; fractional part only (mod 1)
    
        ; Optional: You can randomise S/V a little for more variety
         Saturation# = Saturation# + RndRange#(-0.15, 0.15)
         Value#      = Value#      + RndRange#(-0.1,  0.1)
        ; Clamp them
        If Saturation# < 0.4 Then Saturation#=0.4
        If Saturation# > 0.98 Then Saturation#=0.98
        If Value#      < 0.5 Then Value#=0.5
        If Value#      > 0.98 Then Value#=0.98
    
    	#if playbasicversion >=165
    	    Result = HSV2RGB(Hue#, Saturation#, Value#)
    	#else
    	    	Result=rndrgb()
    	#Endif
    EndFunction Result
    
    
    
    
    
    Function RenderImage(ThisImage,xpos,ypos,Mode=false)
    	if GetIMageStatus(ThisIMAGE)
    
    			inkmode 1+2048
    			boxc 00,18,275,112,true,$a0a0a0
    			inkmode 1
    
    
    			Xpos+=10
    			Ypos+=20
    			ink $80fFFFFF
    			Text XPos,Ypos		,"  Fps:"+Str$(fps())
    			Text XPos,Ypos+40	,"Depth:"+Str$(GetIMageDepth(ThisIMage))
    
    			rendertoscreen
    			lockbuffer
    				drawimage ThisImage,0,0,false
    			unlockbuffer
    
    	endif
    EndFunction


    Manual Base Conversion in PlayBASIC

    December 08, 2025

     

    Logo

    Converting a decimal number stored as a string into Binary, Octal and Hexadecimal


    In this tutorial we are going to manually convert a decimal number stored inside a string into:

    • Base 2 (Binary)

    • Base 8 (Octal)

    • Base 16 (Hexadecimal)

    This example avoids built-in conversion commands on purpose, so beginners can see how the process works internally.


    Example Output Usage

    s$="87654321"
    print s$ +"="+ ConvertTo(S$,2)
    print s$ +"="+ ConvertTo(S$,8)
    print s$ +"="+ ConvertTo(S$,16)
    print ""
    
    s$="-12345678"
    print s$ +"="+ ConvertTo(S$,2)
    print s$ +"="+ ConvertTo(S$,8)
    print s$ +"="+ ConvertTo(S$,16)
    print ""
    
    s$="255"
    print s$ +"="+ ConvertTo(S$,2)
    print s$ +"="+ ConvertTo(S$,8)
    print s$ +"="+ ConvertTo(S$,16)
    print ""
    
    Sync
    waitkey

    Step 1: Manually Converting the String to an Integer

    Before we can convert to another base, we must first turn the string into an actual integer value.

    This is done digit-by-digit using basic decimal math.

    Function ConvertTo(S$,Base)
    rem assumed 32bit integers
    Total =0
    Negate=0
    
    for lp=1 to len(s$)
        Total=Total*10
        ThisCHR = asc(mid$(s$,lp))
    
        if ThisChr = asc("-") then Negate=1   
    
        if ThisChr >= asc("0") and ThisCHR<=asc("9")
            Total=Total+(ThisCHR-Asc("0"))       
        endif
    next
    
    if Negate then Total *= -1   

    What’s happening here?

    • Each digit is multiplied into place using base-10 math

    • `ASC()` is used to convert characters into numeric values

    • The minus symbol `"-"` is detected and applied at the end

    This is essentially how a basic `Val()` function works internally.


    Step 2: Preparing for Base Conversion

    Each output base is selected using bit grouping.

    select base
    case 2
    Shift=1
    Characters$="01"
    case 8
    Shift=3
    Characters$="01234567"
    case 16
    Shift=4
    Characters$="0123456789ABCDEF"
    endselect

    Why these values?

    • Binary uses 1 bit per digit

    • Octal uses 3 bits per digit

    • Hexadecimal uses 4 bits per digit


    Step 3: Bitwise Conversion Loop

    Now the number is converted using bit masking and bit shifting.

    if Shift
    Mask    = (2^Shift)-1
    Digits = 32 / Shift
    
        For lp=0 to Digits-1
            ThisCHR = Total and MASK
            Result$ = Mid$(Characters$,ThisChr+1,1) + Result$
            Total = Total >> Shift                               
        next
    endif
       
    
    EndFunction Result$

    Important notes:

    • Output is a fixed 32-bit representation

    • Leading zeros are expected and correct

    • Negative numbers are shown using two’s complement

    The result string is built from right to left because the least-significant bits are processed first.


    Summary

    This tutorial demonstrates:

    • Manual string → integer conversion

    • Decimal positional maths

    • Bit masking and shifting

    • Why binary, octal and hex exist

    • How CPUs naturally represent numbers

    This approach may not be the shortest, but it clearly shows how the conversion works under the hood — making it ideal for learners.

    Complete Code:

        s$="87654321"
        print s$ +"="+ ConvertTo(S$,2)
        print s$ +"="+ ConvertTo(S$,8)
        print s$ +"="+ ConvertTo(S$,16)
        print ""
    
        s$="-12345678"
        print s$ +"="+ ConvertTo(S$,2)
        print s$ +"="+ ConvertTo(S$,8)
        print s$ +"="+ ConvertTo(S$,16)
        print ""
    
        s$="255"
        print s$ +"="+ ConvertTo(S$,2)
        print s$ +"="+ ConvertTo(S$,8)
        print s$ +"="+ ConvertTo(S$,16)
        print ""
    
        Sync
        waitkey
       
    
    Function ConvertTo(S$,Base)
        rem assumed 32bit integers
        Total =0
        Negate=0
        for lp=1 to len(s$)
            Total    =Total*10
            ThisCHR = mid(s$,lp)
            if ThisChr = asc("-") then Negate=1   
            if ThisChr >= asc("0") and ThisCHR<=asc("9")
                Total=Total+(ThisCHR-Asc("0"))       
            endif
        next
        if Negate then Total *= -1   
    
        Characters$    ="0123456789ABCDEF"
        select base
                    case 2
                        Shift=1   
                    case 8
                        Shift=3   
                    case 16
                        Shift=4   
        endselect   
       
        if Shift
            Mask        =(2^Shift)-1
            For lp=1 to 32 / Shift
                    ThisCHR = Total and MASK
                    Result$ = Mid$(CHaracters$,ThisChr+1,1) +Result$
                    Total = Total >> Shift                               
            next
        endif
           
    EndFunction Result$

    Remember when a whole generation of kids kick-started the games industry by digging through 8-bit hardware manuals

    November 18, 2025

     

    Logo

    Remember when a whole generation of kids kick-started the games industry by digging through 8-bit hardware manuals?

    I do.

    Back then, we made things simply because coding was how you made things.

    Nobody cared how it looked on a CV. Nobody waited for permission, or worried about “best practices” or “the perfect engine.” We experimented. We shared ideas. We read magazines (ask your parents what a magazine is!). We broke things and fixed them. We layered idea upon idea until the impossible suddenly wasn’t.

    People called it talent.

    It wasn’t.

    It was curiosity, consistency, and a methodical approach to building skills.

    Today? We’re drowning in information. Thousands of tutorials, hundreds of languages, endless opinions echoing in your head: Do this. Don’t do that. You must learn this first. No, learn that.

    It’s no wonder beginners freeze before they even start.

    But here’s the truth:

    If you want to learn to code, pick a language — any language — and give it a shot.

    The specific language matters far less than people claim.

    Once you understand the basics in one, those skills transfer. Moving to another becomes easier. Concepts repeat. Patterns reappear. You build momentum.

    Start small.

    Be proud of the little victories.

    And if your first attempt doesn’t stick? That’s normal. Try again later. You’ll be surprised how much your brain held onto.

    Where you start isn’t where you’ll finish — and that’s the whole point.

    Just keep going!

    #LearnToCode #CodingJourney #ProgrammingMotivation #GameDevBeginners #CodeNewbies #StartCoding #KeepCoding #ProgrammingLife #RetroCoding #OldSchoolComputing #IndieDevLife #GameDevCommunity #SoftwareDevelopment #DeveloperMindset #ProgrammingBasics #CodingTips #CodeEveryday #STEMEducation #TechInspiration #GamedevHistory #8bitComputing #CreativeCoding #BuildInPublic #FutureDevelopers