如何在處理中繪製垂直貝塞爾曲線？

形狀是由下面的代碼實現：

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

然而，結果證明不完整，只渲染下半部：

什麼從代碼失蹤？

來源

2016-05-17 ric.row

避風港」 t稍後會用到Processing，但您的upperY和lowerY會初始化爲相同的值。我認爲upperY應該是身高/ 6。另外，考慮將您的值更改爲浮動。否則，你會做整數除法（我不認爲你想要）。即float lefterX = width/6f – Sprunth

哇，你是對的。謝謝 –

如果你正在繪製「同樣的東西」，只需旋轉座標系。 –

的問題是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頂部，b底部，拖動調整值。運行演示波紋管，並使用或者牛逼/ 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>

來源

2016-05-17 09:37:20

別：只需旋轉你的將屏幕中心四周的空間縮小四分之一圓，然後繪製完全相同的東西，所以看起來垂直。

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，一點點，讓你的變量生活在一個說理的地方=）

來源

2016-05-18 18:40:21

如何在處理中繪製垂直貝塞爾曲線？

回答

相關問題