Residence visualization


世界中からクラに来るレジデンスアーティストがどこから来たかのビジュアライゼーションを作成しました。
2007年から2018年まで表示させています。
p5.jsとmappa.jsをつかって制作しました。スマホでも見れますが、pcやタブレットで見るのをおすすめします!

https://editor.p5js.org/hirofumimatsuzaki/full/BJ4tFVBkN

二丈町をポイントし、クリアーでキャンバスを上書きしています。



二丈町をポイントし、クリアーでキャンバスを上書きしています。
https://editor.p5js.org/hirofumimatsuzaki/sketches/ByHZs4ryV

GameButton


void setup(){
  size(400,400);
  //noStroke();
}
void draw(){
  fill(150);
  rect(0,180,400,250);
  button(310,300,40,color(255,0,0));
  button(270,270,40,color(255,0,0));
  button(350,270,40,color(255,0,0));
  button(310,235,40,color(255,0,0));
  button2(40,240,40,color(0,255,0));//left
  button2(80,280,40,color(0,255,0));//down
  button2(80,200,40,color(0,255,0));//up
  button2(120,240,40,color(0,255,0));//right
}

void button(int x,int y,int s,color c){
  
  float d= dist(x,y,mouseX,mouseY);
  if(d<s/2&&mousePressed){
    c=0;
  }
  fill(c);
  ellipse(x,y,s,s);
}

void button2(int x,int y,int s,color c){
  if(mouseX>x&&mouseX<x+s&&mouseY>y&&mouseY<y+s&&mousePressed){
    c=0;
  }
  fill(c);
  rect(x,y,s,s);
}