如何在 canvas 上存储所有形状的坐标
How to store co-ordinates of all shapes on a canvas
我正在尝试创建一个草图,其中包含具有随机角度和笔划权重的随机放置的线条。这个想法是,在每一帧,线条都会根据预设规则稍微改变它们的倾斜度,而预设规则又取决于 strokeWeight 和其他参数。为此,我想我需要在设置时记录每条线的坐标,然后转换它们,然后再次记录它们。如果这是有道理的。
基本上问题归结为如何记录 canvas?
上所有线的坐标
这是我到目前为止所写的内容,但我如何存储形状坐标:
//Sets up the random lines on the canvas
//Sets up the authorities (line widths)
//Sets up the connections between lines
void setup() {
background(204);
size(800, 800);
for (int x=1;x <1000;x +=1){
fill(75, 70, 80);
//For the x y cords
float r = random(800);
float s = random(800);
//for the strokeWeight
float fat = random(5);
//for the stroke colour which varies with stroke weight
float col = random(350);
float red = random(350);
float g = random(350);
float b = random(350);
//for the initial tilt
float rot = random(360);
//stroke(242, 204, 47, 255);
strokeWeight(fat);
//stroke (red,green,blue,opacity)
stroke(fat*100, 180, 180);
//stroke(242, 204, 47, 255);
line(r,s,r+10,s+10);
rotate(radians(rot));
}
}
//This part is the diffusion animation
void draw() {
}
您可能想要创建一个 Line
class 来保存画线所需的信息。像这样:
class Line{
float x1, y1, x2, y2;
public Line(float x1, float y1, float x2, float y2){
this.x1 = x1;
this.y1 = y1
this.x2 = x2;
this.y2 = y2;
}
public void draw(){
line(x1, y1, x2, y2);
}
public boolean intersects(Line other){
//left as exercise for reader
}
}
然后就可以随机生成线条了:
ArrayList<Line> lines = new ArrayList<Line>();
void setup(){
for(int i = 0; i < 10; i++){
lines.add(new Line(random(width), random(height), random(width), random(height));
}
}
void draw(){
background(0);
for(Line line : lines){
line.draw();
}
}
这就是我在另一个问题中告诉您需要创建数据结构并存储线坐标时的意思。从这里你可以编写逻辑来移动你的线,或者检测交叉点等。
我正在尝试创建一个草图,其中包含具有随机角度和笔划权重的随机放置的线条。这个想法是,在每一帧,线条都会根据预设规则稍微改变它们的倾斜度,而预设规则又取决于 strokeWeight 和其他参数。为此,我想我需要在设置时记录每条线的坐标,然后转换它们,然后再次记录它们。如果这是有道理的。 基本上问题归结为如何记录 canvas?
上所有线的坐标这是我到目前为止所写的内容,但我如何存储形状坐标:
//Sets up the random lines on the canvas
//Sets up the authorities (line widths)
//Sets up the connections between lines
void setup() {
background(204);
size(800, 800);
for (int x=1;x <1000;x +=1){
fill(75, 70, 80);
//For the x y cords
float r = random(800);
float s = random(800);
//for the strokeWeight
float fat = random(5);
//for the stroke colour which varies with stroke weight
float col = random(350);
float red = random(350);
float g = random(350);
float b = random(350);
//for the initial tilt
float rot = random(360);
//stroke(242, 204, 47, 255);
strokeWeight(fat);
//stroke (red,green,blue,opacity)
stroke(fat*100, 180, 180);
//stroke(242, 204, 47, 255);
line(r,s,r+10,s+10);
rotate(radians(rot));
}
}
//This part is the diffusion animation
void draw() {
}
您可能想要创建一个 Line
class 来保存画线所需的信息。像这样:
class Line{
float x1, y1, x2, y2;
public Line(float x1, float y1, float x2, float y2){
this.x1 = x1;
this.y1 = y1
this.x2 = x2;
this.y2 = y2;
}
public void draw(){
line(x1, y1, x2, y2);
}
public boolean intersects(Line other){
//left as exercise for reader
}
}
然后就可以随机生成线条了:
ArrayList<Line> lines = new ArrayList<Line>();
void setup(){
for(int i = 0; i < 10; i++){
lines.add(new Line(random(width), random(height), random(width), random(height));
}
}
void draw(){
background(0);
for(Line line : lines){
line.draw();
}
}
这就是我在另一个问题中告诉您需要创建数据结构并存储线坐标时的意思。从这里你可以编写逻辑来移动你的线,或者检测交叉点等。