20-01 グラフ描画の準備

練習問題20-1-1

今まで習った図形描画や繰り返しの機能のおさらいを兼ねて、下記の条件の方眼紙を描いてみよう。

  • キャンバスサイズは400×400px
  • 背景色は白(255)
  • for文を使い、10pxごとに灰色(200)の格子線を描画する
  • x=0, y=0の軸線は黒(0)で強調する
function setup() {
  createCanvas(400, 400);
  background(255);
  graphpaper()
}

function graphpaper(){
  stroke(200)
  for(let x = 0; x < width; x+=10){
    line(x, 0, x, height)
  }
  for(let y = 0; y < height; y+=10){
    line(0, y, width, y) 
  }
  //座標軸描画
  stroke(0)
  line(width/2, 0, width/2, height)
  line(0, height/2, width, height/2)
  
}
やり方を忘れていたので、一度下のようなやばいやつを作ってしまいましたが、思い出せば一瞬でした。

練習問題20-1-2

先程の練習問題は10px毎の罫線で、少し細かすぎました。キャンバスサイズは変えずに、学校の授業で扱うのに適したサイズに作り直しましょう。

function setup() {
  createCanvas(400, 400);
  background(255);
  graphpaper()
}

function graphpaper(){
  stroke(200)
  for(let x = 0; x < width; x+=20){
    line(x, 0, x, height)
  }
  for(let y = 0; y < height; y+=20){
    line(0, y, width, y) 
  }
  //座標軸描画
  stroke(0)
  line(width/2, 0, width/2, height)
  line(0, height/2, width, height/2)
}
もともと変更しやすい形で作っていたので、二か所変えるだけでできました。
課題の完成図の線を数えて、作ったので少しずるいかもしれませんが、明確に定義されていなかったので、仕方ないと思います。

練習問題20-1-4

出来上がった方眼紙に数値目盛りを追記したい。
軸に沿って数値目盛を描きたい場合、どのあたりが難しくなりそうか、箇条書きで書き出しなさい。

  • 数字の表示の仕方がわからない。「前に習ってたらすみません忘れてます。」
  • できるかは試していませんが、マイナスという数字を出した記憶があまりないので、難しそう
  • 座標軸の横というとてもややこしい位置に表示しなければいけない。

コメントする