PROCESSING入門

Processingの基礎を解説します。

カテゴリ: Processing

mousePressed

mouseに関する関数は
mousePressed()

mouseDragged()

mouseReleased()
の3つがあります。それぞれの名前が示す動作が行われた場合に呼び出されます。
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);
  
  if (mouseX > bx-boxSize && mouseX < bx+boxSize && 
      mouseY > by-boxSize && mouseY < by+boxSize) {
    overBox = true;
//mouseがBOXの範囲に入っているとoverBoxをtrueにする。
 
    if(!locked) { 
      stroke(255); 
      fill(153);
//mousePressされいない場合、線だけ白にする。
 
    } 
  } else {
    stroke(153);
    fill(153);
    overBox = false;
  }
//mouseがBOXの範囲に入っていない場合overBOXをtrueにする。 
  

  rect(bx, by, boxSize, boxSize);
}

void mousePressed() {
  if(overBox) { 
    locked = true; 
//もしmouseがBOXの範囲内ならば
 
    fill(255, 255, 255);
  } else {
    locked = false;
  }
 
  xOffset = mouseX-bx; 
  yOffset = mouseY-by; 
//mouseX,Yとbx,byの差を出す。 
}

void mouseDragged() {
  if(locked) {
//もしmouseがBOXの範囲内ならば
 
    bx = mouseX-xOffset; 
    by = mouseY-yOffset; 
//boxの位置をずらす。 
  }
}

void mouseReleased() {
  locked = false;
}

mouseXY


前回の記事
はmouseXだけの情報を使用しました。

mouseYも使用すると、2Dの表現をすることができます。
void setup() 
{
  size(640, 360); 
  noStroke();
  rectMode(CENTER);
}

void draw() 
{   
  background(51); 
  fill(255, 204);
  rect(mouseX, height/2, mouseY/2+10, mouseY/2+10);
//mouseXが横情報、mouseYが四角の大きさになります。
 
  fill(255, 204);
  int inverseX = width-mouseX; 
  int inverseY = height-mouseY;
//mouseX,Yの情報を反転させます。
 
  rect(inverseX, height/2, (inverseY/2)+10, (inverseY/2)+10);
}

mouseX

processing exampleのものです。

mouseXを巧みに利用しています。 
void setup() {
  size(640, 360);
  noStroke();
  colorMode(RGB, height, height, height);
  rectMode(CENTER);
//rectModeをCENTERにすると、rect(中心の座標x, 中心の座標y, 横幅、縦幅)となります。
}

void draw() {
  background(0.0);

  float r1 = map(mouseX, 0, width, 0, height);
//mouseXの値を0~widthから0~heightに変換します。
 
  float r2 = height-r1;
//r2はr1とは逆の数値になります。
 
  fill(r1);
  rect(width/2 + r1/2, height/2, r1, r1);//右側の□を描きます。
  
  fill(r2);
  rect(width/2 - r2/2, height/2, r2, r2);//左側の□を描きます。

fill(255,0,0); ellipse(width/2+r1/2,height/2,5,5);
}

2dnoise2

noise()を利用して波を表現しています。noiseに値を2つ入力すると2Dになるようですね。

原理はよくわかりませんが、利用できているのでよしとします。

xoffをいじくると、山の高低差が変化します。大きくるとトゲトゲし、小さくすると平坦になります。

yoffをいじくると、値の連続性が小さくなります。値が飛び飛びになり、上手なアニメーションになりません。
float yoff = 0.0;        
void setup() {
  size(640, 360);
  noStroke();
}

void draw() {
  background(247,152,152);

  fill(255);
  beginShape(); 
//beginshapeとendshapeで挟まれた間にあるvertexを線で結びます。
 
  float xoff = 0;         
  for (float x = 0; x <= width; x += 10) {
    float y = map(noise(xoff, yoff), 0, 1, 200,300);
  //mapは0-1で出力されたnoiseを200-300の間の数に直します。 
    vertex(x, y); 
    xoff += 0.05;
  }
  yoff += 0.01;
  vertex(width, height);
  vertex(0, height);
  endShape(CLOSE);
}

このページのトップヘ