如何制作一个始终面对同一点的三角形?

Mustafa Cig Gokpinar

图片

在我一直从事的p5 /处理项目中,我需要创建一条在中间具有三角形的线,该三角形始终面向该线的连接点之一。创建一个静止不动的对象非常容易,但是我的端点会四处移动并旋转。当线移动到此“ |”时,我需要找到一种方法来旋转小三角形 由此 ” - -”。我当前的代码是这样的:

      let middleX = (fromX + toX)/2;
      let middleY = (fromY + toY)/2;
      triangle(middleX,middleY+5,middleX+5,middleY,middleX,middleY-5);
      line(fromX , fromY, toX, toY);

如您所料,这不适用于旋转。我需要帮助 :)。感谢您的关注。

乔治·普罗芬扎

您可以:

  1. 用于atan2()计算两点之间的旋转,
  2. 用于push()隔离坐标空间(在不影响草图其余部分(例如直线)的情况下局部旋转
  3. 只需调用rotate():它以弧度表示一个角度,这就是atan2()返回值

这是一个基于您的片段的示例:

let fromX = 200;
let fromY = 200;
let toX = 300;
let toY = 100;
let triangleSize = 5;

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  
  // test: change to position
  toX = mouseX;
  toY = mouseY;
  
  let middleX = (fromX + toX) / 2;
  let middleY = (fromY + toY) / 2;
  // calculate the angle between from -> to points
  let angle = atan2(toY - fromY, toX - fromX);
  // isolate coordinate system (indenting is purely visual, not required)
  push();
    // move to central position
    translate(middleX, middleY);
    // rotate from translated position
    rotate(angle);
    // render triangle
    triangle(0, triangleSize, triangleSize, 0, 0, -triangleSize);
  pop();
  
  line(fromX, fromY, toX, toY);
  
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js"></script>

请注意,转换顺序(平移,旋转,缩放)很重要。(例如,如果旋转,则平移三角形将降落在其他位置)

另外,默认情况下,您将三角形绘制为指向右边,该三角形与0弧度旋转很好地对齐。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何制作一个三角形的星星并计算星星的数量?

如何从同构三角形集中仅返回一个三角形?

如何用中心坐标和一个点的坐标创建一个三角形?

检查一组点是否描述了一个三角形

如何围绕JavaFX中的一个点旋转三角形并获取点的值?

是否可以仅使用CSS制作一个圆角三角形?

如何制作一个内部有空格的等腰三角形

如何确定一个点是否在2D三角形中?

尝试通过对所有三个点应用相同的变换来制作一个可以旋转和移动的三角形

因此,我有一个三角形,其点(100,90),距离(11)和线的角度(45º)是否可以找到线的另一点?如何?

如何创建一个numpy数组来描述三角形的顶点?

如何仅使用 css 创建一个三角形的 div?

如何在底部创建一个全角三角形?

如何画一个三角形?

如何用PIL画一个三角形?

如何获得一个虚构的三角形内的mouselistener通知点击?

了解类:通过扩展3个点组成一个三角形?

Android:使用xml定义(可绘制)制作一个三角形的按钮

我想制作一个带有三角形图标的按钮

我必须制作一个程序,要求用户输入三角形的高度

将一个三角形转换为另一个三角形

Open GL DrawArrays仅绘制一个三角形/直线/点(OpenTK / C#)

如何在javascript中使用for循环制作一个三角形,使其输出与参数内容匹配

如何制作一个与其他元素具有相同阴影的弯曲三角形?

给定(象限i)中的三个(x,y)点,它们组成一个直角三角形,求出三角形的排列

如何添加一个垂直于一侧背景图像的三角形边框?

两个三角形组成一个矩形

C#在另一个等边三角形的边上绘制等边三角形

在视图之间实现一个三角形(如Instagram登录屏幕上的三角形)