p5.js/p5.jsドリル/雑記

06-03 キーボード操作

Posted on by kotaron7 / 0件のコメント

みなさんこんにちはkotaron7です。

テストが終わりましたいろんな意味で！
化学がまるで理解できず、大問二つ分くらい何も解かずに提出したんですけど、逆にそれ以外の正答率が高くて学年順位高かったです。ﾄﾞｳｲｳｺﾄ？

平均点がそもそも50点行ってないので、先生の教え方に問題があると思うのですが、一概に先生のせいとは言えない事情があります。

①タブレット学習をスタンダードにしてしまった

→去年理科を教えていた先生が引退してしまい、その穴を埋めるために入ってきた先生であるため、タブレットの環境に慣れていない。
➡これにより課題をタブレット上に配信することが困難！！

②先生がおじいちゃん

→今40代の人が当時教えられていたくらいのおじいちゃんです。
おじいちゃんすぎて喋っていても聞き取りづらいです。これは仕方がないです。

③字が読めない

→言っていることがわからなくても、板書はわかるはずです。
このおじいちゃん先生は黒板を書く字はきれいなのです（長年の経験）が、タブレットに慣れていないので字が読めません。あと多分タブレット上の文字を消す方法を知りません。手が震えちゃってて字もプルプルです。

これらの理由により、メチャクチャ実験は楽しいのですが、授業がとことんわかりづらい！
テストの平均点が５０点を下回ってしまうのは先生のせいではなく、タブレットを使わないといけないという授業形態のせいです！！よ！！

それでは本編！

練習問題6-3-2

let x = 200;
let y = 200;
let speed = 3;

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

function draw() 
{
  background(234, 244, 255);
  if (keyIsDown(LEFT_ARROW)) x -= speed;
  if (keyIsDown(RIGHT_ARROW))x += speed;
  if (keyIsDown(UP_ARROW)) y -= speed;
  if (keyIsDown(DOWN_ARROW)) y += speed;
  if (keyIsDown(RIGHT_ARROW) && keyIsDown(UP_ARROW))
  {
    x = x + speed / sqrt(2) - speed;
    y = y - speed / sqrt(2) + speed;
  }
  if (keyIsDown(RIGHT_ARROW) && keyIsDown(DOWN_ARROW))
  {
    x = x + speed / sqrt(2) - speed;
    y = y + speed / sqrt(2) - speed;
  }
  if (keyIsDown(LEFT_ARROW) && keyIsDown(UP_ARROW))
  {
    x = x - speed / sqrt(2) + speed;
    y = y - speed / sqrt(2) + speed;
  }
  if (keyIsDown(LEFT_ARROW) && keyIsDown(DOWN_ARROW))
  {
    x = x - speed / sqrt(2) + speed;
    y = y + speed / sqrt(2) - speed;
  }
  fill(180, 220, 255);
  noStroke();
  circle(x, y, 40);
}

八方向で対応できるようにしました。どの方向に進んでも同じスピードです。

練習問題6-3-3

画面からはみ出ないようにしてみます

let x = 200;
let y = 200;
let speed = 5;


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

function draw() 
{
  background(234, 244, 255);
  if (x+15 < width && y+15 < height && x-15 > 0 && y-15 > 0)
  {
    if (keyIsDown(LEFT_ARROW)) x -= speed;
    if (keyIsDown(RIGHT_ARROW))x += speed;
    if (keyIsDown(UP_ARROW)) y -= speed;
    if (keyIsDown(DOWN_ARROW)) y += speed;
    if (keyIsDown(RIGHT_ARROW) && keyIsDown(UP_ARROW))
    {
      x = x + speed / sqrt(2) - speed;
      y = y - speed / sqrt(2) + speed;
    }
    if (keyIsDown(RIGHT_ARROW) && keyIsDown(DOWN_ARROW))
    {
      x = x + speed / sqrt(2) - speed;
      y = y + speed / sqrt(2) - speed;
    }
    if (keyIsDown(LEFT_ARROW) && keyIsDown(UP_ARROW))
    {
      x = x - speed / sqrt(2) + speed;
      y = y - speed / sqrt(2) + speed;
    }
    if (keyIsDown(LEFT_ARROW) && keyIsDown(DOWN_ARROW))
    {
      x = x - speed / sqrt(2) + speed;
      y = y + speed / sqrt(2) - speed;
    }
    if (x+15 >= width) x -= speed;
    if (x-15 <= 0) x += speed;
    if (y+15 >= height) y -= speed;
    if (y-15 <= 0) y += speed;
  }

  fill(180, 220, 255);
  noStroke();
  circle(x, y, 40);
}

一週間経って見返してみたら、普通に範囲指定してそれ超えてたら戻すだけで良さそうだった。
２つのキーを同時押しとか考える必要なかった、、。

練習問題6-3-5

enterキーが押されたら文字が大きくなるようにしよう

let size = 24;

function setup() 
{
  createCanvas(400, 400);
  textSize(size);
  textAlign(CENTER, CENTER);
  background(234, 244, 255);
}

function draw() {
}

function keyPressed() 
{
  if (key === ENTER)
  {
    size += 8;
  }
  else
  {
    textSize(size);
    fill(0, 0, 80);
    let x = random(0, width);
    let y = random(0, height);
    text(key, x, y);
  }
}

しました。

こんな感じです。

練習問題6-3-6

今度は大きさを確率で変えてみます。

let size = 24;
let ramdomSize = 1;
function setup() 
{
  createCanvas(400, 400);
  textSize(size);
  textAlign(CENTER, CENTER);
  background(234, 244, 255);
}

function draw() {
}

function keyPressed() 
{
  randomSize = random();
  if(randomSize <= 0.05)
  {
    size = 96;
  }
  else if (randomSize > 0.05 && randomSize <= 0.15)
  {
    size = 64;
  }
  else if (randomSize > 0.15 && randomSize <= 0.35)
  {
    size = 40;
  }
  else if (randomSize > 0.35 && randomSize <= 0.65)
  {
    size = 32;
  }
  else if (randomSize > 0.65)
  {
    size = 24;
  }
  textSize(size);
  fill(0, 0, 80);
  let x = random(0, width);
  let y = random(0, height);
  text(key, x, y);
}

確率で決まるようにしてみた。すごいなんかおしゃれな気分。

透明度も使って遠近感を演出してみました。ううん。ええかんじやね。

キーボード編でした！それではまた今度！

コメントする