じょりじょり日記

JavaScript100サイトチャレンジを記録するブログです。

JavaScriptチャレンジ Processing vol7

明日から疑問に思った点などを放置せずに深掘りしていきます!
そろそろ他の領域にも踏み出したいところ。
1日1個必ず自分がわからない点が見つかるのは痛快ですね。がんばります、とてもがんばりますよー!!

f:id:zyoryzyory:20170907232233p:plain

//https://processing.org/examples/mousefunctions.html

float bx;
float by;
int boxSize = 75;
boolean overBox = false;
boolean locked = false;
float xOffset = 0.0; 
float yOffset = 0.0; 

void setup() {
  size(640, 360);
  bx = width/2.0;
  by = height/2.0;
  rectMode(RADIUS);  
}

void draw() { 
  background(0);
  
  //mouseXとmouseYがBoxに乗っていた場合
  if (mouseX > bx-boxSize && mouseX < bx+boxSize && 
      mouseY > by-boxSize && mouseY < by+boxSize) {
    overBox = true;
    
    //mousePressedがfalseかつ!lockedでoutlineを白に
    if(!locked) {
      stroke(255); 
      fill(153);
    }
    //mousePressedかつlockedがtrueのときに
  } else {
    stroke(153);
    //elseが呼ばれる時はfill(255);が呼ばれているので、このfillに意味はなし。
    fill(153);
    overBox = false;
  }
  
  //width, heightの半分から四角形を描くよ、ModeはRADIUSで!
  rect(bx, by, boxSize, boxSize);
}

void mousePressed() {
  if(overBox) { 
    locked = true; 
    //fill(255);でもよい
    fill(255, 255, 255);
  } else {
    locked = false;
  }
  //bx, byは現在のrectの描画位置
  
  //offsetとは… 位置を基準点からの距離で表した値のこと
  //ここではmouseXからbxの距離を求めている
  //rectModeをRADIUSにしているので四角形の中心がbx=0になる位置
  xOffset = mouseX-bx; 
  print(xOffset);
  yOffset = mouseY-by; 

}

void mouseDragged() {
  //mousePressedの状態の時のみこちらの計算をする
  //dragAndDropしてbxが適切に計算されるためにmouseXからオフセットを引いている
  if(locked) {
    bx = mouseX-xOffset; 
    by = mouseY-yOffset; 
  }
}

//l30の条件をboxOverの際に再び呼ぶためにリセット
void mouseReleased() {
  locked = false;
}