イイダリョウのブログ。ブログp5.jsの続きです。前回はいろんな図形をcanvas要素に配置してみました。次のステップに進むにあたり、ちょっと方向性が見えにくかったため、習得の上で参考になりそうなサイトや書籍をいろいろ調べてみました。Started」でp5.jsをゲッティングしてスターティドしたわけです。p5.jsそのあとに「Reference」に進み一番上の「Color」はパッと見で意味がわかる感じだったので後回しにし、次の「Shape」(形状)に進んだ。Started」のcanvasに配置した感じです。p5.jsその次の「Attributes」以降もざっと見てみたんだが、なんつーか、あまりにも網羅的というか断片的というか。自分がまずやってみたいのはパーティクルのインタラクティブなモーションで、そこに向かうにあたってもう少し系統立てて理解ができるサイトがないか...。このページにはp5.jsを拡張するライブラリの一覧があった。上の3つ(p5.dom、p5.sound、p5.accessibility)が公式ライブラリのようだ。サウンドもあるのは嬉しい。p5.jsこちらのページにはサンプルがたくさんある。p5.jsちなみにp5.jsの日本語公式サイトもあったが、翻訳はあまり進んでいない様子...。休日に書店でこんな本を見つけた!※参考:p5.js版ジェネラティブデザインものすごく分厚いがサンプルがアーティスティックでカッコいい!しかし、内容的にはビジュアルコーディングがメインで、拡張ライブラリであるDOM(p5.dom)や音声(p5.sound)などのWebならではのライブラリは扱われていない。p5.jsこれはかなり分厚くて重たいので購入に勇気はいる。―ウェブでのクリエイティブ・コーディングなな、なんちゅー大判振る舞い!!もしかしたらp5.jsの基本を身につけるとこのソースコードを読む解くことができるのではないかな、という淡い期待もちなみに「ジェネラティブデザイン」は元々はProcessing版の名著があり、それのp5.js版。Design-Processingで切り拓く、デザインの新たな地平ブログ「infosmith.biz」p5.jsについて調べているとフリーランスライター・編集者の柴田克己さんが運営されているブログ「infosmith.biz」の記事に高確率で遭遇する!ブログ自体の記事一覧を見てもp5.jsネタはかなりの比重になっており、日本のp5.js情報発信の第一人者ではなかろうか、と思っている。※参考:infosmith.bizドットインストールなんと、ドットインストールにもp5.jsの講座があった!!2つあった。※参考:https://dotinstall.com/lessons/basic_p5js※参考:https://dotinstall.com/lessons/creativecoding_intro_p5jsこちらはもちろん日本語だし動画の長さ的にはダン先生よりコンパクト。無料枠で全編が見れそうだし、ダン先生の前にこちらを見てみようかな。Train」というYouTubeチャンネルがあって、陽気なダン先生がプログラミングを解説してくれている。YouTubeなぜか「15」が見つからない。YouTube動画自体は英語なんだけど、YouTubeの「自動翻訳」で「日本語」を選択するとすごく自然な日本語字幕で動画を見ることができる!Googleの翻訳機能は磨きがかかっているなぁ。自分がやり方がわからないだけかもしれないけどスマホアプリのYouTubeではこの「自動翻訳」が見当たらず、英語の字幕になってしまう。PCブラウザでしか見れないとしたらそれは制限になる。※2019/08/27追加これもかな?Nodeとかサーバサイドがからみそう。YouTube習得の展望(着手する優先順位)いろいろ調べた結果、このような順番で進んでみようかと思う。Trainを自動翻訳で見る(PC前提?)公式リファレンスを見直す(ここで体系的な手順が見えたら着手する)ジェネラティブデザインのサンプルを見る(ここで理解できたらカスタマイズ)ジェネラティブデザインのサンプルが理解できなかったら書籍を購入あとはググる。「infosmith.biz」の記事は引き続き遭遇すると思うのでお世話になる。最後に:ブログの更新形態について自分はブログの形態として、ある程度のボリュームのソースコードと完成物を載せることを意識していたが、その工程(=実装フェーズ)を前提にすると、その前の構想、調査、検証など(=設計フェーズ)の間、ブログを更新できないことがわかった。それが結構なストレスでだんだんと気分が落ちてくる。今後は肩の力を抜いて設計フェーズ段階でも気軽に「脳内会議」的な形でブログを更新していこうと心に決めた。これまで、何かシリーズを始める初期の段階では設計フェーズ的な記事もあったのだけど、走り出したら実装フェーズの記事を載せ続ける前提にしていた。すると途中で手こずったときに動きが鈍くなってしまう。途中途中の段階でも再設計フェーズになったらその状態を記録していきたい。ブログのアジャイル開発。Proccessing」のチュートリアルなのかも。Train(...p5.jsの続きです。Coding...p5.jsの続きです。1.1...p5.jsシリーズの続きです。はてなブログProフロントエンドエンジニア。神奈川に住まう四十路のオジキ。DTP→Webデザイナーから転向し今に至る。引き続きコツコツの日々。(24)リンクTwitterInstagramYoutubeCodePenGitHubPinterestQuolaFacebooknoteQiitaはてなブログをはじめよう!idr_zzさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。