Question

我有以下bezier形状：

形状是通过以下代码实现的：

int width = 800; int height = 800;
int centerX = width/2; int centerY = height/2;
int lefterX = width/6; int upperY = height*5/6;
int righterX = width*5/6; int lowerY = height*5/6;

for (int y = 0; y <= height; y += 9) {
  bezier(lefterX, centerY, 
    centerX, y, 
    centerX, y, 
    righterX, centerY);
}

现在，我想制作一个垂直版本。我写了以下代码：

for (int x = 0; x <= width; x += 9) {
  bezier(centerX, upperY, 
    x, centerY, 
    x, centerY, 
    centerX, lowerY);
}

然而，结果结果不完整，只呈现下半部分：

代码中缺少什么？

Answer 1

问题是upperY，lowerY具有相同的值：

int upperY = height*5/6;
int lowerY = height*5/6;

你可能意味着：

int upperY = height/6;

这就是我的意思：

int centerX,centerY;
int lefterX,righterX;
int upperY,lowerY;

void setup(){
  size(800,600);
  noFill();
  centerX = width/2; 
  centerY = height/2;

  lefterX = width/6;
  righterX = width*5/6; 
  upperY = height/6;//height*5/6;
  lowerY = height*5/6;
}

void draw(){
  background(255);

  for (int y = 0; y <= height; y += 9) {
    bezier(lefterX, centerY, 
      centerX, y, 
      centerX, y, 
      righterX, centerY);
  }

  for (int x = lefterX; x <= righterX; x += 9) {
    bezier(centerX, upperY, 
      x, centerY, 
      x, centerY, 
      centerX, lowerY);
  }

}
void mouseDragged(){
  ellipse(mouseX,mouseY,10,10);
  if(keyPressed){
    if(key == 'l') lefterX = mouseX;
    if(key == 'r') righterX = mouseX;
    if(key == 't') upperY = mouseY;
    if(key == 'b') lowerY = mouseY;
  } 
}

您可以将l保留为左，r保持为右，t保持为top，b保持为bottom，并拖动以调整值。运行演示波纹管并使用t / b键并将一侧拖到另一侧将重现您的问题：

＆＃13;

var centerX,centerY;
var lefterX,righterX;
var upperY,lowerY;

function setup(){
  createCanvas(800,600);
  noFill();
  centerX = width/2; 
  centerY = height/2;
  
  lefterX = width/6;
  righterX = width*5/6; 
  upperY = height/6;//height*5/6;
  lowerY = height*5/6;
}

function draw(){
  background(255);

  for (var y = 0; y <= height; y += 9) {
    bezier(lefterX, centerY, 
      centerX, y, 
      centerX, y, 
      righterX, centerY);
  }
  
  for (var x = lefterX; x <= righterX; x += 9) {
    bezier(centerX, upperY, 
      x, centerY, 
      x, centerY, 
      centerX, lowerY);
  }
  
}
function mouseDragged(){
  if(keyIsPressed) {
    if(key == 'l' || key == 'L') lefterX = mouseX;
    if(key == 'r' || key == 'R') righterX = mouseX;
    if(key == 't' || key == 'T') upperY = mouseY;
    if(key == 'b' || key == 'B') lowerY = mouseY;
  }
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.0/p5.min.js"></script>

＆＃13;

Answer 2

不要：只需将屏幕中心周围的坐标空间旋转四分之一圆，然后绘制完全相同的内容，使其看起来垂直。

int right, top;

// remember to use setup()
void setup() {
  size(800,800);
  noLoop();
  noFill();
  right = width/2;
  top = height/3;
}

void drawYourStuff() {
  for (int y = -top; y <= top; y += 10) {
    // the center is (0,0), so we don't need
    // complicated center computations.
    bezier(-right,0, 0,y, 0,y, right,0);
  }
}

void draw() {
  // change the coordinate system so that
  // (0,0) is the center of the screen.
  translate(width/2,height/2);
  drawYourStuff();
  // rotate the entire coordinate system
  // by a quarter turn, scale it down, redraw:
  rotate(-PI/2);
  scale(0.5);
  drawYourStuff();
  // done.
}

你已经完成了。使用四行代码的解决方案。虽然更多一点，因为为了遵循正确的处理惯例，您需要使用setup和draw重写您的代码，并让您的变量生活在合理的地方=）

如何在处理中绘制垂直贝塞尔曲线？

2 个答案: