Carousel Menu kind of...

[johnno56]

Back in 2016 I was fascinated with carousel menus on web pages and how they worked. Decided to try my hand at creating one using SDLBasic and Gimp...

Like most projects of mine, it was relegated to gathering virtual dust on its virtual shelf... But yesterday, 3-Dec-25, I found the project on an old drive and "dusted it off", and having a little spare time, started a crude N7 version. Ah, nostalgia...

The menu is totally visual. The menu selection will only be displayed. But it would not be too difficult to modify it to execute...

Feel free to "use it or lose it."  This is another "just to see if I can" project. It had potential back in 2016 but not so sure about today...

I will not be offended if you "bin it"... after all... I almost did... lol


  carousel.zip (Size: 343.09 KB / Downloads: 5)

J

[1micha.elok]

Hi Johnno,
Hey, may be I missed it, but the N7 file might not be there.
Could you please help me ?
Thank you

[johnno56]

No. You didn't miss it... I mistakenly packed my RCBasic verision instead... This one should help...


  carousel.zip (Size: 343.28 KB / Downloads: 5)

[1micha.elok]

Nice ! Thank you

[kevin]

Love this Johnno, I will enjoy using it.......thank you for sharing.

[johnno56]

Just to show you how old this was... check out some of those archaic icons... lol Of course, the menu, is pretty useless without actually executing the programs... But adding / modifying the appropriate icons and adding the necessaty "system" commands, should change the menu from being 'eye candy' to something useful... lol

[1micha.elok]

Hi Johnno,

Please find a few modification with depth scaling ...

 CAROUSEL DEMO (with depth scaling)
 A rotating 3D-style carousel of icons that highlights the front-most item
 Icons now scale: bigger when closer, smaller when further
 Uses pseudo-3D (2.5D) math via sine/cosine to simulate rotation

Code:

'============================
' CAROUSEL DEMO (with depth scaling)
' A rotating 3D-style carousel of icons that highlights the front-most item
' Icons now scale: bigger when closer, smaller when further
' Uses pseudo-3D (2.5D) math via sine/cosine to simulate rotation
'============================

include "assets/transform.n7"

#win32
set window "Carousel", 800, 400, false
set redraw off

' ---------------------------
' INITIALIZATION
' ---------------------------
objects = 10  ' Number of items/icons in the carousel

' Arrays to store per-object properties:
x = []   ' X screen position (horizontal, centered at window center)
y = []   ' Y screen position (vertical offset for "depth")
z = []   ' Z "depth" value (-1 back ? +1 front)
s = []   ' SCALE factor per object (0.5 to 1.5)
angle = []  ' Base angular position on the circle for each object
icon = []   ' Handles to loaded icon images
title = []  ' Labels for each icon (used in selection message)

' Rotation speed: full circle (2p radians) divided by number of objects,
' divided by 30 frames => one full rotation in 30 frames per item
speed = (2 * PI / objects) / 30

' ---------------------------
' ASSET LOADING
' ---------------------------
' Load 10 icons
icon[0] = loadimage("assets/icon1.png")
icon[1] = loadimage("assets/icon2.png")
icon[2] = loadimage("assets/icon3.png")
icon[3] = loadimage("assets/icon4.png")
icon[4] = loadimage("assets/icon5.png")
icon[5] = loadimage("assets/icon6.png")
icon[6] = loadimage("assets/icon7.png")
icon[7] = loadimage("assets/icon8.png")
icon[8] = loadimage("assets/icon9.png")
icon[9] = loadimage("assets/icon10.png")

' Assign descriptive names
title[0] = "Cube 2"
title[1] = "Doom"
title[2] = "Enigma"
title[3] = "Firefox"
title[4] = "Game maker"
title[5] = "Chrome"
title[6] = "Love 2D"
title[7] = "Opera"
title[8] = "Thunderbird"
title[9] = "Facebook"

' ---------------------------
' INITIALIZE OBJECT ANGLES
' ---------------------------
for m = 0 to objects - 1
    angle[m] = 2*PI * m / objects
next

selected = objects - 1
t = 0

' ---------------------------
' MAIN ANIMATION LOOP
' ---------------------------
do
    ' Clear screen
    set color 0, 0, 32
    cls
    set color 255, 255, 255

    ' ---------------------------
    ' UPDATE POSITIONS & SCALE
    ' ---------------------------
    for m = 0 to objects - 1
        y[m] = 60 * sin(t + angle[m])       
        x[m] = 300 * cos(t + angle[m])     
        z[m] = sin(t + angle[m])            ' depth: -1 (back) to +1 (front)
       
        ' Scale: 0.5 (far) ? 1.5 (near)
        s[m] = (z[m] + 2.0) * 0.5
    next

    ' ---------------------------
    ' DRAW OBJECTS FROM BACK TO FRONT
    ' ---------------------------
    for ii = 0 to objects - 1
        ' Find farthest (smallest z)
        SmallestValue = 2
        m = 0
        for jj = 0 to objects - 1
            if z[jj] < SmallestValue
                SmallestValue = z[jj]
                m = jj
            endif
        next

        ' Mark as drawn
        z[m] = 2

        ' Highlight front-most
        if x[m] > -50 and x[m] < 50 and y[m] > 0
            set color 255, 255, 255, 255
            sel = m
        else
            set color 255, 255, 255, 160
        endif

        ' Compute position
        drawX = x[m] + (width() / 2)
        drawY = (35 / 48) * (y[m] + (height() / 2)) + 120

        'USE DEPTH-BASED SCALE HERE
        scaleX = s[m]
        scaleY = s[m]

        pivotX = width(icon[m]) / 2
        pivotY = height(icon[m]) / 2

        DrawImageTransformed(icon[m], drawX, drawY, scaleX, scaleY, 0, pivotX, pivotY)
        ' Note: angle parameter set to 0 (no rotation), as original didn't rotate icons

        ' Handle selection
        if keydown(KEY_RETURN) or keydown(KEY_SPACE)
            message = "You have selected " + title[sel]
            set color 0, 255, 255
            set caret 400, 50
            center message
        endif
    next

    t = t + speed
    redraw
    fwait 30 
until keydown(KEY_ESCAPE, true)

[johnno56]

Very nice mod. Brilliant idea to adjust the size of the icons... Very cool...

[kevin]

Hi,
I've added a few games that can be launched from the carousel - sincere apologies for the low quality graphics in the carousel

(thanks to Johnno and Marcus for the games)


  carousel game launcher.zip (Size: 2.88 MB / Downloads: 4)

[johnno56]

Very nicely done indeed!

The icons are fine. I usually work on the 'mechanics' of the program. If it works, then I spend as much time as needed, to make it look better... Naalaa is great for creating 'retro' styled games... Perhaps a 'retro' menu using those blocky 8 bit icons... Then there are themes... Perhaps the menu could be totally mouse controlled? Move mouse left or right to rotate and mouse button to execute... Ha. Ideas! Who knew, right? This is all your fault! lol

One potential disturbing thought... "I" noticed that there were only three games. Are you implying that we should be more, shall we say, "pro-active" in producing more examples? lol Nah! Kidding! or am I? Moo ha ha ha ha....

Great job! To quote Darth Vader, and I cannot believe that I am referencing Star Wars, "Impressive. Most impressive. Obiwan has taught you well."