花束シミュレーター 第6話 「ちょっといい感じ?」

Content image

 

 

 

こんにちは、もなかです。

前回からp5.jsで制作をしています。

 

機能の追加していく!

p5.jsでシミュレーターの大枠を作り、いくつか機能をつけました。

 

・茎の色 6色
線(茎)を描く時に選びます。
色を選んでいる状態で線が描け、花を選んでいる状態では花を描くことができますが線は描けません。
if文で条件分岐して設定しました。

・線の太さ
4,8,12の3種類を設定しました。

・とりあえず花になるであろうペン先 2種類(仮)
今後花っぽい形にしていき、種類ももう少し増やします。

・選択している状態のハイライト
茎の色選択はstrokeで縁取り、太さの選択はfillで色を変更。
これもif文ですね。

・all clearボタン
ボタンが押された時、setupに入れていたcreateCanvasとbackgroundをもう一度実行してまっさらにしてからredrawでパレットを再表示させます。
アラートとか出ないので注意が必要です…

 

 

選択ハイライトの動画です〜↓↓↓

 

 

 

 

Article date Article like Article tip Article supporter
公開日 いいねによる獲得 投げ銭による獲得 サポーター
: : :
2019/12/10 29.34 ALIS 1.10 ALIS
もなか's icon'
  • もなか
  • @ugok-mnk
UGOK-2nd 花束シミュレーター制作中!
コメントする
コメントする