Author Topic: Wheel Art in Vertical List  (Read 3566 times)

asahendrix

  • Full Member
  • ***
  • Posts: 76
    • View Profile
Wheel Art in Vertical List
« on: June 22, 2019, 11:27:30 PM »
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

  • Full Member
  • ***
  • Posts: 76
    • View Profile
Re: Wheel Art in Vertical List
« Reply #1 on: June 24, 2019, 06:45:15 PM »
By the way, this is the wheel from the OlRoom theme.

progets

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 1271
    • View Profile
Re: Wheel Art in Vertical List
« Reply #2 on: June 25, 2019, 10:58:52 AM »
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

  • Full Member
  • ***
  • Posts: 76
    • View Profile
Re: Wheel Art in Vertical List
« Reply #3 on: June 26, 2019, 03:24:39 PM »
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

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 1271
    • View Profile
Re: Wheel Art in Vertical List
« Reply #4 on: June 26, 2019, 08:21:13 PM »
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

  • Full Member
  • ***
  • Posts: 76
    • View Profile
Re: Wheel Art in Vertical List
« Reply #5 on: June 26, 2019, 09:26:56 PM »
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

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 1271
    • View Profile
Re: Wheel Art in Vertical List
« Reply #6 on: June 26, 2019, 09:55:39 PM »
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 ) { }
}

« Last Edit: June 26, 2019, 10:27:59 PM by progets »

progets

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 1271
    • View Profile
Re: Wheel Art in Vertical List
« Reply #7 on: June 26, 2019, 10:04:20 PM »
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

  • Full Member
  • ***
  • Posts: 76
    • View Profile
Re: Wheel Art in Vertical List
« Reply #8 on: June 28, 2019, 10:46:05 AM »
Thank you so much for this! Helps me a TON!