読者です 読者をやめる 読者になる 読者になる

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

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

均等にrandomに色々な形を敷き詰めてみる

processingでランダムに色々なことができるのは楽しいその2。

Processingで均等だけどランダムに色々な形を敷き詰めてみることに挑戦。

「遊んで学ぶはじめてのプログラミング Processingの魔法学校」

Lv7魔法コンクール!?〜繰り返しと関数でアートに挑戦〜より
p,170のrandom_cast.pdeをちょっといじる。
random_cast2.pde
----------------------------------------------
size(600,200);
background(0);
noStroke();

for(int i=0;i<1000;i++){
int x = int(random(0,60));
int y = int(random(0,20));
println(x);
fill(255,random(125,255),random(0,125));
ellipse(x*10+5,y*10+5,10,10);
}
----------------------------------------------

f:id:umesyurock0603:20170208041537p:plain

fill(R,G,B)のうち、RとGを高めにしておいて、Bを低めにすることで、黄色〜暖色系の丸を敷き詰める。丸を小さめにして、だーっと並べてみると、これはこれでまた可愛い。ランダムな可愛さ。

これ、丸じゃなくて四角形とか六角形とかできないかなぁ。

ellipseをrectに変更して、ついでに四角形の辺の長さをhという変数使う。

random_cast_rect.pde
----------------------------------------------
size(600,200);
background(0);
noStroke();
int h =25;

for(int i=0;i<100;i++){
int x = int(random(0,600/h));
int y = int(random(0,200/h));
println(x);
fill(0,random(125,255),255);
rect(x*h,y*h,h,h);
}
----------------------------------------------

f:id:umesyurock0603:20170208041613p:plain


※ここで一度失敗している。画面サイズの前にint sx=600のようにサイズも変数で指定しちゃおうと思ったんだけど、processing動かなくなってしまった。

青っぽい四角を黒背景に色々敷き詰めてみる。かっこいい。

よし、そんじゃぁ六角形だ。六角形を呼び出す魔法の言葉はなんだ。

Proce55ing.walker,blog » Blog Archive » Processingで五角形・六角形・ハート形を描く

→ここのページを参考に、五角形、六角形、ハート形の描き方を学ぶ。
----------------------------------------------
void setup(){
size(300, 300);
}

void draw(){
pentagon(75, 75, 150);
hexagon(225, 75, 150);
heart(75, 225, 150, 150);
}

// 五角形の描画
void pentagon(float centerX, float centerY, float size){
final float COS = {0.95105654, 0.5877853, -0.5877852, -0.95105654, 0};
final float SIN
= {-0.309017, 0.809017, 0.809017, -0.30901697, -1};

final float RADIUS = size / 2;
beginShape();
for(int i = 0; i < 5; i++){
float tx = COS[i] * RADIUS + centerX;
float ty = SIN[i] * RADIUS + centerY;
vertex(tx, ty);
}
endShape(CLOSE);
}

// 六角形の描画
void hexagon(float centerX, float centerY, float size){
final float COS = {1, 0.5, -0.5, -1, -0.5, 0.5};
final float SIN
= {0, 0.8660254, 0.8660254, 0, -0.86602524, -0.86602524};

final float RADIUS = size / 2;
beginShape();
for(int i = 0; i < 6; i++){
float tx = COS[i] * RADIUS + centerX;
float ty = SIN[i] * RADIUS + centerY;
vertex(tx, ty);
}
endShape(CLOSE);
}

// ハート形の描画
void heart(float centerX, float centerY, float width, float height){
final float WIDTH = width / 2 * 0.85;
final float HEIGHT = height / 2;
final float OFFSET = centerY - (HEIGHT / 6 * 5);
beginShape();
for(int i = 0; i < 30; i++){
float tx = abs(sin(radians(i * 12))) * (1 + cos(radians(i * 12))) * sin(radians(i * 12)) * WIDTH + centerX;
float ty = (0.8 + cos(radians(i * 12))) * cos(radians(i * 12)) * HEIGHT + OFFSET;
vertex(tx, ty);
}
endShape(CLOSE);
}
----------------------------------------------
この中から六角形を書き出す部分を取り出す
----------------------------------------------
void setup(){
size(300, 300);
}
void draw(){
hexagon(225, 75, 150);
}

