Wheel Art in Vertical List

[asahendrix]

Hey guys - I've been working on a new theme and I can't figure out how to make a straight up and down vertical game list. I don't want a conveyor or a "wheel" per se, but I do want WHEEL ART on a standard vertical list.

I'm on a Pi 3B+. Here's the code I currently have:

// Wheel

fe.load_module("conveyor");

local pi = 3.14;
local wheels = config["wheels"].tointeger() + 3;

class WheelEntry extends ConveyorSlot {
   constructor() {
      local w = fe.add_artwork("wheel");
      w.preserve_aspect_ratio = true;

      base.constructor(w);
   }

   function on_progress(progress, var) {
      /* Center alignment */
      local pos = abs(ceil(progress * wheels));
      local size, alpha;
      local pprogress = 1 - (pos.tofloat()/wheels - progress) * wheels;

      print(pos + " " + progress + " " + pprogress + "\n");
      size = 0.14;
      alpha = 155;

      if (pos == wheels/2 + 1) {
         size = 0.2 - pprogress * 0.06;
         alpha = 255 - pprogress * 100;
      } else if (pos == wheels/2) {
         size = 0.14 + pprogress * 0.06;
         alpha = 155 + pprogress * 100;
      }

      /* Realign between -2pi/3 and -4pi/3 */
      local angle = (progress * -2*pi/3) + 4*pi/3;

      m_obj.x = (1.4 - size /2)*flw + flh * cos(angle);
      m_obj.y = (0.5 - size /2)*flh + flh * sin(angle);

      m_obj.width = size*flw;
      m_obj.height = size*flh;

      m_obj.alpha = alpha;

      local rotation = (progress * -120) + 60;
      m_obj.rotation = rotation;
   }
};

local conveyor_bg = fe.add_text("", flw*0.73, flh*0, flw*0.28, flh*1);
conveyor_bg.set_bg_rgb(0,0,0);
conveyor_bg.bg_alpha = 220;

local slots = [];
for (local i=0; i<wheels; i++)
   slots.push(WheelEntry());

local conveyor = Conveyor();
conveyor.set_slots(slots);
conveyor.transition_ms = config["spin_ms"].tointeger();



Can anyone help me out?

[asahendrix]

By the way, this is the wheel from the OlRoom theme.

[progets]

Sample of vertical wheel

Code: [Select]

//wheel

fe.load_module( "conveyor" );
  local wheel_x = [ flx*0.78, flx*0.78, flx*0.78, flx*0.78, flx*0.78, flx*0.78, flx*0.76, flx*0.78, flx*0.78, flx*0.78, flx*0.78, flx*0.78, ];
  local wheel_y = [ -fly*0.22, -fly*0.105, fly*0.0, fly*0.105, fly*0.215, fly*0.325, fly*0.436, fly*0.61, fly*0.72 fly*0.83, fly*0.935, fly*0.99, ];
  local wheel_w = [ flw*0.18, flw*0.18, flw*0.18, flw*0.18, flw*0.18, flw*0.18, flw*0.22, flw*0.18, flw*0.18, flw*0.18, flw*0.18, flw*0.18, ];
  local wheel_a = [  80,  80,  80,  80,  150,  150, 255,  150,  150,  80,  80,  80, ];
  local wheel_h = [  flh*0.11,  flh*0.11,  flh*0.11,  flh*0.11,  flh*0.11,  flh*0.11, flh*0.15,  flh*0.11,  flh*0.11,  flh*0.11,  flh*0.11,  flh*0.11, ];
  local wheel_r = [  0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, ];
local num_arts = 8;

class WheelEntry extends ConveyorSlot
{
constructor()
{
base.constructor( ::fe.add_artwork( "wheel" ) );
}

function on_progress( progress, var )
{
local p = progress / 0.1;
local slot = p.tointeger();
p -= slot;

slot++;

if ( slot < 0 ) slot=0;
if ( slot >=10 ) slot=10;

m_obj.x = wheel_x[slot] + p * ( wheel_x[slot+1] - wheel_x[slot] );
m_obj.y = wheel_y[slot] + p * ( wheel_y[slot+1] - wheel_y[slot] );
m_obj.width = wheel_w[slot] + p * ( wheel_w[slot+1] - wheel_w[slot] );
m_obj.height = wheel_h[slot] + p * ( wheel_h[slot+1] - wheel_h[slot] );
m_obj.rotation = wheel_r[slot] + p * ( wheel_r[slot+1] - wheel_r[slot] );
m_obj.alpha = wheel_a[slot] + p * ( wheel_a[slot+1] - wheel_a[slot] );
}
};

