ラズパイ3倍美味しいブログ

ラズパイ3を美味しく食べます

Processingでクラシカロイドのパッド君3

Processingでクラシカロイドのパッド君の表情をしこたま作るブログ。

なんだろう、作らずにはいられない表情な気がするんだ。

本当は動かしてやりたいんだけど、まだProcessingリハビリ中なので、コツコツ作るよ。

今日の表情はこれ。オープニングでくるっと回って出てくる表情なんだよね。

いい顔してるなぁとドキっとさせられるよね。

パッド君欲しいんじゃーーー

f:id:umesyurock0603:20170606020053p:plain

NHKで今再放送しているクラシカロイドは本当に最高のアニメなのでみんな見てください。クラシックの名曲がものすごいカッコいいアレンジされてて、生きててよかったと感動するレベル。自分用にクラシカロイドのオーディオビジュアライザをProcessingで作りたい、作りたい。。。はやく作れる力を手に入れたい。。。輝く音符を飛ばしたい。

 

今回の自分の進化ポイント。

・arcで−30度〜210度の範囲で楕円形を描くってのができた。

・画面の横をwidth、縦をheightで取得できることを理解した。

・顔の中央の影は、最後に黒色の四角を70%ぐらいの暗さでかぶせることで作った。

 

padkun03.pde

-------------------------------

