Visualisation: DragonRuby built-in spline function

main.rb

$gtk.reset

SPLINE = [
  [0.0, 0.99, 0.99, 1.0]
]

def tick args

  # duration of movement
  args.state.duration = 4.seconds


  args.state.spline_x ||= SPLINE

  # for visualizing the y axis
  args.state.spline_y ||= [
    [0.0, 0.33, 0.66, 1.0]
  ]

  # calc splines
  args.state.simulation_tick = args.state.tick_count % args.state.duration
  progress_x = 0.ease_spline_extended args.state.simulation_tick, args.state.duration, args.state.spline_x
  progress_y = 0.ease_spline_extended args.state.simulation_tick, args.state.duration, args.state.spline_y

  # render

  args.outputs.background_color = [0xCC] * 3
  args.outputs.sprites << [
    { # square background
      x: 340, y: 60, w: 600, h: 600, r: 255, g: 255, b: 255,
    },
    { # green puck
      x: x = (340 + 600 * progress_x),
      y: 60 +  600 * progress_y,
      w: 10, h: 10,
      anchor_x: 0.5, anchor_y: 0.5,
      r: 0, g: 255, b: 0
    },
    { # black object controlled by spline
      x: x, y: 360, w: 20, h: 20,
      anchor_x: 0.5, anchor_y: 0.5,
      r:0, g: 0, b: 0
    },
    { # starting bezier handle (red square)
      x: x2 = (340 + 600 * args.state.spline_x[0][1]),
      y: y2 = (60 + 600 * args.state.spline_y[0][1]),
      w: 10, h: 10,
      anchor_x: 0.5, anchor_y: 0.5,
      r: 255, g: 0, b: 0
    },    
    { # ending bezier handle (red square)
      x: x3 = (340 + 600 * args.state.spline_x[0][2]),
      y: y3 = (60 + 600 * args.state.spline_y[0][2]),
      w: 10, h: 10,
      anchor_x: 0.5, anchor_y: 0.5,
      r: 255, g: 0, b: 0
    },
    { # start of curve (blue square)
      x: x4 = (340 + 600 * args.state.spline_x[0][3]),
      y: y4 = (60 + 600 * args.state.spline_y[0][3]),
      w: 10, h: 10,
      anchor_x: 0.5, anchor_y: 0.5,
      r: 0, g: 0, b: 255
    },
    { # end of curve (blue square)
      x: x1 = (340 + 600 * args.state.spline_x[0][0]),
      y: y1 = (60 + 600 * args.state.spline_y[0][0]),
      w: 10, h: 10,
      anchor_x: 0.5, anchor_y: 0.5,
      r: 0, g: 0, b: 255
    },
  ]
  args.outputs.lines << [
    # lines for handles
    { x: x1, y: y1, x2: x2, y2: y2, r: 255, a: 55,},
    { x: x3, y: y3, x2: x4, y2: y4, r: 255, a: 55 }, 
    # black line indicating x progress
    { x: x,  y: 60, x2: x,  y2: 660}
  ]
  args.outputs.labels << [
    10, 710,
    "perc: #{"%.2f" % (args.state.simulation_tick / args.state.duration)} t: #{args.state.simulation_tick}"
  ]

  # draw the curve (grey dots)
  args.outputs.sprites << args.state.duration.times.map.with_index do |i| 
    {
      x: 340 + 600 * (0.ease_spline_extended i, args.state.duration, args.state.spline_x),
      y: 60  + 600 * (0.ease_spline_extended i, args.state.duration, args.state.spline_y),
      w: 2, h: 2,
      anchor_x: 0.5, anchor_y: 0.5,
      r: 200, g: 200, b: 200
    }
  end
end