local wheel_entries = [];
for ( local i=0; i<num_arts/2; i++ )
wheel_entries.push( WheelEntry() );

local remaining = num_arts - wheel_entries.len();

//we do it this way so that the last wheelentry created is the middle one showing the current selection (putting it at the top of the draw order)
for ( local i=0; i<remaining; i++ )
wheel_entries.insert( num_arts/2, WheelEntry() );

local conveyor = Conveyor();
conveyor.set_slots( wheel_entries );
conveyor.transition_ms = 50;
try { conveyor.transition_ms = my_config["transition_ms"].tointeger(); } catch ( e ) { }
}



[asahendrix]

Sample of vertical wheel

Code: [Select]

//wheel

fe.load_module( "conveyor" );
  local wheel_x = [ flx*0.78, flx*0.78, flx*0.78, flx*0.78, flx*0.78, flx*0.78, flx*0.76, flx*0.78, flx*0.78, flx*0.78, flx*0.78, flx*0.78, ];
  local wheel_y = [ -fly*0.22, -fly*0.105, fly*0.0, fly*0.105, fly*0.215, fly*0.325, fly*0.436, fly*0.61, fly*0.72 fly*0.83, fly*0.935, fly*0.99, ];
  local wheel_w = [ flw*0.18, flw*0.18, flw*0.18, flw*0.18, flw*0.18, flw*0.18, flw*0.22, flw*0.18, flw*0.18, flw*0.18, flw*0.18, flw*0.18, ];
  local wheel_a = [  80,  80,  80,  80,  150,  150, 255,  150,  150,  80,  80,  80, ];
  local wheel_h = [  flh*0.11,  flh*0.11,  flh*0.11,  flh*0.11,  flh*0.11,  flh*0.11, flh*0.15,  flh*0.11,  flh*0.11,  flh*0.11,  flh*0.11,  flh*0.11, ];
  local wheel_r = [  0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, ];
local num_arts = 8;

class WheelEntry extends ConveyorSlot
{
constructor()
{
base.constructor( ::fe.add_artwork( "wheel" ) );
}

function on_progress( progress, var )
{
local p = progress / 0.1;
local slot = p.tointeger();
p -= slot;

slot++;

if ( slot < 0 ) slot=0;
if ( slot >=10 ) slot=10;

m_obj.x = wheel_x[slot] + p * ( wheel_x[slot+1] - wheel_x[slot] );
m_obj.y = wheel_y[slot] + p * ( wheel_y[slot+1] - wheel_y[slot] );
m_obj.width = wheel_w[slot] + p * ( wheel_w[slot+1] - wheel_w[slot] );
m_obj.height = wheel_h[slot] + p * ( wheel_h[slot+1] - wheel_h[slot] );
m_obj.rotation = wheel_r[slot] + p * ( wheel_r[slot+1] - wheel_r[slot] );
m_obj.alpha = wheel_a[slot] + p * ( wheel_a[slot+1] - wheel_a[slot] );
}
};

local wheel_entries = [];
for ( local i=0; i<num_arts/2; i++ )
wheel_entries.push( WheelEntry() );

local remaining = num_arts - wheel_entries.len();

//we do it this way so that the last wheelentry created is the middle one showing the current selection (putting it at the top of the draw order)
for ( local i=0; i<remaining; i++ )
wheel_entries.insert( num_arts/2, WheelEntry() );

local conveyor = Conveyor();
conveyor.set_slots( wheel_entries );
conveyor.transition_ms = 50;
try { conveyor.transition_ms = my_config["transition_ms"].tointeger(); } catch ( e ) { }
}



Thank you for that - I actually came across this and got so hair brained trying to reduce the size of the wheel that I stopped (for the time being)

I notice the number of wheels is 8 but there are 12 entries of what look like size measurements in wheel_x, wheel_y, etc.:

flx*0.78, flx*0.78, flx*0.78, flx*0.78, flx*0.78, flx*0.78, flx*0.76, flx*0.78, flx*0.78, flx*0.78, flx*0.78, flx*0.78,

Why are there 12 entries for only 8 wheels?

[progets]

Why are there 12 entries for only 8 wheels?

Just to provide flexibility. By having 12 entries you can adjust for up to 12 wheels simply by changing "local num_arts = 8;". This can also be handy if you wanted to switch it to a vertical layout.

[asahendrix]

