Residence visualization


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

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

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);
}
  
 

roiくんボタンを複数作る。関数


void setup() {
  size(500, 500);
}

void draw() {
  botan(100, 200, 50, color(255, 0, 0));  //四つの値をボタンの関数にパスする。
  botan(200, 200, 50, color(255, 0, 0)); //横の値(int x,),たての値(int y),サイズ(int s),色(color c)
  botan(150, 250, 50, color(255, 0, 0));
  botan(150, 150, 50, color(255, 0, 0));
}

void botan(int x, int y, int s, color c) {   //ボタン関数を作った。四つの値を受けます。
  if (x<mouseX&&mouseX<x+s&&mouseY>y&&mouseY<y+s&&mousePressed) {
//もしmouseが四角の中に入ったら
    c=255;//色を白にする。
  } else {//それ以外は
    c=color(255, 0, 0);//色を白にする。
  }

  fill(c);
  rect(x, y, s, s);
}


button


int x=200;
int y=150;
int s=60;
color c=255;
color b=color(0,255,0);

void setup(){
 size(400,400);
 background(b);
}

void draw(){//繰り返す
  background(b);
  fill(c);
  rect(x,y,s,s);
}

void mousePressed(){//マウス押す
  if(mouseX>x&&mouseX<x+s&&mouseY>y&&mouseY<y+s){//もしmouseXがxよりも大きく、かつmouseXがx+sよりちいさくかつ、mouseYがyよりも大きく、かつmouseYがy+sよりも小さかったら
  c=0;//ボタンが黒になる
  b=color(random(255),random(255),random(255));//背景をランダムに変える
  }
}

void mouseReleased(){//マウスを離す
 c=255; 
}
  

random(◯,◯);


Ikkei君今日はrandom(◯,◯);を勉強しました。気に入った所でsを押すと画像を保存できます。


int x=0;
int s=50;
int y=200;
int sp=3;
int r=0;
int g=255;
int b=122;
int a=55;
void setup() {
  size(400, 400);
  noStroke();
  background(255);
}

void draw() {
  y=y+sp;	//yにspを足す。縦に動く
  x=x+sp;	//xにspを足す。横に動く
  if (y>425) {	//もしyが425より大きくなった時に
    y=0; 	//yを0にする。
    x=int(random(-400, 400));	//random( -100, 100);は-100から100までのランダムな値を返す。
    s=int(random(5, 80));	//int()で囲むのはrandomが少数点つきfloatの値を返すので、intに変換している。
    sp=int(random(1, 30));	//スピードspを1~30の値に
    r=int(random(0, 255));	//色の赤rを0~255の値に
    g=int(random(0, 255));	//色の緑gを0~255の値に
    b=int(random(0, 255));	//色の青bを0~255の値に
    a=int(random(10, 255));	//色のアルファ値透明度aを10~255の値に
  }
  fill(r, g, b, a);	//色r,b,b,a
  ellipse(x, y, s, s);	//丸
}

void keyPressed() {	//キーボードをおした時
  if (key=='s') {		//もしsを押したら
    save("img.jpg");//保存する。
  }
}