// 六角形の描画
void hexagon(float centerX, float centerY, float size){
final float COS = {1, 0.5, -0.5, -1, -0.5, 0.5};
final float SIN = {0, 0.8660254, 0.8660254, 0, -0.86602524, -0.86602524};


final float RADIUS = size / 2;
beginShape();
for(int i = 0; i < 6; i++){
float tx = COS[i] * RADIUS + centerX;
float ty = SIN[i] * RADIUS + centerY;
vertex(tx, ty);
}
endShape(CLOSE);
}
----------------------------------------------
これを使って均等だけどランダムに六角形を敷き詰めることに挑戦してみる。
random_cast_hexagon.pde
----------------------------------------------
void setup(){
size(600, 200);
background(0);
noStroke();
int h =25;
blendMode(ADD);

for(int j=0;j<400;j++){
int hx = int(random(0,600/h));
int hy = int(random(0,200/h));
println(hx);
fill(random(150,255),random(0,100),random(0,200));
hexagon(hx*h+h/2, hy*h+h/2, h);
}
}
// 六角形の描画
void hexagon(float centerX, float centerY, float size){
final float COS = {1, 0.5, -0.5, -1, -0.5, 0.5};
final float SIN
= {0, 0.8660254, 0.8660254, 0, -0.86602524, -0.86602524};

final float RADIUS = size / 2;
beginShape();
for(int i = 0; i < 6; i++){
float tx = COS[i] * RADIUS + centerX;
float ty = SIN[i] * RADIUS + centerY;
vertex(tx, ty);
}
endShape(CLOSE);
}
----------------------------------------------

f:id:umesyurock0603:20170208041659p:plain


void draw{}の中にhexagonを入れちゃうと、すごい勢いでチカチカ描画が変わっていくので、一回こっきりの描画でいいやと思いvoid setup{}の中にhexagonを入れて描いてみた。これが正しいかどうかは正直わからない。

blendMode(ADD)も使ってみた。重なった部分は明るくなって(白に近づいて)いくっぽい。
六角形敷き詰められた〜

今後の課題

ダイヤ型敷き詰めてみてもいいかもしれない。
もしくは、六角形を蜂の巣状にしきつめるにはどうすっかなぁ〜

※↓参考図書です。子供がProcessingに興味持ちそうだったらまずこの本渡すなぁ。。。

processingでrandom()は楽し

processingでランダムに色々なことができるのは楽しい。

「遊んで学ぶ はじめてのプログラミング Processingの魔法学校」を勉強中です。

p,167-171のLv7魔法コンクール!?〜繰り返しと関数でアートに挑戦〜より今日はrandom()を勉強したのでその覚書。

本に書いてあるプログラムは下記random.pde
random.pde
----------------------------------------------
size(640,480);
background(255);
noStroke();

for(int i=0;i<20;i++){
float x = random(width);

float y = random(0,height);

println(x);
fill(random(256),random(256),random(256));
ellipse(x,y,100,100);
}
----------------------------------------------
これを実行するとこんな風にランダムな色のカラフルな縦100pixel,横100pixelの円がランダムな場所に20個描かれる↓

f:id:umesyurock0603:20170205063215p:plain

かわいい。。。

random()可愛いぞ!?色々いじってみます。

random2.pde
----------------------------------------------
size(640,200);
background(255);
noStroke();

for(int i=0;i<200;i++){
float x = random(width);

float y = random(0,height);

println(x);
fill(random(256),random(256),random(256));
ellipse(x,y,10,10);
}
----------------------------------------------
ウィンドウの大きさを横長にして、円の数を10倍(つまり200個)、円の大きさを1/10(つまり10pixel☓10pixel)にしたところこんな感じ。↓

f:id:umesyurock0603:20170205063345p:plain

可愛い。。。なんか、マステっぽい柄になってきた。

更に背景色、透明度とかも変えてみる。

