雑記

06-02 マウス操作

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

練習問題6-2-3

例題6-2-2 を改造し、ドラッグした位置に加えて、左右対称の位置 にも同じ円を描きなさい。

function setup() {
  createCanvas(400, 400);
  colorMode(RGB);
  background(234, 244, 255);
}

function draw() {
  // 何も描かない
}

function mouseDragged() {
  colorMode(HSB);
  let a = frameCount % 360;
  fill(a, 50, 90);
  noStroke();

  circle(mouseX, mouseY, 10);
  circle(width-mouseX, mouseY, 10)
}
ヒントを見てから作ってしまったので、すぐに理解はできたのですが、あまり考えてなかったのもあって、一度Yも反転させてしまってバグりましたが、凡ミスを除けば簡単でした。

練習問題6-2-4

05-02 の drawStar を使い、クリックした位置に星 を描くプログラムを作りなさい。
星は mousePressed 関数の中で描きます。mousePressed は、マウスボタンが 押された瞬間 に1回だけ呼ばれる特別な関数です。

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

function mousePressed() {
  noStroke();
  drawStar()
  
}
function drawStar() {
  fill(255, 230, 160);
  ellipse(mouseX, mouseY, 36, 10);
  ellipse(mouseX, mouseY, 10, 36);
}
関数のおさらいにもなってよかったです

練習問題6-2-5

練習問題6-2-4 を改造し、左クリック で星を描き、右クリック で次に描く星の 色相をずらせる ようにしなさい。

let canvas;
let starHue = 40;

function setup() {
  canvas = createCanvas(400, 400);
  colorMode(RGB);
  background(18, 24, 60);
  canvas.elt.addEventListener("contextmenu", function (e) { e.preventDefault(); });
}

function draw() {
}

function mousePressed() {
  if(mouseButton==LEFT){
    drawStar(mouseX, mouseY, 36, 10, starHue)
  }else{
    starHue = (starHue+60)%360
  }
}

function drawStar(x, y, w, h, a) {
  noStroke();
  colorMode(HSB);
  fill(a, 50, 90);
  ellipse(x, y, w, h);
  ellipse(x, y, h, w);
}
スペルミスによって全然動かなくて困りました。
それ以外はもともといろいろできていたので、難しいとは感じませんでした。

コメントする