void setup(){

size(1136,640);//iPhone SEの壁紙サイズです横1136、縦640
background(#31ecff);
noStroke();

int xl=300;//左側の目の中心のx座標
int xr=1136-300;//右側の目の中心のx座標
int y=250;//目の中心のy座標
float r1=radians(-30);
float r2=radians(210);

fill(#fcffff);
arc(xl,y,240,230,r1,r2);//目の白い部分を扇型arc()で作る
arc(xr,y,240,230,r1,r2);
triangle(width/2,490,width/2-30,400,width/2+30,400);

fill(#31ecff);
ellipse(xl,y,155,140);//目の白い部分の上に青い円をかぶせる
ellipse(xr,y,155,140);

fill(#fcffff);//まゆげ
strokeWeight(10);
stroke(#31ecff);
rectMode(CENTER);
rect(xl,195,320,42);
rect(xr,195,320,42);

strokeWeight(5);//線の入ってる箇所
line(xl+5,y+45,xl+15,y+135);
line(xr+5,y+45,xr+15,y+135);

noStroke();
fill(0,70);//黒を70%ぐらいの暗さでかぶせる
rect(width/2,height/2,670,670);

}

void draw(){}

void keyPressed(){
if(keyCode==ENTER){
save("padkun03.png");
}
}

-------------------------------

Processingでクラシカロイドのパッド君2

またまたProcessingでパッド君を作ります。

とりあえずいろんな表情があるから作りつつ、Processing に慣れていこうという考えです。

 

今回は扇形を作る法法を覚えた!arc()

 

f:id:umesyurock0603:20170605080831p:plain

 

padkun2.pde

------------------------

void setup(){

size(1136,640);//iPhone SEの壁紙サイズです横1136、縦640
background(#31ecff);
noStroke();

fill(#ccf8fc);//左上と右下にある、画面に入る光
triangle(0,0,90,0,0,310);
triangle(1136,330,1046,640,1136,640);

int xl=360;//左側の目の中心のx座標
int xr=1136-360;//右側の目の中心のx座標
int y=310;//目の中心のy座標
float r1=radians(190);
float r2=radians(350);
float r3=radians(185);
float r4=radians(355);

fill(#fcffff);//にっこり目を扇型arc()で作る。白い方
arc(xl,y,300,300,r1,r2);
arc(xr,y,300,300,r1,r2);

fill(#31ecff);//にっこり目の上に青い扇型をかぶせる
arc(xl,y,185,185,r3,r4);
arc(xr,y,185,185,r3,r4);

fill(#fcffff);//目の下の頬?と口
rectMode(CENTER);
rect(215,360,155,50);
rect(1136-215,360,155,50);
rect(1136/2,400,200,100);

strokeWeight(5);//線の入ってる箇所
stroke(#31ecff);
line(290,300,235,415);
line(930,150,830,250);
}

void draw(){}

void keyPressed(){
if(keyCode==ENTER){
save("padkun02.png");
}
}

------------------------

 

Processingでクラシカロイドのパッド君

クラシカロイドに激ハマったために、Processingの世界に戻ってきました。

ただいま!!帰ってきたよ!!

でもprocessingの知識はすっかり薄れてしまったので、またイチから出直しだよ。

 

肩慣らしに、パッド君を作らせていただきます。

iphone SEの壁紙にできるように、大きさは横1136ピクセル、縦640ピクセルに合わせています。

f:id:umesyurock0603:20170604032713p:plain

padkun01.pde
--------------------------------------
void setup(){

size(1136,640);
background(#31ecff);
noStroke();

fill(#ccf8fc);
triangle(0,0,120,0,0,370);

fill(#fcffff);
int xl=380;
int xr=1136-380;
int y=300;
ellipse(xl,y,240,240);
ellipse(xr,y,240,240);
triangle(520,460,616,460,568,500);

fill(#31ecff);
ellipse(xl,y,180,180);
ellipse(xr,y,180,180);
rectMode(CENTER);
rect(xl,y,30,250);
rect(xl,y,250,30);
rect(xr,y,30,250);
rect(xr,y,250,30);
}

void draw(){}

void keyPressed(){
if(keyCode==ENTER){
save("padkun01.png");
}
}
--------------------------------------

いえーいパッドくん。まだ動かないけど。

 

夢はProcessingで自分で楽しめるオーディオビジュアライザ作りです。

いい感じの超かっこいオーディオビジュアライザをProcessingで作りたいんです。

クラシカロイドのムジークCD3枚買っちゃったんで、それぐらいはまってるんで、これらのかっこいい曲に合わせたカッコいい奴つくりたいんです。

 

Processingに帰ってきた理由

Processing3.3.3に帰ってきた理由

それは、クラシカロイドというNHKのアニメにはまったせいでもあります。

 

クラシカロイド面白い

クラシカロイドのムジーク最高

ミュージックビジュアライザ作りたい

Processingでできるんじゃね?

できそう、Processingやっぱすげー!

minim??を入れたりしたらいいんだな?ん?エラー!お、波形動いた、こっちはどうだ?エラー!!この動き激しすぎ、どこでパラメーター落ち着けさせることができるんだ?わからん!つか基本がすでにわからん!!

 

ということでもう一回初心にもどって基礎からやり直しです。

夢は、自分の思うようなオーディオビジュアライザを作って、ムジーク流しながらニヤニヤすることです。

ただいまProcessing3.3.3

以前のブログから(ディズニーランド満喫記事)3ヶ月気を失っていましたが、久しぶりにProcessing熱がようやく燃え上がってきたので、再開します。

ただいまProcessing3.3.3。もちろんラズパイにいれてやっている。

久しぶりすぎたので、色々知識が白紙になっている。

へぇー過去の私はミッキーマウスマークもどきをProcessingで作れる力があったんだ・・・すっかり忘れてるよ!(記憶喪失)

 

こういうときは、『遊んで学ぶはじめてのプログラミング〜Processingの魔法学校〜』をイチから見直すのが良い。いつでも基本に戻るのだ。

改めて読みなおして、やっぱり魔法学校の扉をひらくようなワクワク感がたまりません。パソコンがあってProcessing のルールがわかれば魔法が使えるとか、昔夢見たことができるってわけじゃないか。素敵!!やっぱり私、魔法使いたい!

 

正誤表もちゃんと見ておく

遊んで学ぶ はじめてのプログラミング|サポート|秀和システム

間違いは赤字で書き込んでおく。これで完璧。

 

ここに書いてない間違い、ミスプリント?みたいなのを見かけたら今後ここにメモしておく。

・p.49 上から4行目 (0,64,64)→(0,255,0) 

・p.57 中央あたり 255,0,0→255,255,0

・p.64 「なんか、これはいいいや」→「なんか、これはいいや」

重箱の隅をつつくような行為なのだが、個人的にどうも教科書の間違いは気になってしまって仕方ない病気にかかっている。マジで病気かもしれない・・・どうしよ・・・

 

補足事項

Windowsパソコン(Windows10 64bit)にもProcessing3.3.3の64bitのzipDLして展開してProcessing起動しようとしたんだけど、このPCでは出来ません的なことを言われて開けなかった。→zipを展開するときに、右クリックして7-zipというもので開いたらうまくいった。普通に展開するとラプラスで勝手に展開されてたのだけど、それがよくなかったらしい。なんでかは知らないけど、そんなこともあるらしい。ネットで調べたら、Processing開けない・・・と嘆いている人が見つかったので、とりあえず書いとく。

 

 

子連れディズニーランド2日間。2017年3月

今回ラズベリーパイ全く関係ありません。子連れで大阪から1泊2日でディズニーランド2日間行ってアンバサダーホテル泊まってきました。その話を延々書いているだけ。持ち物アドバイスなど書いているのでどこかの誰かの参考になれば。そして次回の旅行計画のためになれば。

アンバサダーホテルでは、都市伝説かと思ってたけど、部屋のランクアップの提案があり、乗りました。お金は必要だったが、ランクアップしてよかったと思うよ。ランクアップする人生とランクアップしない人生の分かれ道にたって、ランクアップする人生を選べてよかった。。。(せっかくだしランクアップしようかと、言った旦那に個人的にホレ直しました。ランクアップの提案があったら乗るの大事)泊まった部屋は、すごい良くてですね・・・何でも2倍で2個あるんだなという驚き。。。トイレが2個、テレビが2個、風呂場も2個・・・すごい。この部屋の広さというか使い方はなんなの。。。これが金持ちなの。。。衝撃を受ける。うん、こんな家に住みたいw
ディズニーランドは2日間行って、乗った乗り物は何個だろう。
1日目昼からイン
13:00スーパードゥーパージャンピングタイム(ショー)→昼のパレードを見る→ピーターパン空の旅並ぶ(50分ぐらい)→キャッスルカルーセル(全部お馬さんなメリーゴーランド)→アナと雪の女王のパレード見る→16:00退園。
16:30アンバサダーホテルへ。(アンバサダーホテルへ向かうバスも割と満席。1台見送った。)
17:20-19:20シェフミッキーでディナー。ローストビーフをめっちゃ食べた。色々食べておなかぽんぽん。
子どもたちも疲れの限界で、ご飯食べながらもほっぺた真っ赤で超眠そう。夜のパレードはもう諦めて、部屋もランクアップしたことだしくつろぐ。ジャグジー付きだったので、バスジェル使って泡風呂を堪能した。子供ら超喜ぶ。うーんぶるじょあ・・・。こんな広い部屋に住みたいなぁ。こんな世界があるのかって、価値観が変わる。

2日目朝からイン(アーリーチェックインで7:50くらいにインしてたはず)
モンスターズインクのFP取る→バズライトイヤー並ぶ→スティッチエンカウンター→バズライトイヤーのFP取る→モンスターズインク→カリブの海賊→スティッチの魅惑のチキルーム→スターウォーズのスターツアーズFP取る→ジャングルクルーズスターウォーズのスターツアーズ(身長制限102cmがあり、長男と夫だけ)→バズライトイヤー→お昼ごはん→ウェスタンリバー鉄道→15:30退園

今回学んだこと

【アクセス方法】
大阪からディズニーランド行くなら、飛行機が超楽伊丹空港へ車で行って駐車場に泊めておいて、飛行機乗って帰ってきた。新幹線ではもう行きとうない。子供が小さいうちは絶対飛行機が良い。。。子供にとったら1時間10分の飛行時間でも長かった〜!という感想だそうです。
羽田空港からディズニーランドへ行くなら、バスが楽だと思う。そのリムジンバスのチケットを事前に買っておくべきだった。今回買わずに、羽田空港で買えるだろ、と思ってら、金曜日の9:40にバスチケット売り場に並んだら満席のため60分待ちだった。。。飛行機ついた40分後あたりのバスチケットを事前予約しておくべきだったなぁー。満席っていうことがあるんだよこれ。空港で時間ロスするのは痛い。10:40発のバスの券だったが、10:30発のバスに乗ることができた。10:30発の乗車人数が少なかったのか(前の人達がさらに前のバスに乗れたのか)、とりあえず10分だけショートカット。
・ウェルカムセンターはJR舞浜駅の近くなので、バスの停留所からはやや歩く。子連れだと5−10分はかかる(ホテルのプリチェックインのために行った。スーツケース預けられる)。ちょっと遠い。そうなるとディズニーランドホテルは、ランド入り口の真ん前なのでやっぱり近いよなぁと思う。いいなぁ。
伊丹空港の駐車場料金は(朝7時ー翌日夜9時くらいで)4630円くらい。
・行き伊丹空港8:00発で羽田空港9:10着の飛行機に乗って、帰り羽田空港19:20発伊丹空港20:30着の飛行機に乗った。まぁこんなもんかなぁ。1泊2日だったけど、2泊3日に伸ばしても疲れるかなぁ。

【持ち物】
iPhoneの充電器絶対必要。2日目に充電器とiPhoneをつなぐためのケーブル忘れて手痛い失敗をした。14時半に携帯の電池が切れてしまった。。。せっかく買ったのに私のばか!夫とも連絡取り合えなくなるので、充電器とケーブルは絶対忘れるべからず・・。
・飲み物ペットボトル事前に買っておいたらよかったかなぁ。スーツケース持っていくんで、ホテル帰ってから翌日の朝までに飲むお茶ペットボトル、2日目のランドで飲むもの・・・と考えたけど、重量制限ひっかかったら嫌だし、やっぱ現地調達がいいかなぁ。ランドでは買わずどこかコンビニで買っておくべきかな、という感じ。ランドでは売られてる種類が少ないし、500mlペットボトルが210円だったよ。
ポップコーンバケツとポップコーンは次回は持って行こうと思う。ポップコーン買うために並ぶのがもったいない。バケツは今回買ったからそれを今後も持っていくとして、中身のポップコーンはポップコーンパパの梅かつおを持って行こうと思う。お菓子も食べ物も甘いものがおおいので、しょっぱいものが絶対欲しくなる。
・ベビーカーに乗れる子がいるなら、ベビーカー絶対必要。持っていけるなら普段使っている奴持っていったほうがいい。2歳次男も歩けるようになってきたし、いらないかな?と思ってたけどそんなことはなかった。5歳長男が歩き疲れて乗りたいと言い出すし、もうベビーカー様様。絶対に絶対にベビーカー持っていけって!!!
ティッシュ大量に必要。鼻水ちょうふいてた。
ジップロックを持って行っててゴミ袋にしてた。落としたお菓子、鼻水ふいたティッシュ、お菓子の空き箱などなど、捨てるものは多い。ジップ出来たほうがなにかと便利だと感じる。
・アンバサダーホテルに泊まったので、パジャマは借りた。子供用のパジャマはもこもこしてて気持ちよかった。タオル生地かな。親もホテルのパジャマ使った。

【ランドでの遊び方】
・今回はディズニーシーを諦めて、ランド2日してみたけど、良かった。1日めが昼からインだったので、モンスターズインクとかバズライトイヤーとかが乗れなかったので、2日目に朝イチインしてFPとることができてようやく乗れたから。ランド2日でも全然楽しめる。
・2日めはアンバサダーホテルに泊まった特典の15分前エントリーを使って早めに入れたので、FPを他の来場者よりは早めにとることができた。まず、一番人気のモンスターズインクのFPを取って(9:50-10:50の利用OKチケット)、バズライトイヤーの方を並び(朝イチだと10分ぐらいで乗れる)、FP発券が可能になり次第次のバズライトイヤーのFPを取った(12:20-13:20利用可能)。長男はバズライトイヤーの方が点数が出るので楽しかった模様。
・意外と面白かったのはスティッチ・エンカウンター。ディズニーシーのタートルトークのようだった。一番前の席に座れたら、スティッチとお話できるかもしれない。初回は面食らうかもしれないので、様子がわかってきた2回目とかでも多分楽しめる。
カリブの海賊こわい。夢と魔法の国なのに、結構はげしく骸骨出てくるんだなと驚き。ディズニーってこんな感じだったっけ?!骸骨をこんな風に見ることができるって子供にとっちゃ結構衝撃だと思うんよね。これが原体験になって、骸骨ってこんな感じみたいなのが記憶に刻まれたかもしれない。なんてことを思った。
ウェスタンリバー鉄道。恐竜好きな次男が、喜んでた。蒸気船が見えたり、カヌーが見えたり、ディズニーランドの風景が見えたり、キャストやお客さん同士でも手を振ったら振り返してくれたり、なんか楽しい。
・晩御飯にシェフミッキーに行った後で余力があれば夜のエレクトリカルパレード見たり、アナ雪のシンデレラ城プロジェクションマッピングを見たりしよう!と思ってたんだけど、できませんでした。子供らが限界だったwまぁ親も限界だったんだけど。子供も親も歩き疲れてクタクタです。

・ランドのショーでスーパードゥーパージャンピングタイムは、最後にミッキーたちが広場に降りてきてくれて触れ合える時間があるので、子どもたちは喜んでた。子供たちだけで広場みたいなところに座っていられるならそこに置いて、親は外側から見るなどした。ギリギリに行くと入れなかったりするので、ある程度余裕を持って行っておいたほうがいい。

【食事関連】
シェフミッキーを1日目の17:20に予約。2時間は居てもいいと言われ、結局2時間居た。予定では1時間で出てるはずだったがそんな早く終わるわけもなくw
キャラクターがテーブルごとにちゃんと回ってくれるので、写真も撮れるしハグできる。ミッキーが回ってくるときに、ちょうど子供がトイレ行きたいといいだして、残念ながら初回はパスだった。次に回ってくるまで待つ感じ。
・他にもレストランを事前予約できたりもするのだが、1日目のシェフミッキーしか予約してなかった。2日目の昼をランドのレストランで予約したらよかったかなぁとは思っていたのだが、プライオリティシーティングはすでにうまっていた。適当に食べるのでもなんとかはなる。ここはFPがいつ取れるかわからないなどもあるので難しい。
・ちなみにシェフミッキー予約したのって、来園予定日の6ヶ月前だぞ?それでもほぼ埋まってた。ほんとすごい・・・

【トートバッグ買ったった】
アンバサダーホテル宿泊者しか買えないトートバッグ買っちゃった★
しれっと買った。もうアンバサダーホテル泊まることなんてそうそうなさそうだし。記念だ!!!

次回へのコメント

・つぎは次男の5歳の誕生日にディズニーシー中心に攻めようかな。ミラコスタ泊まろ??6ヶ月前から予約しよ??
・今回はANAに乗ったがJALのほうがいいとかあるのかなぁ。そこら辺も調べよう。ANAは第2ターミナル、JALは第1ターミナル。

・今回の心残りは、自分たちのおみやげをあまり買えなかったところかな。まぁ私はトートバッグ買ったからいいんだけど。トゥーンタウンとか近寄ることすらできなかった。ディズニーは広いな!トゥーンタウンでゆっくり遊ぶとか、いつできるんだろうか・・・。プーさんのハニーハントも行けなかった。FPはガンガン無くなっていくなぁ。閑散期の平日とかならまだいいんだろうけれど、平日行くのは難しいか・・・?子供が小学校に行ったら平日休みにくいかなーうーん。となると今年中に行かなきゃいけない系??

 

最後にprocessingで作ったミッキー壁紙(iPhoneSE用)とprocessingで作ったオラフのイラスト載せとこう。

f:id:umesyurock0603:20170219235139p:plain

いえーい可愛い。アンバサダーホテルに行っても、壁の模様をprocessingで表現できないだろうか・・・とか常に考えてしまっていた。アンバサダーホテルのカラーで何かできそうな気はするんだよなぁ。。。

f:id:umesyurock0603:20170124012028p:plain

アナと雪の女王を事前に子供らに見せておいてよかったよ。あ!オラフ!!と見つけては教えてくれた。

○ッキーマークもどきできたよ!?

 前回の記事で、Processingつかって、黒背景にドットをグラデーションかけて並べてみたけど、なんか目がチカチカする。円の大きさを大きくして、もうちょっと式を綺麗にするべく少々いじってみた。

dots3.pde
------------------------------------
void setup(){

size(640,1136);
background(255);
noStroke();
colorMode(HSB, 360, 100, 100, 100);//HSBモード(H:360段階, S,B,Alpha:各100段階)で指定する
smooth();
float r=50;

for(int i=0;i<(height/r)+2;i+=2){
for(int j=0;j<(width/r)+2;j+=2){
fill(360*(i/(height/r))*(j/(width/r)),100,100);
ellipse(j*r,i*r,r,r);
}
}
for(int i=1;i<(height/r)+2;i+=2){
for(int j=1;j<(width/r)+2;j+=2){
fill(360*(i/(height/r))*(j/(width/r)),100,100);
ellipse(j*r,i*r,r,r);
}
}

}

void draw(){}

void keyPressed(){
if(keyCode==ENTER){
save("dots3.png");
}
}
------------------------------------

f:id:umesyurock0603:20170219234859p:plain

お、かわいいじゃーん★(自画自賛
円の半径をrという変数にできた&ちょっとプログラムスッキリしたぞ?いい感じかもしれない?!少なくとも1つ前の記事よりはましになった気がする。

ドットか〜。このドット、そういえばもしかして、こんなことできるだろうか。
大きな円の上に小さな円を2つ並べてみたら・・・もしかして。
dots4.pde
------------------------------------
void setup(){

size(640,1136);
background(0);
noStroke();
colorMode(HSB, 360, 100, 100, 100);//HSBモード(H:360段階, S,B,Alpha:各100段階)で指定する
smooth();
float r=60;
float mm=35;//耳の位置調整用
float mr=r*2/3;//耳の直径

for(int i=0;i<(height/r)+2;i+=2){
for(int j=0;j<(width/r)+2;j+=2){
ellipse(j*r,i*r,r,r);
ellipse(j*r-mm,i*r-mm,mr,mr);
ellipse(j*r+mm,i*r-mm,mr,mr);
fill(360*(i/(height/r))*(j/(width/r)),100,100);

}
}
ellipse(0,0,r,r);
fill(0,100,100);//左上の赤丸のためプログラム

}

void draw(){}

void keyPressed(){
if(keyCode==ENTER){
save("dots4.png");
}
}
------------------------------------

f:id:umesyurock0603:20170219235004p:plain

ハハッ!できちゃった。左上の赤丸がどうしても白くなってしまうので、無理やり後から加えるという荒業を使っています。数式の美しさはどうしたんだ!!とはいいつつ、○ッキーマークできたので、楽しくなってきた。
相変わらず力技です。

力技ついでに、もう一個作ってみる。

dots5.pde
------------------------------------
void setup(){

size(640,1136);
background(0);
noStroke();
colorMode(HSB, 360, 100, 100, 100);//HSBモード(H:360段階, S,B,Alpha:各100段階)で指定する
smooth();
float r=60;
float mm=35;//耳の位置調整用
float mr=r*2/3;//耳の直径
float s=30;
float mms=17;
float ms=s*2/3;

for(int i=0;i<(height/r)+2;i+=2){
for(int j=0;j<(width/r)+2;j+=2){
ellipse(j*r,i*r,r,r);
ellipse(j*r-mm,i*r-mm,mr,mr);
ellipse(j*r+mm,i*r-mm,mr,mr);
fill(360*(i/(height/r))*(j/(width/r)),100,100);

}
}
ellipse(0,0,r,r);
fill(0,100,100);//左上の赤丸のためプログラム

for(int i=1;i<(height/r)+2;i+=2){
for(int j=1;j<(width/r)+2;j+=2){
ellipse(j*r,i*r-ms,s,s);
ellipse(j*r-mms,i*r-mms-ms,ms,ms);
ellipse(j*r+mms,i*r-mms-ms,ms,ms);
fill(360*(i/(height/r))*(j/(width/r)),100,100);
}
}

}

void draw(){}

void keyPressed(){
if(keyCode==ENTER){
save("dots5.png");
}
}
------------------------------------

f:id:umesyurock0603:20170219235139p:plain

ハハッ!!さらに仲間が増えたよ!なんとなく等間隔に互い違いに並べたように見えるけど、これもわりとで調整しているので力技だよ。力技Processingだよ!

コメントはちゃんと書かないと、多分1週間後の自分へのダイイングメッセージにもならない気がする。この変数、なんでこんな名前つけてんだよ!って多分ツッコミしかしてないと思う。コメントはちゃんと書こう。。。