1-06 いろいろな図形を描こう

例題1-6-1

+と÷のデザインを描く。

function setup() {
  createCanvas(400, 400);
  background(220);

  stroke(0, 0, 255);  // 輪郭の色
  fill(0, 0, 255);    // 塗りつぶす色

  rect(10, 50, 100, 20);  // +
  rect(50, 10, 20, 100);

  rect(150, 50, 100, 20);  // ÷
  circle(200, 20, 30);
  circle(200, 100, 30);
}

練習問題1-6-1a

各国の国旗をデザインしなさい。(日本)

function setup() {
  createCanvas(400, 400)
    background(220);
  stroke(0, 0, 0); // 輪郭の色
  fill(255, 0, 0);    // 塗りつぶす色
background(255,255, 255); 
  circle(200,200,200);
}

練習問題1-6-1b

各国の国旗をデザインしなさい。(スウェーデン王国)

function setup() {
  createCanvas(400, 400)
    background(220);
  stroke(0, 0, 0); // 輪郭の色
  fill(252,226,63);    // 塗りつぶす色
background(0,124,160); 
   rect(150, 0, 30, 500);
    rect(0, 125, 500, 30);  
}


練習問題1-6-1c

各国の国旗をデザインしなさい。(アイスランド)



練習問題1-6-1c

各国の国旗をデザインしなさい。(アイスランド)

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
stroke(0, 0, 0); // 輪郭の色
    noStroke(); // 枠線なし
  fill(255,255,255);    // 塗りつぶす色
background(0,124,160); 
   rect(0, 125, 500, 125);
   rect(125, 0, 125, 500);
   stroke(0, 0, 0); // 輪郭の色
   noStroke(); // 枠線なし
   fill(252,0,75);  
   rect(0, 150, 500, 60);
  rect(150, 0, 60, 500);
   stroke(0, 0, 0); // 輪郭の色
 
   }

練習問題1-6-1d

各国の国旗をデザインしなさい。(ジョージア)

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
stroke(0, 0, 0); // 輪郭の色
    noStroke(); // 枠線なし
  fill(255,255,255);    // 塗りつぶす色
background(0,124,160); 
   rect(50, 60, 45, 20);
   rect(60, 50, 20, 45);
  rect(285, 55, 45, 20);
   rect(295, 45, 20, 45);
   rect(50, 290, 45, 20);
   rect(60, 275, 20, 45);
  rect(285, 295, 45, 20);
   rect(295, 285, 20, 45);
   stroke(0, 0, 0); // 輪郭の色
   noStroke(); // 枠線なし
   fill(252,0,75);  
   rect(0, 150, 500, 100);
  rect(150, 0, 100, 500);
   stroke(0, 0, 0); // 輪郭の色

練習問題1-6-1e

各国の国旗をデザインしなさい。(ニジェール共和国)

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(255,255,255); 
  stroke(0, 0, 0); // 輪郭の色
  noStroke(); // 枠線なし
  fill(255,150,0);    // 塗りつぶす色
  circle(200,200,100);
  stroke(0, 0, 0); // 輪郭の色
  noStroke(); // 枠線なし
  fill(255,150,0);
  rect(0, 300, 700, 125);
 fill(0,250,100);
  rect(0, 0, 700, 125);
  stroke(0, 0, 0); // 輪郭の色
}

まとめ・感想

いろを変えるのはfillを複数用いてやると複数の図形の色を変えられることがわかりました。cicle破砕画の枠内で大きさを調節することがわかりました。

コメントする