SHOWROOMでギフトを画面に降らせるまで6(processing　お試し編)

1. 概要

このnoteは、virtualSHOWROOMERの東雲めぐちゃんのように、SHOWROOMの配信中にもらったギフトを主の後ろに降らせたい！という想いのもと、プログラミング初心者がなんだかんだしたメモです。(この内容はSHOWROOMで配信しています。)

​

↑完成イメージ図　
東雲めぐちゃんSHOWROOMアーカイブ(10:56~15:44あたり)

めぐちゃんのところがバーチャルじゃない人になるイメージ...

詳しくは前回の記事をご覧ください。

2. 今回やったこと

今回は実際にギフトが落ちてくるグラフィックを作成しようと思います。
ただ、グラフィックについては全くやったことないので、今回はチュートリアル✨

下の全体像でいえば、青い部分を今回からは取り組んでいこうと思っています！
SHOWROOM APIでギフトを投げられたことを取得し、それをprocessingで描画したいと思っています。

ただ、実際に何か2Dの物体を描くわけではなく、私が書いたイラストを降らせる予定です！

ということで、今回はprocessingを使ったことがなかったので、チュートリアルをやりました！

ここのサイトを参考にして、円を動かしてみました！
プログラミング初心者でも大丈夫！processingでデジタルアートを作ろう

このコードは何を表しているんだよ〜ってのがわかりやすく解説されていて、ほんとに初心者でも大丈夫！って感じでした！

このサイトの「図形を書いてみよう」のところまでやってその後自分なりにいろいろやってみました。

(何だか、プログラミングできる人曰く、sampleコードを実行してできたらそれを自分なりにいじることが上達の近道らしい！)

1. x軸にそった移動

void setup(){
size(600, 400);
background(255);
}

void draw(){
noFill();
stroke(0, 0, 255);
ellipse(300, 200, 180, 180);
}

これを...

int x;
//座標のx座標を変数xにする

void setup(){
size(600,400);
background(255);
x = 200;
//初期値を決めてあげる
}

void draw(){
noFill();
stroke(0,0,255);
background(255);
//一度背景を書いてまっさらにする
ellipse(x,200,180,180);
//x座標をxと置いてあげる
x += 1;
//円を描いた後、x座標を+1してあげる
} 

こんな感じ！
そうすると横に移動するようになる！

ellipse([円の中心のx座標], [円の中心のy座標], 縦の半径, 横の半径)なので、x座標のところを変数xに変えてあげて、「円を書き終わったら1プラスする」ということをやってます。

また、draw()関数は何回も繰り返されるそうで、ellipse()で円を書くまえにbackgroud()で一度キャンバスを真っ白にしてます。

こうすることで、
真っ白なキャンバス→円をかく→x座標を1ずらしてセット→真っ白なキャンバス→1ずれた円をかく
のループができます！

2. x,y軸両方の移動

int x;
int y;
//変数yの宣言

void setup(){
size(600,400);
background(255);
x = 200;
y = 200;
//yの初期値の設定
}

void draw(){
noFill();
stroke(0,0,255);
background(255);
ellipse(x,y,180,180);
//変数yに変える
x += 1;
y += 1;
//yも+1する
} 

今度はy軸方向の移動も足してみると、こんな感じ！

x座標のときと同じことをしました！

3. 円が画面の端に当たったら、跳ね返る

プログラミングしてて「へ〜」って思うことの一つ、当たり判定です

直感を数式化するのって、ちょっとしたパズルみたいで難しいけど面白いよね！

(ちなみに私は根っからの文系なので、行列とかわからないし、プログラミングは中学？小学生レベルの数学しか使えない)

int x;
int y;
boolean xdirection = true;
//円がx軸上を右に動くか左に動くかをboolean型で定義する


void setup(){
 size(600,400);
 background(255);
 x = 200;
 y = 200;
}

