Wie zeichne vertikale Bezier in der Verarbeitung?

Question

Ich habe folgende Bezier Form:

Die Form durch den folgenden Code erreicht wurde:

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

Nun, ich möchte eine vertikale Version davon machen. Ich schrieb den folgenden Code:

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

Allerdings stellt sich das Ergebnis aus nicht vollständig, nur die untere Hälfte Rendering:

Was aus dem Code fehlt?

Answer 1

Das Problem ist upperY und lowerY den gleichen Wert:

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

Sie wahrscheinlich gemeint:

int upperY = height/6; 

Hier ist, was ich meine:

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

Sie l halten können links, r für rechts, t für oben, b für unten und ziehen, um die Werte anzupassen.

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

nicht:: die Demo unten laufen und entweder t/b-Tasten und einer Seite auf dem anderen ziehen wird Ihr Problem reproduzieren nur drehen Sie Ihren koordiniere den Raum um die Mitte des Bildschirms herum mit einem Viertelkreis und zeichne dann genau dasselbe, so dass es vertikal aussieht.

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

Und du bist fertig. Eine Lösung, die vier Codezeilen verwendet. Obwohl es ein wenig mehr, weil damit Sie die richtige Verarbeitung Konventionen folgen müssen, dass Code von Ihnen ein wenig umschreiben setup und draw, zu bedienen und haben Ihre Variablen in einem vernünftigen Ort leben =)