Why are there 12 entries for only 8 wheels?

Just to provide flexibility. By having 12 entries you can adjust for up to 12 wheels simply by changing "local num_arts = 8;". This can also be handy if you wanted to switch it to a vertical layout.

Ah that makes sense. I think I’m about ready to go off on my own.

Any chance you might could tell me what x, y, w, a, h, and r each do? I’d be forever grateful and it would save me a lot of trial and error and I can’t find a lot of resources that speak specifically to vertical wheels. I’m sure they’re size adjustments, but there are a few inconsistencies that make it confusing to decode.

[progets]

Any chance you might could tell me what x, y, w, a, h, and r each do? I’d be forever grateful and it would save me a lot of trial and error and I can’t find a lot of resources that speak specifically to vertical wheels. I’m sure they’re size adjustments, but there are a few inconsistencies that make it confusing to decode.

I think...
x = x-axis (horizontal screen position)
y = y-axis (vertical screen position)
w = width (of wheel/image/text)
a = alpha (the amount of tinting)
h = height (of wheel/image/text)
r = rotation (clock position)

P.S. These same things apply to any wheel (or other type of image). Here's the same setup but using the curved wheel you don't want just to show how the settings change.

Code: [Select]

//default wheel

{
fe.load_module( "conveyor" );
local wheel_x = [ flx*0.80, flx*0.795, flx*0.756, flx*0.725, flx*0.70, flx*0.68, flx*0.64, flx*0.68, flx*0.70, flx*0.725, flx*0.756, flx*0.76, ];
local wheel_y = [ -fly*0.22, -fly*0.105, fly*0.0, fly*0.105, fly*0.215, fly*0.325, fly*0.436, fly*0.61, fly*0.72 fly*0.83, fly*0.935, fly*0.99, ];
local wheel_w = [ flw*0.18, flw*0.18, flw*0.18, flw*0.18, flw*0.18, flw*0.18, flw*0.24, flw*0.18, flw*0.18, flw*0.18, flw*0.18, flw*0.18, ];
local wheel_a = [  80,  80,  80,  80,  80,  80, 255,  80,  80,  80,  80,  80, ];
local wheel_h = [  flh*0.11,  flh*0.11,  flh*0.11,  flh*0.11,  flh*0.11,  flh*0.11, flh*0.17,  flh*0.11,  flh*0.11,  flh*0.11,  flh*0.11,  flh*0.11, ];
local wheel_r = [  30,  25,  20,  15,  10,   5,   0, -10, -15, -20, -25, -30, ];
local num_arts = 8;

class WheelEntry extends ConveyorSlot
{
constructor()
{
base.constructor( ::fe.add_artwork( "wheel" ) );
}

function on_progress( progress, var )
{
local p = progress / 0.1;
local slot = p.tointeger();
p -= slot;

slot++;

if ( slot < 0 ) slot=0;
if ( slot >=10 ) slot=10;

m_obj.x = wheel_x[slot] + p * ( wheel_x[slot+1] - wheel_x[slot] );
m_obj.y = wheel_y[slot] + p * ( wheel_y[slot+1] - wheel_y[slot] );
m_obj.width = wheel_w[slot] + p * ( wheel_w[slot+1] - wheel_w[slot] );
m_obj.height = wheel_h[slot] + p * ( wheel_h[slot+1] - wheel_h[slot] );
m_obj.rotation = wheel_r[slot] + p * ( wheel_r[slot+1] - wheel_r[slot] );
m_obj.alpha = wheel_a[slot] + p * ( wheel_a[slot+1] - wheel_a[slot] );
}
};

local wheel_entries = [];
for ( local i=0; i<num_arts/2; i++ )
wheel_entries.push( WheelEntry() );

local remaining = num_arts - wheel_entries.len();

//we do it this way so that the last wheelentry created is the middle one showing the current selection (putting it at the top of the draw order)
for ( local i=0; i<remaining; i++ )
wheel_entries.insert( num_arts/2, WheelEntry() );

local conveyor = Conveyor();
conveyor.set_slots( wheel_entries );
conveyor.transition_ms = 50;
try { conveyor.transition_ms = my_config["transition_ms"].tointeger(); } catch ( e ) { }
}



[progets]

You should also checkout this thread http://forum.attractmode.org/index.php?topic=1945.msg13386#msg13386. This module will allow you to understand and configure your wheel how ever you want in a layout. It will teach you a lot and make thing easy.

[asahendrix]

Thank you so much for this! Helps me a TON!