void draw(){
 noFill();
 stroke(0,0,255);
 background(255);
 ellipse(x,y,180,180);

 
 if((x>=600-90) || (x<=90)){
   xdirection = !xdirection; 
 }
 //横600のキャンバスに対して、半径90の円なので、端にきたらxdirectionを反転する

 
 if(xdirection == true){
   x += 1;
 }else{
   x -= 1;
 }
 //xdirectionがtrueだったら、xを足し右方向に進み、そうでなければ左方向に進む

}

当たり判定のために、x軸方向のどちらに動いているかを判定するboolean型のxdirectionを追加しました。

(boolean型は私もはじめて知ったのですが、trueかfalseかどちらかの2値をとるデータ型だそうです。)

一番下から読んでいくとわかりやすいと思うのですが、xdirectionがtrueだったら右に、falseだったら左に進むように設定しました。(一番下のif文のところ)

そしてその上で、キャンバスに当たったらxdirectionをnot xdirectionつまりfalseにするようにしました。円の中心のx軸で判定しているので、円の半径分を考慮して条件を書きました。

int x;
int y;
boolean xdirection = true;
boolean ydirection = true;

void setup(){
 size(600,400);
 background(255);
 x = 200;
 y = 200;
}

void draw(){
 noFill();
 stroke(0,0,255);
 background(255);
 ellipse(x,y,180,180);

 
 if((x>=600-90) || (x<=90)){
     xdirection = !xdirection; 
 }
 if((y>=400-90) || (y<=90)){
     ydirection = !ydirection;
 }
 
 if(xdirection == true){
   x += 1;
 }else{
   x -= 1;
 }
 
 if(ydirection == true){
   y += 1;
 }else{
   y -= 1;
 }

}

y軸方向も追加して、完成です。

4. 円を追加する

int x;
int y;
int a;
int b;
//新しい円のx軸をa、y軸をbにする
boolean xdirection = true;
boolean ydirection = true;
boolean xdirection_2 = true;
boolean ydirection_2 = true;
//新しい円のx方向をxdirection_2,y方向をydirection_2にする

void setup(){
 size(600,400);
 background(255);
 x = 200;
 y = 200;
 a = 400;
 b = 250;
}


void draw(){
 noFill();
 stroke(0,0,255);
 background(255);
 ellipse(x,y,180,180);
 ellipse(a,b,90,90);
 //新しい円の追加
 
 if((x>=600-90) || (x<=90)){
   xdirection = !xdirection; 
 }
 if((y>=400-90) || (y<=90)){
   ydirection = !ydirection;
 }
 
 if(xdirection == true){
   x += 1;
 }else{
   x -= 1;
 }
 
 if(ydirection == true){
   y += 1;
 }else{
   y -= 1;
 }
 
 if((a>=600-45) || (a<=45) ){
   xdirection_2 = !xdirection_2; 
 }
 //新しい円は半径が45なので、45で当たり判定をする
 if((b>=400-45)|| (b<=45)){
   ydirection_2 = !ydirection_2;
 }
 
 if(xdirection_2 == true){
   a += 1;
 }else{
   a -= 1;
 }
 
 if(ydirection_2 == true){
   b += 1;
 }else{
   b -= 1;
 }
 
 if(dist(a,b,x,y)<=135){
   xdirection = !xdirection;
   xdirection_2 = !xdirection_2;
   ydirection = !ydirection;
   ydirection_2 = !ydirection_2;
 }
 //dist関数で二つの円の距離が円の半径を足したものより小さくなったら、方向転換する
}

新しい円を追加して、初期化と当たり判定を書きました。
あと、距離を測るdist関数を追加して、二つの円の距離が円の半径を足し合わせたものより小さくなったら、方向転換するようにしました。

dist関数めちゃ便利だなぁ

3. 次回やりたいこと

processingの基本的な使い方が分かった気がするので、次はギフトを降らせるために画像を降らせるところをやっていきたいと思います。