random3.pde
----------------------------------------------
size(640,200);
background(0);
noStroke();

for(int i=0;i<200;i++){
float x = random(width);

float y = random(0,height);

println(x);
fill(random(0,150),random(0,200),random(200,255),random(80,100));
ellipse(x,y,50,50);
}
----------------------------------------------
黒背景に、青っぽい色の丸を透明度変えながら並べてみたらどうなるか実験。↓

f:id:umesyurock0603:20170205063449p:plain

よし、可愛い。
実行を押すたびに配置が変わるので納得行くまで色々変えることができる。面白い。

色の範囲をここからここまでにしておくと、この色が出て来やすくなるとかいう法則を知りたいw

この青色の光を黄色に変えたら夜景ちっくにできるかな?

今後やりたいこととしては、今は静止画だけど、ふわふわーとフロートしてほしい。
自分勝手に丸が動いたり明滅したりしてほしい。ジェネラティブアート作ってみたい!
(あともう少しかな?)

☆参考図書(Processin非常にとっつきやすく感じる本。挿絵のイラスト可愛い。)

ラズパイ3にprocessing3.2.4を入れたお

 ラズパイ3に入れたprocessing3.2.3を起動しようとしたら、新しいバージョンが出たよって出てきた。

更新したほうがいいのかな。

やってみよう。
新しいバージョンprocessing3.2.4(2017/1/29リリース)入れるだけだよね、多分。

いつも(よくわからんまま)piユーザーでログインしているので、
/home/piのフォルダにprocessing-3.2.4-linux-armv6hf.tgzをダウンロードして展開したら行けるっしょ。

ダウンロードと展開方法

Processingの公式サイトのダウンロードページに行くと

Download \ Processing.org

3.2.4 (29 January 2017) Win 32/Win 64/Linux 32/Linux 64/Linux ARMv6hfMac OS X
と書いてある。
ラズパイ3に入れるならLinux ARMv6hfを選ぶようだな。
クリックしたら90.7MBダウンロードが始まった。どこにダウンロードされるんだ。

/home/pi/Downloads
の中にダウンロードされていた。
processing-3.2.4-linux-armv6hf.tgzというファイルを切り取り、/home/piのフォルダにペーストし、ファイルを右クリック→ここで展開をする。

processing-3.2.4というフォルダが出来て、processingのアイコンをクリックしたら3.2.4が無事に起動。

デスクトップアイコンの作り方

processingのアイコンを選択した状態で、編集→シンボリックリンクの作成→デスクトップを選択したら、デスクトップ上にprocessing3.2.4のリンクも出来た。

現在、私のラズパイ3の中には、processing3.2.3とprocessing3.2.4がある状態だけど、とりあえず動きそうだし問題なさそうかな。

雪だるまつくーろー♪(Processingで)

アナと雪の女王のBDを近所のゲオで借りてからというもの、繰り返し見ています。サントラもついでに借りて聴いてます。

 

ゆきだるまつくーろーが可愛い。軽く洗脳されかけてきている。

何度も聴いているうちに、雪だるまをProcessingで作りたくなってきました。

 

ただし、ドシロウトなので、力技で描きます。ラズパイだけを使って、ラズパイにあるソフトだけで、雪だるまを作ります。

 

まずアナと雪の女王に出てくる陽気な雪だるま=オラフの絵を探し、ラズパイ3にインストールしておいたinkscapeで大体の大きさがわかるように、定規を引き、大体の形に合わせて線をひいたり、丸を描いたりします。

大体あってりゃなんとかなる。

f:id:umesyurock0603:20170124011455p:plain

ざっくりとでいいんだよ。ざっくりとで!

つぎに、Processingを開いて、線を引いたり、丸をつくったり色塗ったりします。

参考図書は「遊んで学ぶはじめてのプログラミング Processingの魔法学校」です。この本のp.73 Lv2不思議な形 〜いろんな図形を描いてみよう〜あたりまでの知識を総動員して描いていきます。

f:id:umesyurock0603:20170124011816p:plain

f:id:umesyurock0603:20170124011836p:plain

