Skip to main content

🎨 線條與迴圈

使用四個迴圈分別畫出四個區塊的橫線與直線

最終結果

mdImg

圖表座標

mdImg

定義畫布

  • 使用變數宣告方式,分別宣告 width(寬度),height(高度)
  • 將寬度設定為 400
  • 將高度設定為 400
function setup() {
let width = 400; //定義寬度
let height = 400; //定義高度
createCanvas(width, height); //將變數帶入設定中
console.log("寬: " + width + " , 高: " + height); //在console上面印出目前寬高
}

line()使用方式

 line(x1, y1, x2, y2);
  • (x1,y1) (x2, y2) 各別代表一個點的座標
  • 兩個點相連之後,會成為一條線

搭配 for 使用

1. 左上角(直線)

  • 需要從下到上,由左而右畫出直線
  • 因此第一個點會從( 1 X 10 ,400/2) -> (10,200) 畫到 (1 X 10,0) -> (10,0)
  • for 迴圈條件 -> 小於 20 的原因是因為,我們每次都將 i X 10,整張畫布的寬是 400 切成一半為 200
for (let i = 1; i <= 20; i++) {
fill(250);
line(i * 10, height / 2, i * 10, 0);
}

2. 右上角(橫線)

  • 需要從上到下,由左而右畫出直線
  • 因此第一個點會從( 400/2, 1 X 10) -> (200,10) 畫到 ( 400,1 X 10) -> (400,10)
  • for 迴圈條件 -> 小於 20 的原因是因為,我們每次都將 i X 10,整張畫布的高是 400 切成一半為 200
for (let i = 1; i <= 20; i++) {
fill(250);
line(width / 2, i * 10, width, i * 10);
}

3. 左下角(橫線)

  • 需要從下到上,由左而右畫出直線
  • 因此第一個點會從( 0,400 - (1 X 10)) -> (0,390) 畫到 ( 400/2,400 - (1 X 10)) -> (200,390)
  • 用高度減掉 i X 10 的原因是因為,我們要從邊界往上畫,因此需要從最大邊界每次往上減掉 10
for (let i = 1; i <= 20; i++) {
fill(250);
line(0, height - i * 10, width / 2, height - i * 10);
}

4. 右下角(直線)

  • 需要從下到上,由右而左畫出直線
  • 因此第一個點會從( 400 - (1 X 10),0 ) -> (390,0) 畫到 ( 400 - (1 X 10),400/2 ) -> (390,200)
  • 用寬度減掉 i X 10 的原因是因為,我們要從邊界往左畫,因此需要從最大邊界每次往上減掉 10
for (let i = 1; i <= 20; i++) {
fill(250);
line(width - i * 10, height, width - i * 10, height / 2);
}