[Processing]クリック点を保存してアート作品を描く

#vertexを使って動的アートを描く

![Vertexer.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/554244/353b11ee-a26a-d908-7057-53ebb82c6d93.gif)

#説明
と言っても軽く動作説明をば

マウスクリックすると点がうたれます
先頭の点はマウスの位置を目指して移動し続けます
先頭以外の点は1つ前の（先輩にあたる点）の位置を目指します
⇒常に動くアートの出来上がり

先頭以外の点が若干近道をして目指すので、時間が経つと収束していくのが見ていて楽しいです
(^▽^)/

先頭の点がマウスの位置に到達すると、先頭の点は消え、そして...

#プログラム
拡張子本当は.pdeですけど、javaにした方が色ついて見やすいかなって

```Vertexer.java

//リストから削除するかどうかboolean
boolean listReMove = false;

// beginShape() に入れる変数
int Mode_Number = 0;

//下の表をもとに図形の値を代入
int[] num = {11, 9, 16, 10, 18, 20};

//任意にリセットできるように変数として保持
int colorNum = 0;

String[] texter = 
  {
  "TRIANGLE_FAN", "TRIANGLES", "QUADS", 
  "TRIANGLE_STRIP", "QUAD_STRIP", "DEFAULT"
};

//連続してモード変更しないようにタイマー機能
int timer = 0;

/*
  //シェイプモード　int の値
 TRIANGLE_FAN   // 11
 TRIANGLES      // 8,9
 QUADS          // 16,17
 TRIANGLE_STRIP // 10
 QUAD_STRIP     // 18
 LINES          // 5
 DEFAULT        // 20
 DEFAULT_NOFILL // 50
 NOFILL_CLOSE   // 51
 */

class Vertex {
  float x, y;
  color c;

  //一つ前のVertex
  Vertex prev;

  //prevの位置X,Y
  float prevX;
  float prevY;

  //一度だけロック
  boolean onceLock = true;

  Vertex(float x, float y, int r, Vertex pre) {
    this.x = x;
    this.y = y;
    c = color(r*2, 200 - r*2, 255 - r*4, 50);
    prev = pre;
  }

  void Move() {

    if (onceLock) {
      onceLock = false;

      if (prev != null) {
        //一つ前のVertexに向かう
        prevX = prev.x;
        prevY = prev.y;
      } else 
      {
        //prevがない(リストの先頭)はマウスに向かう
        prevX = mouseX;
        prevY = mouseY;
      }
    }

    //位置関係から移動
    x += sign(prevX - x);
    y += sign(prevY - y);

    //prevがかつていた位置に来たら、
    //再度prevの位置を確かめる
    if ((prevX - x) == 0 && (prevY - y) == 0) {
      //ロック解除
      onceLock = true;

      //先頭(prevがない)時、マウスと距離が離れてない時
      if (prev == null) {
        if (mouseX - x == 0 && mouseY - y == 0) {
          //リストの先頭削除 boolean 解除
          listReMove = true;
        }
      }
    }
  }
}

ArrayList<Vertex> vlist = new ArrayList<Vertex>();


void setup() {
  //size(1800, 800, P2D);
  fullScreen();
  frameRate(30);
  noStroke();
  textFont(createFont("MS Gothic", 48, true));
  textSize(50);
  textAlign(CENTER);
}

void draw() {
  background(255);

  beginShape( num[Mode_Number % num.length] );
  for (Vertex v : vlist) {
    v.Move();
    fill(v.c);
    vertex(v.x, v.y);
  }

  endShape();

  //モード表示
  text(texter[Mode_Number % texter.length], width/2, 50);

  timer++;

  //リストの先頭削除するかどうか if 文
  if (listReMove) {
    listReMove = false;

    //リストの長さを保つため if 文
    if (vlist.size() > 2 && timer > 60) {
      timer = 0;

      vlist.remove(0);
      //リストの先頭になる Vertex を先頭仕様に設定
      Vertex ver = vlist.get(1);
      ver.onceLock = true;
      ver.prev = null;

      // beginShape() モード変更
      Mode_Number++;
    }
  }
}

void mousePressed() {
  Vertex v ;

  //リストのサイズごとに場合分け
  if (vlist.size() == 0) {
    v = new Vertex(mouseX, mouseY, 0, null);
  } else {
    v = new Vertex(mouseX, mouseY, colorNum++, vlist.get(vlist.size()-1));
  }

  vlist.add(v);
}

void keyPressed() {
  //カラー数値リセット
  colorNum = 0;
}

//正なら1、負なら-1、0なら0を返す
float sign(float a) {
  if (a > 0) return 1;
  else if (a == 0) return 0;
  else return -1;
}
```
#続編？
[[Processing]なぞって描くダイナミックアート](https://qiita.com/NekoCan/items/300d9331aa1221ab1fc9)