java - 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();
}
解决方案
像这样的矩阵运算rotate
不会转换形状中的单个顶点。当前矩阵在绘制时应用于整个形状(at endShape
)。您必须计算所有顶点坐标:
创建一个ArrayList
of 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();
}
推荐阅读
- blazor - 在服务器端 Blazor 中,如何取消页面或组件长时间运行的后台任务?
- javascript - React.js 显示列表的详细信息
- javascript - Google Maps wont work under Mobile Mode of Google Chrome
- laravel - 当我尝试将 Bootstrap 和 Fontawesome 包含到 Laravel 项目中时出错
- html - 如何在整个部分制作 youtube 视频背景封面
- sql - 编写 Rails 迁移以将布尔值折叠成枚举
- javascript - 从本地 .js 读取本地 .json 而无需 repos
- php - Laravel 中的路由不起作用(显示空白页)
- c++ - Unicode 字符正在打印,但不如预期
- laravel - 错误:创建表单操作字段的未定义路由 - laravel 5.8