f:id:umesyurock0603:20170124011850p:plain

 

どりゃーーーー!!!

f:id:umesyurock0603:20170124012028p:plain

出来ました。(所要時間、1時間半くらい)

 

ソースコードは狂気の沙汰だけど載せておく。

orafu.pde

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

size(640,480); //画面の大きさを決める
background(#9C9FFC); //背景を水色にする

//頭の毛を描く
stroke(0);
strokeWeight(1);
fill(#6C4623);
beginShape();
vertex(355, 134);
vertex(383, 98);
vertex(396, 93);
vertex(402, 99);
vertex(398, 89);
vertex(382, 93);
vertex(352, 131);
vertex(369, 100);
vertex(369, 61);
vertex(359, 47);
vertex(365, 65);
vertex(366, 99);
vertex(350, 130);
vertex(360, 101);
vertex(359, 79);
vertex(357, 81);
vertex(358, 98);
vertex(353, 89);
vertex(340, 81);
vertex(332, 86);
vertex(342, 86);
vertex(351, 92);
vertex(358, 104);
vertex(345, 135);
endShape(CLOSE);

//左手を描く
beginShape();
vertex(323, 294);
vertex(387, 253);
vertex(401, 241);
vertex(418, 239);
vertex(417, 235);
vertex(404, 236);
vertex(415, 229);
vertex(414, 223);
vertex(401, 234);
vertex(406, 219);
vertex(403, 217);
vertex(392, 242);
vertex(388, 233);
vertex(385, 234);
vertex(388, 243);
vertex(370, 257);
vertex(316, 287);
endShape(CLOSE);

//右手を描く
beginShape();
vertex(259, 290);
vertex(228, 260);
vertex(208, 224);
vertex(215, 215);
vertex(213, 213);
vertex(208, 218);
vertex(207, 211);
vertex(212, 191);
vertex(208, 192);
vertex(202, 208);
vertex(197, 192);
vertex(192, 192);
vertex(198, 212);
vertex(185, 198);
vertex(183, 203);
vertex(200, 221);
vertex(225, 263);
vertex(256, 297);
endShape(CLOSE);

//体を描く
ellipseMode(CENTER); // Set ellipseMode to CENTER
noStroke();
fill(255);
ellipse(340, 162, 79, 81); // Draw white ellipse
ellipse(320, 200, 115, 117); // Draw white ellipse
ellipse(300, 236, 74, 101); // Draw white ellipse
ellipse(287, 308, 93, 73); // Draw white ellipse
ellipse(335, 366, 147, 142); // Draw white ellipse
ellipse(315, 438, 54, 46); // Draw white ellipse
ellipse(415, 363, 40, 51); // Draw white ellipse

//口を描く
stroke(0);
strokeWeight(1);
line(290,162,285,168);
line(285,168,289,183);
line(374,213,367,222);
line(367,222,358,222);
line(309,207,326,217);
line(326,217,345,223);
fill(#5C7095);
beginShape();
vertex(289, 183);
vertex(309, 207);
vertex(305, 219);
vertex(321, 230);
vertex(339, 234);
vertex(345, 223);
vertex(358, 222);
vertex(321, 259);
vertex(301, 260);
vertex(287, 245);
vertex(283, 220);
endShape(CLOSE);

//まゆげを描く
fill(#6C4623);
beginShape();
vertex(350, 129);
vertex(332, 126);
vertex(321, 135);
vertex(333, 129);
vertex(347, 133);
endShape(CLOSE);

beginShape();
vertex(360, 134);
vertex(372, 147);
vertex(370, 160);
vertex(369, 148);
vertex(355, 138);
endShape(CLOSE);

//白目を描く
fill(255);
ellipse(327, 156, 30, 28);
ellipse(353, 167, 25, 30);

//黒目を描く
fill(0);
ellipse(328, 157, 15, 15);
ellipse(351, 167, 13, 14);

//黒丸を描く
ellipse(295, 302, 28, 27);
ellipse(321, 357, 29, 29);
ellipse(356, 375, 28, 29);

//鼻を描く
noStroke();
fill(#F7802F);
ellipse(340, 180, 32, 25);

//目に輝きを描く
fill(#B9ACA3);
ellipse(332, 157, 5, 5);
ellipse(355, 167, 5, 5);

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

この雪だるま、本当はつづりはolafuだけど、ちょっと角ばってるのでorafuくんということにしときます。

 

さぁ、このプログラムをいれたらProcessingで雪だるま作れるよ。雪だるまつくーろー♪

 

☆参考図書(Processingの勉強が心から面白いと感じる素晴らしい本です)

 

アナと雪の女王は素晴らしい映画だ。(洗脳された)

 

processingで雪見

 アナと雪の女王を久しぶりにBDで見た興奮から、ラズパイ3に入れたprocessingで雪の結晶作ったり雪を降らせることに強い関心を持っています。

とは言ってもprocessingはなんにもわかってないので、「snowflake processing」というキーワードで何か面白いのないかなーと探しまくっています。で、新たに2つ見つけました。

(1)クリックして雪の結晶作るよ

www.openprocessing.org

OpneProcessingとは何だろう(Processingで作成されたプログラムの投稿サイトっぽいですね→OpenProcessingがリニューアル! : だらっと学習帳)。

 

どうやら、マウスでクリックしたらランダムに雪の結晶を生成してくれそうです。

下記をコピーして、processing開いて貼り付け、名前をつけて実行します。

----------------
float dRam = 140; //dlugosc ramienia
float bRam = 7; //szerokosc ramienia
int ilR = 7; //ilość rekurencji

int ilRam = 6;

void setup() {
size(700, 700);
background(0);
noStroke();
smooth();
fill(255);
platekS(width/2, height/2, dRam, bRam, ilRam, ilR);
frameRate(29);
}

void draw() {
}
void mousePressed()
{
background(0);
ilRam = int(random(6)+3);

platekS(width/2, height/2, dRam, bRam, ilRam, ilR);
}

void platekS(float X1, float Y1, float H, float B, int ilRam, int ilRek)
{
int tabilRam = new int[ilRek];
float tabH = new float[ilRek];

float tabB = new float[ilRek];
float tabalfaR = new float[ilRek];

tabilRam[ilRek-1] = ilRam;
tabH[ilRek-1] = H;
tabB[ilRek-1] = B;
tabalfaR[ilRek-1] = 0;

for (int i = ilRek-2; i >= 0; i--) {
tabilRam[i] = int(random(6)+2);
tabH[i] = tabH[i+1]*random(0.5, 0.7);
tabB[i] = tabB[i+1]*random(0.4, 0.5);
tabalfaR[i] = random(HALF_PI, PI-HALF_PI/2);
print(i+": "+tabilRam[i]+" "+tabH[i]+" "+tabB[i]+" "+tabalfaR[i]+"\n");
}
platekR(X1, Y1, tabH, tabB, tabalfaR, tabilRam, ilRek);
}

void platekR(float X1, float Y1, float H, float B, float alfaR, int ilRam, int ilRek)
{
ilRek--;
if (ilRek+1 > 0 && ilRam[ilRek] != 0)
{
float alfa;
if(alfaR[ilRek] == 0)
alfa = (TWO_PI-alfaR[ilRek])/(ilRam[ilRek]);
else
alfa = (TWO_PI-alfaR[ilRek])/(ilRam[ilRek]-1);

pushMatrix();
translate(X1, Y1);
rotate(-(TWO_PI-alfaR[ilRek])/2);
for (int i = 0; i < ilRam[ilRek]; i++)
{

rect(0, -B[ilRek]/2, H[ilRek], B[ilRek]);
platekR(H[ilRek], 0, H, B, alfaR, ilRam, ilRek);
rotate(alfa);
}
popMatrix();
}
}
----------------
クリックするごとに、新しい雪の結晶ができるのです。これもまたすごい。

f:id:umesyurock0603:20170122022529p:plain

f:id:umesyurock0603:20170122022543p:plain

f:id:umesyurock0603:20170122022554p:plain


いいねぇ。。。こういうのいいね。
自動的にランダムに現れてくれたらもっと嬉しいなぁなんて贅沢なことを言ってみる。

あと色も青白くしたり発光しているように見せたり、ガラスのような質感に見せるようにしたり、したい。(そんな技術力がほしい!)

 

(2)クリックして雪の結晶作るよ

solemone.de


こっちは雪が降る様子を眺められる。
---------------
int quantity = 300;
float xPosition = new float[quantity];
float yPosition = new float[quantity];

int flakeSize = new int[quantity];
int direction = new int[quantity];

int minFlakeSize = 1;
int maxFlakeSize = 5;

void setup() {

size(800, 350);
frameRate(30);
noStroke();
smooth();

for(int i = 0; i < quantity; i++) {
flakeSize[i] = round(random(minFlakeSize, maxFlakeSize));
xPosition[i] = random(0, width);
yPosition[i] = random(0, height);
direction[i] = round(random(0, 1));
}

}

void draw() {

background(0);

for(int i = 0; i < xPosition.length; i++) {

ellipse(xPosition[i], yPosition[i], flakeSize[i], flakeSize[i]);

if(direction[i] == 0) {
xPosition[i] += map(flakeSize[i], minFlakeSize, maxFlakeSize, .1, .5);
} else {
xPosition[i] -= map(flakeSize[i], minFlakeSize, maxFlakeSize, .1, .5);
}

yPosition[i] += flakeSize[i] + direction[i];

if(xPosition[i] > width + flakeSize[i] || xPosition[i] < -flakeSize[i] || yPosition[i] > height + flakeSize[i]) {
xPosition[i] = random(0, width);
yPosition[i] = -flakeSize[i];
}

}

}
---------------

f:id:umesyurock0603:20170122023747p:plain

(画面キャプチャしたので、静止画ですが。。。)
実際は雪が降ってます。しんしんと雪が降っている。

 

processing楽しいなー!この魔法のようなプログラミング言語をもっと学びたい!!

processingで雪の結晶作りたい

 アナと雪の女王をBD借りて見てたら、雪の結晶が綺麗で、自分で作りたくなったので、ラズパイ3に入れたprocessingで作れないかなーと探してみた。

(なお、ラズパイ3にprocessing3.2.3を入れる方法は下記参照のこと)

umesyurock0603.hatenablog.com

まずは先人の知恵を借りる。 

haukun.projectroom.jp

いるじゃないか。processingで雪の結晶作ってる人!これだよ!去年(2016年)のクリスマスのアドベントカレンダーでやってはったのか。

リンク先のソースコードをコピーする。

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

// パーティクルクラス
class P {
float ang; // 進行角度
PVector pos; // 位置
float v; // 速度
int depth; // 深さ
float size; // 大きさ

P() {
pos = new PVector();
}

// 初期化
void init(float _ang, float x, float y, float _v, int _depth, float _size) {
ang = _ang;
pos.set(x, y);
v = _v;
depth = _depth;
size = _size;
}

// 子として生まれる
void born(P p, float _ang) {
ang = p.ang + _ang;
pos.set(p.pos.x, p.pos.y);
depth = p.depth - 1;
v = p.v * (0.4 * depth) * (random(0.2) + 0.8);
size = p.size;
}

// 描画動作
void act() {

// パラメータ変更
pos.add(cos(ang) * v, sin(ang) * v);
v -= 0.02;

// 描画
translate(width / 2, height / 2);
for (int i = 0; i < 6; i++) {
ellipse(pos.x, pos.y, size, size);
rotate(radians(60));
}
translate(- width / 2, -height / 2);
}
}

ArrayList<P> perticles = new ArrayList<P>();
float generateRatio; // 子供性確率変数
float waitCount; // 描画終了後の待機時間

//-------------------------------------------------
// setup
//--------------------------------------------------
void setup() {
background(0);
size(700, 700);
init();
}

//--------------------------------------------------
// 初期化処理
//--------------------------------------------------
void init() {
fill(255, 255);
noStroke();

perticles.clear();

P p = new P();
p.init(random(60), 0, 0, random(2) + 2, 3, random(3) + 1);
perticles.add(p);

generateRatio = random(0.03) + 0.02;
}

//--------------------------------------------------
// draw
//--------------------------------------------------
void draw() {

if (perticles.size() == 0) {
waiting();
} else {
drawing();
}
}

//--------------------------------------------------
// 描画完了後の余韻
//--------------------------------------------------
void waiting() {
fill(0, 8);
rect(0, 0, width, height);
waitCount++;
if (waitCount >= 50) {
waitCount = 0;
init();
}
}

//--------------------------------------------------
// 描画メイン処理
//--------------------------------------------------
void drawing() {

ArrayList<P> childs = new ArrayList<P>(); // 今回生まれた子
ArrayList<P> deads = new ArrayList<P>(); // 今回死ぬパーティクル

for (P p : perticles) {
p.act();
if (p.v <= 0) {
deads.add(p);
}

if (random(1) < (generateRatio * p.depth)) {
float r = random(30) + 20;
P child1 = new P();
child1.born(p, radians(r));
childs.add(child1);
P child2 = new P();
child2.born(p, radians(-r));
childs.add(child2);
}
}

// リストから生まれた子を追加
for (P child : childs) {
perticles.add(child);
}

// リストから死んだ子を削除
for (P dead : deads) {
perticles.remove(dead);
}
}

void mouseClicked() {
init();
}

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

 そしてprocessingを開く。コピーしたソースコードペーストする。名前をつけて保存する。

f:id:umesyurock0603:20170121215603p:plain

実行ボタンを押す

f:id:umesyurock0603:20170121215652p:plain

f:id:umesyurock0603:20170121215706p:plain

 そうすると、上記のような雪の結晶が中央からファーっと出来ては消え、出来ては消えを繰り返すのでありました。

綺麗!すごい綺麗だなぁ。眺めているだけで楽しいです。

 

あとはそうだなぁ、この雪の結晶のバリエーション増やしてみたいなとか、キラキラ舞わせてみたいなとか、もう少し青色がかった透明な感じにしたいなとか、ディズニーの魔法のようになんか出来ないかなとか、やりたいことは思いつくんだけど、技術が足りない。processingの本読んで、できること増やしていきたいなぁ。

雪の結晶がどう成り立つのかとか、そこも勉強したい。どんな種類があるのかとか。

 

※ちなみに、アナと雪の女王は、地上波で3/4に放映されるそうですね。。。

natalie.mu

ラズベリーパイ3にprocessing3.2.3をインストールする方法

ラズパイ3でprocessingを遊べたら大変楽しそうだなと思って調べたところ、下記サイトを発見。私がやりたいことはたいていからあげさんがすでに何年か前にやっている、ということにつくづく気付かされる。

karaage.hatenadiary.jp

人の顔を認識してアヘ顔にチェンジするのもやってみて成功しているんだけど、今回はとりあえずそれは置いておいて、processing入れるところだけをメモ書きしておく。
からあげさんのを見ると、processing3.0.1を入れているようですが、
https://github.com/processing/processing/releases
を確認すると、最新バージョンは3.2.3みたいです。(2016/11/7リリースされてんのかな)


LX Terminalを起動して下記を入れていく。

$ wget https://github.com/processing/processing/releases/download/processing-0255-3.2.3/processing-3.2.3-linux-armv6hf.tgz

$ tar xvzf processing-3.2.3-linux-armv6hf.tgz

$ cd processing-3.2.3/

$ ./processing

f:id:umesyurock0603:20170121214212p:plain

ほら、ラズパイ3にプロセッシング3.2.3入ったよ!

 

processingはまだまだ全然勉強してないんで、こっちも勉強していきたんだよー!

今、読み始めている本が下記の「遊んで学ぶはじめてのプログラミング Processingの魔法学校」なんだけど、面白いんだよ。。。全部読んでないから、まだ言えないけど、しょっぱなから面白そうなんだよ。Processingで魔法を使うってのが、夢が広がるじゃない。キャラも可愛いし、このProcessing本、読むぞ!!!