だらっと学習帳

Processingとか p5.jsとか 好きです



というわけで本記事ではキラキラ✨ゆめかわいい🦄銀河のメイキングを書いていきます！
(なお、デイリーコーディング用のコードから少し手を入れました)

イメージはこんな感じ↓ですね。
ゆめかわいい 銀河 - Google 検索
こちらの描き方を参考にコーディングしました。
Tutorial - How to Draw a Galaxy by Sugary-Stardust on DeviantArt

ステップごとに様子がわかりやすいようにrandomSeed()を入れていますが、実際には入れなくてokです。

まずは適当なにょろにょろ線を描いていきます。
ランダムな太さの線でランダムな頂点位置のcurveVertexを描きます。


See the Pen
galaxy01 by reona396 (@reona396)
on CodePen.



にょろにょろ線を増やします。


See the Pen
galaxy02 by reona396 (@reona396)
on CodePen.



ちょっとおさまりが良すぎるので線がキャンバスからはみ出すように修正します。


See the Pen
galaxy03 by reona396 (@reona396)
on CodePen.



ゆめかわいいカラーセットを用意して背景色と線の色をランダムに設定します。


See the Pen
galaxy04 by reona396 (@reona396)
on CodePen.



ここが最大のポイント！
がっつりぼかします。
コイツが噂の禁断の果実です🍎


See the Pen
galaxy05 by reona396 (@reona396)
on CodePen.



異なるぼかし具合の白い点々を上から重ねます。
ラメとお星さまのイメージです🌟


See the Pen
galaxy06 by reona396 (@reona396)
on CodePen.



できあがりです！！
キャンバスの大きさや星の個数を調整したらこんな感じになります。
ダウンロード - 2021-02-26T234516.462
ぼかしがこれだけがっつり入れられて、しかも実行速度そんなに遅くないっていうのはホントありがたいですね！
ぜひゆめかわいい銀河描いてみてください〜🌟🦄🎀💜✨
  • カテゴリ:
    p5.js
  • by
このエントリーをはてなブックマークに追加

#PCD2021 Japanおつかれさまでした〜！

webサイト :
Processing Community Day Japan 2021
チケットページ :
Processing Community Day Japan 2021 | Peatix
Twitterアカウント :
PCD Japan (@PCD_Tokyo) / Twitter

前々回、前回に引き続き今回もスタッフとしてお手伝いさせていただきました！
オンラインならではの盛り上がりを体感できるイベントでしたね！

アーカイブはこちらのYoutubeチャンネルからどうぞ！
Processing Community Japan - YouTube

今回は主にオンラインキャンプのメンター&スーベニアショップまわりを担当しました。

PCD Japan 2021オンラインキャンプとして、Processingルーキーの方々に1週間ほどでTシャツのデザインをお願いしました。
私はその間の技術サポートやデータの取りまとめ、ショップまわりの設定などをやりました。
今回の企画のアイデア元は↓のような感じでした。

スーベニアショップぜひぜひチェックしてください！
▼▼▼
PCD Japan スーベニアショップ ( PCD_Japan )のオリジナルアイテム通販 ∞ SUZURI（スズリ）

また、光栄なことにシークレットゲストであるシフマン先生に自分の作品を見て&遊んでいただきました。
憧れのコーダーなのでとても嬉しかったです！

デイリーコーディング週間にも参加していました。
無事に完走できてよかったです！
↓の記事にまとめているのでぜひこちらもチェックしてください！
PCD2021 デイリーコーディング週間 作品まとめ : だらっと学習帳
3Dギャラリーもめちゃかっこよかったですよね！

あらためて、PCDスタッフの皆様、登壇者の皆様、参加者の皆様、おつかれさまでした！
今後とも日本と世界のProcessingコミュニティを盛り上げていきましょう！！
このエントリーをはてなブックマークに追加



やっていきますわよ(デイリーコーディングお嬢様)
随時更新予定→完走しました！やったー！

過去のデイリーコーディング記録 :
Codevember完走しました2019！ : だらっと学習帳
dailycodingchallenge日記 : だらっと学習帳




草原っぽいカラーセットで線を重ねてみました。
草や風の流れ、あと草花で編んだかんむりのイメージです。
図形自体はnoiseで形作ったうずまき状の線で、10本描くごとに角度を変えています。
完成後にネギっぽい色合いに見えてしまって以来、ネギにしか見えなくて困っています。


最近勉強中のdrawingContext.clipで魚の形に抜いてみました。
ベースには海っぽいカラーセットの直線を重ねています。
さらに、魚それぞれにdrawingContextでシャドウもつけています。
drawingContext.clip、色々使えそうなんですがまだ全貌をつかめていません…


noiseを使って空っぽいドット絵を描きました。
ひとつ前のお題が「海」だったので、そこと違いをつけるのに苦労しました。
あまり複雑な模様にしすぎると雲っぽくならないので、ふわふわ感の出るパラメータを探し出しました。


桜の花の図形をnoiseであえて歪ませて、手描きっぽい質感を出しました。
塗りつぶしもグラデーションで色ムラっぽくしています。
また、背景も画用紙のイメージでザラつきを持たせました。


砂漠というワードから最初に思い浮かんだのは、スターウォーズに出てくる砂漠の惑星でした。
ということで、宇宙に浮かぶ砂漠の星を描きました。
「横長のキャンバスの真ん中にドーンとオブジェクトを描く」配置をよくやってしまいがちなので、
今回は複数のオブジェクトを奥行を持たせて配置してみました。


ゆめかわいいデザインではおなじみ、水色〜紫〜ピンクを織り交ぜた宇宙の模様を描いてみました。
ゆめかわといえばやっぱりこのキキララっぽいカラーリングですよね。
宇宙の描き方は下記のチュートリアルを参考にしました。
Tutorial - How to Draw a Galaxy by Sugary-Stardust on DeviantArt
それっぽい色合いのグニャグニャの線をたくさん引き、drawingContext.filter = 'blur(100px)'でぼかしました。
drawingContext.filter = 'blur(100px)'は初めて使ったんですがものすごい効能でびっくりしました！
いつか記事として書ければと思います。


昨日も使ったblurフィルタを再び使いました。これに頼りきりになりそうで恐ろしいです。
ブックカバーというお題にだいぶ苦戦しましたが、
子どもの頃漫画を買い揃えていった時に背表紙の絵がつながったりバリエーションがあったりしたのが好きだったことを思い出し、
分割された背表紙というテーマで描くことにしました。
emojiのうさぎ・鹿・鷹・象をeraseで抜いて、下にblurのマーブル模様を重ねました。
その後、バラバラに並べた本の背表紙のように見せるために分割して角度をつけて横に並べました。
以下のコードを再利用しています。
Flow of Water - OpenProcessing


というわけで完走しました！やったー！！！
今回のデイリーコーディングは短期だったので余裕を持って制作できました！
過去のデイリーコーディングよりは少し手間暇かけています。

ギャラリーもいいかんじに作っていただいているのでぜひチェックしてみてください！
このエントリーをはてなブックマークに追加

↑このページのトップヘ