首页 > 解决方案 > curveVertex()不在处理中绘制?

问题描述

我正在尝试创建一个脚本,该脚本通过围绕椭圆中心等距分布的“n”个顶点绘制曲线。

我不只是在中心椭圆周围画一个椭圆的原因是因为我最终想将微控制器连接到处理,从“n”个传感器获取的数据点将改变高度(“y”)每个顶点,围绕中心椭圆创建不断变化的不规则曲线,例如以下可能的曲线:

在此处输入图像描述

本质上,这应该是一个数据可视化工具,但在浏览示例和https://processing.org/reference/上的文档后,我无法弄清楚为什么它不起作用或如何实现这种效果。


这是我的代码:

color WHITE = color(255);
color BLACK = color(0);

void setup() {
    size(500, 500);
}

void draw() {
    background(WHITE);
    translate(width/2, height/2); // move origin to center of window

    // center ellipse
    noStroke();
    fill(color(255, 0, 0));
    ellipse(0, 0, 10, 10); // center point, red

    fill(BLACK);
    int n = 10;
    int y = 100;
    float angle = TWO_PI / n;
    beginShape();
    for (int i = 0; i < n; i++) {
        rotate(angle);
        curveVertex(0, y);
    }
    endShape();
}

标签: javaprocessing

解决方案


像这样的矩阵运算rotate不会转换形状中的单个顶点。当前矩阵在绘制时应用于整个形状(at endShape)。您必须计算所有顶点坐标:

创建一个ArrayListof PVector,用点填充它并在循环中绘制它:

color WHITE = color(255);
color BLACK = color(0);

ArrayList<PVector> points = new ArrayList<PVector>();

void setup() {
    size(500, 500);

    int n = 10;
    int radius = 100;
    for (int i = 0; i <= n; i++) {
        float angle = TWO_PI * (float)i/n;
        points.add(new PVector(cos(angle)*radius, sin(angle)*radius));
    }
}

void draw() {
    background(WHITE);
    translate(width/2, height/2);

    noFill();
    stroke(255, 0, 0);

    beginShape();
    PVector last = points.get(points.size()-1);
    curveVertex(last.x, last.y);
    for (int i = 0; i < points.size(); i++) {
        PVector p = points.get(i);
        curveVertex(p.x, p.y);
    }
    PVector first = points.get(0);
    curveVertex(first.x, first.y);
    endShape();
}

推荐阅读