p5.js 和 matter.js 命运之轮检测哪个元素在顶部
p5.js and matter.js wheel of fortune detect which element is at the top
你好,我正在做一个幸运之轮。我有动画工作,但试图弄清楚如何检测每个椭圆的位置,以便我可以检测它何时处于 90 度并且指针指向它。我用来构建轮子的数据是一系列十六进制颜色。这是 codpen
这里是造轮子的函数
function prizes(revolve,xPosition,yPosition,data,radius,size){
var j = 0;
// translate(x,y);
push()
rotate(revolve)
for(i = 0 ; i < TWO_PI ; i+=TWO_PI/data.length)
{
let x = radius * cos(i);
let y = radius * sin(i);
fill(data[j])
textSize(32);
ellipse(x,y,size)
j++;
}
pop()
}
提前致谢
问题是您依赖 revolve
参数来设置旋转,这反过来会修改省略号的位置。这使得在旋转后更难找出椭圆的实际位置。
您可以通过取消旋转点并检查它来弄清楚,但恕我直言,这听起来很复杂。相反,如果我是你,我会停止使用 revolve
函数来旋转整个 canvas,而是用它来计算每个椭圆的位置。
一旦你知道了每个椭圆的实际位置,你就可以找出哪个在顶部。或者您可以使用 dist()
函数来找出哪个最接近指针。
你好,我正在做一个幸运之轮。我有动画工作,但试图弄清楚如何检测每个椭圆的位置,以便我可以检测它何时处于 90 度并且指针指向它。我用来构建轮子的数据是一系列十六进制颜色。这是 codpen
这里是造轮子的函数
function prizes(revolve,xPosition,yPosition,data,radius,size){
var j = 0;
// translate(x,y);
push()
rotate(revolve)
for(i = 0 ; i < TWO_PI ; i+=TWO_PI/data.length)
{
let x = radius * cos(i);
let y = radius * sin(i);
fill(data[j])
textSize(32);
ellipse(x,y,size)
j++;
}
pop()
}
提前致谢
问题是您依赖 revolve
参数来设置旋转,这反过来会修改省略号的位置。这使得在旋转后更难找出椭圆的实际位置。
您可以通过取消旋转点并检查它来弄清楚,但恕我直言,这听起来很复杂。相反,如果我是你,我会停止使用 revolve
函数来旋转整个 canvas,而是用它来计算每个椭圆的位置。
一旦你知道了每个椭圆的实际位置,你就可以找出哪个在顶部。或者您可以使用 dist()
函数来找出哪个最接近指针。