傘持ち

突然だが、自分は傘がそこまで大好きという訳ではない。
そんなまさかって??いやいや、本当にそうなのだ。
最近熱中出来る物が無くて、時間が遅々として進まない。そこで何かに打ち込みたいと思い立ち、思いついたように「少し気に入ってる」程度の物を追求している。 もしかしたら熱中出来るような何かがあるかもしれないと、一縷の望みを賭けて。
傘も、そんな言ってしまえば『暇つぶし』のうちの一つだ。

まぁ、嫌いという訳ではないし、それなりには気に入ってるのは確かだ。
追求を続ければ、知識も増えるし愛着も湧く。
授業課題で『何か作れ』と無茶振りされた時に、選べるものがあるのは心強い。

『月奴』という模様で、つきやっこと読む。冷奴では無い、月奴だ。
そういえば「冷奴と書いて『cool guy』、『イケてるヤツ』って意味なんだろ??」と発言した外国人の話を思い出した。
その理論で言えば、月奴は『イカれたヤツ』だろうか。『lunatic guy』…ちなみにルナティックに良い意味は無い。

そんなイカれたヤツこと月奴だが、端材が出ないように、↑画像で言うと「赤い丸」と「白い月」で新たな月奴を作るという。 月奴の和傘を見かけたら、どこかに片割れが居るのかな…などと思いを馳せてみてはどうだろうか。


p5js

で。
授業課題。p5.jsを習った。
アーティストに愛用されており、プログラミングの触り始めに適している…と、x-techの生徒との親和性は高い…と思ってたけどやっぱりアイツら来ねぇ。
いやまぁ、難しかったけど。基本と言うか基礎の部分だし、これから触れていく、基礎の上に積み上がる部分のことを考えると大分大事な授業だと思ったのだが…。
まぁ、何か考えはあるのだろうし、置いておくとして。授業内容に触れて行こう。

基本構造はfanction setup(){}とfanction draw(){}。
setupの{}内が最初に一度だけ実行される内容で、drawの{}内がその後に繰り返し実行される内容。
イチゴジャムで
1
2
3
4
5
とか書いて、5の所に
5 goto'3'
とか書いたのを思い出した。
アレで言うと、1と2がfanction setupで3,4,5がfanction draw、だろうか。

色指定は初期設定で数値が3つ並んでいるとrgbで、一つの時は白黒。例えば背景色を指定するときは
background(赤の値, 緑の値, 青の値);
と書く。
モノクロの場合は
background(白の値);
こんな感じ。

数値は0~255で、rgbが(255, 0, 0)なら赤、(255, 255, 255)なら白、(0, 0, 0)なら黒。そして(255, 255, 0)なら黄色…ん??←詳しくは光の三原色で検索。
モノクロの方は(0)なら黒、(255)なら白。
ちなみに、なんで上限が255なんて中途半端な数値かと言うと多分0~255で全256、2の累乗の為だと思われる。

座標指定は初期設定で左上を基準点0,0とする。
基準点は変更出来て、fanction setupの{}の中にでも
translate(width/2, height/2);
と書けばキャンバスの中心が基準点となる。

描ける図形は
楕円
ellipse(中心点のx座標, 中心点のy座標, 楕円の横幅、楕円の縦幅); //幅と高さを合わせれば円になる

ellipse(中心点のx座標, 中心点のy座標, 円の直径);
三角形
triangle(点1のx座標, 点1のy座標, 点2のx座標, 点2のy座標, 点3のx座標, 点3のy座標);
長方形
rect(始点のx座標, 始点のy座標, 長方形の幅, 長方形の高さ);

line(始点のx座標, 始点のy座標, 終点のx座標, 終点のy座標);
円弧
arc(円の中心点x座標, 円の中心点y座標, 円の横幅, 円の縦幅, radians(<角度1>), radians(<角度2>), OPEN); //<角度>は円の右を0として、 360まで指定可能(角度が一周360°のため)。角度1と角度2が0と360なら◯が、45と315ならcが出来る。なお、最後のOPENをPIEにするとピザみたいなのが出来る。

図形の枠線はstrokeで、
stroke(赤の値, 緑の値, 青の値);
stroke(白の値);
strokeWeight(線の幅);
noStroke(); //線なんて要らねぇ、って時に。()の中は空っぽでok。

乱数を扱いたい場合はrandomとnoiseがある。違いについては↓画像を見たら感覚的に分かってくれるはず

詳しい説明は こちらを参照

さっきから使ってる//はコメントアウト。説明文を色々書ける。絶対書いたほうがいい。だって、後になると自分が書いたコードが何を意味してんのか分からなくなるから。
...いや、マジで。
使い方は簡単で
//ここに色々書けるよ
こんな感じ。複数行に渡る時は
/*
ここに書けるよ
ずっと書けるよ
*/
こんな感じ。

後、大前提として配置した図形は記述した順に重ねられるので、後に描いた図形が上に重なる。
フォトショのレイヤーのようなものと言えば分かりやすいか。


月奴

月奴の作り方の解説に入ろう。
傘布・傘骨・頭紙の三パーツで構成されている。
傘布は簡単で、ellipseを使って濃い赤の円、それより少し小さい赤円、中心をずらした白円の三つで構成されている。

傘骨の方は面倒だ。
線の長さと太さ、そして角度を指定するのだが。
長さや太さはともかく角度とは何かと言うと、指定した角度に沿って線分を360°配置する、と言うものだ。
性質から360の約数でないと歪な配置となってしまう。
今回は角度7.5度を指定して、三角関数を使って算出した。
線の長さと太さを指定して、最後に実際に線を引かせる。

頭紙は四角形5個をサイコロの5の目のように配置。
その下に風車状の扇四つを配置して、少し濃ゆい色の枠線を付ける。
一番上に円を配置して、完成。
外周の色変更でいい立体感が出せたと思う。


まとめ

白状すると、傘骨部分はどーしても実現出来なかったのでコピペした。数値やらなんやらは弄ったが。
プログラムと言うものの難解さの一端に触れた、そんな授業だった。


リンク集

p5js
↑のウェブエディタ
パーリンノイズ