加工時に垂直ベジェを描画する方法は？

Question

私は次ベジェ形状があります。形状は以下のコードによって達成された

を：今

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); 
} 

しかし、結果は下半分のみをレンダリング、不完全が判明しますか？あなたはおそらく意味

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

：

Answer 1

問題がupperYとlowerYでは、同じ値を持つ

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; 
    } 
} 

あなたはリットルを保持することができます左に、右にrを、上にtを、下にbをドラッグして値を調整します。デモ怒鳴るを実行し、T/Bキーのいずれかを使用して、その他の上に片側をドラッグすると、あなたの問題を再現します：

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; 
 
    } 
 
}

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

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. 
} 

これで完了です。 4行のコードを使用するソリューション。あなたはあなたのそのコードを書き換える必要があり、適切な処理規則に従うためにので少しはより少しはsetupとdrawを、使用して）=あなたの変数は賢明な場所に住んで