雑記

２０－０２　比例のグラフを描こう　

Posted on by ichigo-pink / 0件のコメント

学習日

１０月１４日 　/　２１日 　火曜日

名前

中村　結

✅練習問題２０－２－１

プログラムは二つの点を結ぶ方法で線を描いているし、延長するという命令はプログラムにはないので難しいと思います。

✅練習問題２０－２－２

二つの点を結ぶ以外の線の書き方をすればいいと思います。

✅練習問題２０－２－3

function setup() {
  createCanvas(400, 400);
  for (let x = 20; x <= 400; x+=20) {
    stroke(200);
    line(x,0,x,400);
    line(0,x,400,x)
  }
  stroke(0);
  line(200,0,200,400);
  line(0,200,400,200);
  line(0,300,400,100);
}

✅練習問題２０－２－５

グラフ内の座標を入れるとプログラム内の座標に変換されて線が引かれるようになっている。

✅練習問題２０－２－７

let scale = 20;
function toScreenX(x){ return width/2 + x*scale; }
function toScreenY(y){ return height/2 - y*scale; }

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

  for (let x = 20; x <= 400; x+=20) {
    stroke(200);
    line(x,0,x,400);
    line(0,x,400,x)
  }
  stroke(0);
  line(200,0,200,400);
  line(0,200,400,200);

  // 省略：格子線のソースコード

  stroke(0);
  for (let x = -10; x <= 10; x += 0.05){
    let y = 0.5 * x;
    point(toScreenX(x), toScreenY(y));
  }
}

✅練習問題２０－２－８

let scale = 20;
function toScreenX(x){ return width/2 + x*scale; }
function toScreenY(y){ return height/2 - y*scale; }

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

  for (let x = 20; x <= 400; x+=20) {
    stroke(200);
    line(x,0,x,400);
    line(0,x,400,x)
  }
  stroke(0);
  line(200,0,200,400);
  line(0,200,400,200);

  // 省略：格子線のソースコード

  stroke(0,225,0);
  for (let x = -10; x <= 10; x += 0.05 ){
    let y = 2 * x;
    point(toScreenX(x), toScreenY(y));
  }
  stroke(0,0,225);
  for (let x = -10; x <= 10; x += 0.05 ){
    let y = -1 * x;
    point(toScreenX(x), toScreenY(y));
  }
  stroke(225,0,0);
  for (let x = -10; x <= 10; x += 0.05 ){
    let y = 0.2 * x;
    point(toScreenX(x), toScreenY(y));
  }
}

✅練習問題２０－２－９

点がもっと多くなってさらに線みたいに点が打てると思います

let scale = 20;
function toScreenX(x){ return width/2 + x*scale; }
function toScreenY(y){ return height/2 - y*scale; }

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

  for (let x = 20; x <= 400; x+=20) {
    stroke(200);
    line(x,0,x,400);
    line(0,x,400,x)
  }
  stroke(0);
  line(200,0,200,400);
  line(0,200,400,200);

  // 省略：格子線のソースコード

  stroke(0);
  for (let x = -10; x <= 10; x += 0.01){
    let y = 0.5 * x;
    point(toScreenX(x), toScreenY(y));
  }
}

コメントする