Pie Chart Animation

Help and Feedback Scripting Support
#1
  1. What do you want to achieve?
    Synchronization between weighted luck function and tween animation
  2. What is the issue?
    The script, built upon the model below, creates a pie chart, with 75 percent green and 25 percent red. The pie chart spins a random amount of degrees ((90-360)*5), while a tiny arrow at the top of the pie chart allows for visual representation for a luck based spin. Additionally, there is a function that acts a weighted luck system, and works to calculate the result either being green or red.
    The spin and function are not synchronous, meaning that the chart can land on "red, while the function could showcase “green.”

I’ve failed the figure out what math is needed in order to form an equation capable of handling an increase in amounts of slices in the pie chart, as well as any variance in the percentages, those being plans for future implementations. Is there a system or method which can achieve this synchronization that I am unaware of? Open to any ideas.

The unmodified version of what was built upon
How would I make a pie chart? - #5 by OtadTOAD?

Snippet of the rotation

	local rotationTween = TweenService:Create(pieChartFrame, TweenInfo.new(5, Enum.EasingStyle.Quint, Enum.EasingDirection.Out), {Rotation = pieChartFrame.Rotation+math.random(90,360)*5})
2 Likes
#2

Instead of calculating angle from parts CFrame, just add a variable for the angle, tween it randomly in whataver interval you want, connect it to the part so that its synced with the angle change (:getPropertyChangedSignla()) and once tween is done, check the value of the angle if its between the required interval or not
No need for complex math solutions to waste time on if its just a one time thing or so, math is needed for optimization, like if your calculating every frame

3 Likes
#3

I’m guessing you have a list of each pie slice in order, with their respective angles. Something like:

slices = {
  {color = 'Red', angle = 90},
  {color = 'Green', angle = 270}
}

Let’s say you pick random angle 120. You’d want to loop over each slice, and check if the random angle is between the slice’s “start” and “end” angles. The start angle of a slice is the sum of all the previous slices’ angles (so the Red slice starts at 0°, and the Green slice starts at 90°). The end angle of a slice is its start angle, + the angle of the whole slice (so the Red slice ends at 90°, and the Green slice ends at 360°). 120 is not between 0 and 90, so we’re not on the Red slice. 120 is between 90 and 360, so we’re on the Green slice.

On a sidenote, you don’t need to wait for the tween to be over before you can tell what the result is gonna be.

function getResult(randomValue, slices)
  local totalAngle = 0
  randomValue = randomValue % 360 --keeps it between 0 and 360
  for _, s in pairs(slices) do
    if randomValue > totalAngle and randomValue <= totalAngle + s.angle then
      return s
    end
  end
  warn("If the math is correct, this warn should never show up! We should have returned by now. As a failsafe, let's select the last slice so the code doesn't explode.")
  return slices[#slices]
end

local slices = {
  {color = 'Red', angle = 90},
  {color = 'Green', angle = 270}
}
local randomValue = pieChartFrame.Rotation+math.random(90,360)*5
local rotationTween = TweenService:Create(pieChartFrame, TweenInfo.new(5, Enum.EasingStyle.Quint, Enum.EasingDirection.Out), {Rotation = randomValue})

print("The rotation isn't even over yet, but I already know the winning slice is...")
print(getResult(randomValue, slices))
1 Like