クモのようにコツコツと

フロントエンドエンジニア イイダリョウの技術ブログ。略称「クモコツ」

トップ > JS > 【p5.js】楽しく学ぶ重要性：Coding Trainのダン先生に付いていく！(p5.js 1.1〜1.2)

【p5.js】楽しく学ぶ重要性：Coding Trainのダン先生に付いていく！(p5.js 1.1〜1.2)

JS p5.js

p5.jsシリーズの続きです。前回、「Generative Design with p5.js」のコードを見てみました。今回からはYoutubeの「Coding Train」チャンネルのp5.js動画をレビューしてみます。それではいきましょう！

【目次】

前回記事はこちら

※参考：【p5.js】Generative Design with p5.js「色 P_1_0_01」のコードを読み解く - クモのようにコツコツと

Coding Train（ダン先生）の魅力

Coding TrainはYoutubeのチャンネル。陽気なダン先生の写真が目に付くw

※参考：The Coding Train - YouTube

公式サイトもある

※参考：The Coding Train

Coding Trainについては前回記事でこう書いた。

できればCoding Trainを見て理解を深めたかったのだが、日本語自動翻訳がPCでしか見えないのがネックでなかなか見る時間を作れず…。

※参考：【p5.js】Generative Design with p5.js「色 P_1_0_01」のコードを読み解く - クモのようにコツコツと

しかし、休日に改めて見直してみると、ダン先生のハイテンションで楽しそうな講義がやはり魅力的で…改めて楽しく学べる重要性に気づいた。

このハイテンションな先生はいったい何者か？ 調べてみたところProcessingに関わるエンジニアとわかった

ダニエル・シフマンはProcessingというJavaベースのグラフィックス開発のプログラミング言語を作っている財団のリード・デベロッパーで芸術系の学校の准教授だそうだ。

※参考：ダニエル・シフマン(Daniel Shiffman)のCoding Trainが面白い。 - あれこれ備忘録@はてなブログ

Processingに関する本も書いている。

※参考：Nature-Code-Processingではじめる自然現象のシミュレーション

また、こちらの記事でも書いたが、Coding Trainではp5.js本体だけでなく拡張ライブラリであるp5.domやp5.soundなどにも触れられている。*1

※参考：p5.jsを習得するために参考になりそうなサイト、書籍、動画たち - クモのようにコツコツと

そうだ ブログに しよう

日本語字幕がPCでしか見られないのは自分にとって学習ハードルが高い。PC作業はブログを書く時間とかち合ってしまうため、動画は移動時間にスマホで見るのが最適。

しかし、PCでしか見れないハードルは他の人にとっても言えると思う。それならむしろこれをブログ記事の対象にして、Coding Trainの副教材的な位置付けを目指したい。*2

コード部分も、以前ドットインストールの時にやたようにCode Penにオンライン写経してブログに載せていきたい。

※参考：【p5.js】クリエイティブコーディングに挑戦（その1） - クモのようにコツコツと

それならブログを書く時間と動画を見る時間は共存関係になるわけだ！！

自動翻訳設定（PCブラウザのみ）

各動画の再生ボタンを押した直後にスタッフ！自動翻訳設定をしませう。（ただしPCブラウザのみ）

  • 動画右下の歯車アイコン（設定）を押す
  • 「字幕」を押す
  • （「英語-CC(English)」があれば選択）
  • 一番下の「自動翻訳」を開く
  • 一番下の「日本」を選択

これで字幕が日本語に自動翻訳される。「英語-CC(English)」のCCは「Closed caption」の略で「聴覚障害者向けの字幕」という意味。あらかじめ用意された字幕。音声を読み取った自動認識の字幕よりも精度が高いと思われる。

※参考：字幕とClosed Caption | TARORIN.COM

ただまあ、デフォルトの字幕を日本語に自動翻訳しても意味は通じると思う。（自分の環境ではなぜか「スペイン語」になっていることが多いけど、それを日本語に自動翻訳にしても支障はなかった。

あと、日本語自動翻訳は完全ではないようで、Coding Trainもスマホアプリは非対称っぽい。残念。

※参考：YouTubeの自動翻訳機能が便利！字幕翻訳をスマホアプリで見よう | スマホアプリやiPhone/Androidスマホなどの各種デバイスの使い方・最新情報を紹介するメディアです。

しかしながら、英語の字幕は表示されるので、わかる方はスマホで見るのもいいのではなかろうか。（私はわからない。。）

いずれにしても最近のGoogle翻訳やYouTube翻訳の機能向上はすごい！日に日に自然な文章になっていると感じる。

最初の再生リスト「Code! Programming with p5.js」

それでは早速見ていこう。まずは最初の再生リスト「Code! Programming with p5.js」から。いきなりテンションが高いタイトルw

※参考：Code! Programming with p5.js - YouTube

こちらの再生リストには連番の1〜7に当たる内容がある。

  1. Introduction
  2. Drawing
  3. Animation
  4. Interaction
  5. Modularity and Reusability
  6. Object-Oriented Programming
  7. Repitition and Duplication

「1. Introduction」から見ていく。

最初の動画「Code! Programming with p5.js for Beginners Trailer」

1の冒頭に短い挨拶動画があった。

※参考：https://www.youtube.com/watch?v=HerCR8bw_GE

www.youtube.com

  • チーン（ベルを鳴らす）
  • やあ！コーディングトレインにようこそ、私はダン
  • 私はここでプログラミングの基礎を教えている
  • プログラミング言語はJSを使う
  • ライブラリはp5.jsを使う。p5.jsは大きな心のようなものだ。
  • 描画、アニメーション、対話性、最後にはゲーム、アート、科学実験、パフォーマンス あなたが何を作るかわかりませんが私はあなたがそれを見つけることに興奮しています
  • ププー（笛を吹く）

こんな感じで日本語字幕の概要をメモしていく。

1.1: Code! Programming for Beginners with p5.js

「1. Introduction」の最初の動画はこちら。「1.1: Code! Programming for Beginners with p5.js」

※参考：https://www.youtube.com/watch?v=yPWkPOfnGsw

www.youtube.com

  • チーンとベルを鳴らし「こんにちは！最初のビデオにようこそ！」ハイテンション
  • この内容は数年前に作ったものと同じだが新しく公開された「p5.js web editor」を使いたいため作り直している
  • プログラムとは何か→コンピュータへの指示を書くこと
  • コンピュータに絵をかくための指示をかく→ウィンドウに長方形を書くなど
  • アルゴリズムは問題を解決するためのステップ
  • コンピュータには構文が必要→シンタックス＝JS
  • ライブラリ＝p5.js、組織＝Proccessing財団が作った
  • ProccessingはJavaで作られている
  • JSやp5.jsがPython、Cなど他の言語をやるきっかけになる
  • 最初はJSがメインだが後々はHTML、CSSについても触れることになる。Webの描画の基本。
  • p5.jsのWebサイト紹介
  • ProcessingのWebサイトの紹介
  • pt.js webエディターの紹介（ドラムロールでハイテンション）
  • 「関数setup、何それ？createCanvas、何それ？」次の動画で詳しく説明します！

こんな調子でハイテンションに実に楽しそうに解説している。

p5.js webエディターを紹介するために数年前の動画の内容を作り直したとのこと。

※参考：p5.js Web Editor

動画に登場するデフォルト画面（CodePenで再現）

See the Pen eYOvwre by イイダリョウ (@i_ryo) on CodePen.

画面上にはグレーの四角が表示されているだけ。

JSコード

function setup() {
   createCanvas(400, 400);
}

function draw() {
   background(220);
}
  • 関数setup()を設定
    createCanvas()の第一引数、第二引数ともに400
  • 関数draw()を設定 background()の引数220

これまでp5.jsを触ってきたのでここはわかる。ページ読み込み時にsetup()で400px四方のキャンバス要素を作っている。その後draw()で背景色を表示し続ける。引数が一つの場合はRGB3色とも同じ色。256階調（0〜255）なので薄いグレーになる。

1.2: p5.js Web Editor - p5.js Tutorial

次の動画「1.2: p5.js Web Editor - p5.js Tutorial」

※参考：https://www.youtube.com/watch?v=MXs1cOlidWs

www.youtube.com

  • ごめん、コードを書く前に説明したいことがあった！
  • Webエディターの使い方について
  • ブラウザでできる。Chromeのほか、なんでもいい。
  • コードを打ち変えて再生ボタンを押すと表示が変わる（background()の数値を打ち変えてみせる）
  • 作ったファイルを保存できるがサインアップが必要
  • サインアップの仕方
  • ファイル共有（Share）で共有できる、リンクや埋め込み
  • 上の鉛筆アイコンでプロジェクト名を付けれる
  • 設定の説明；文字サイズ、エディタの背景色、レイアウト変更
  • GitHub、Googleのソーシャルアカウントが使える
  • OK！次の動画ではちゃんとコードを説明するからね！

エディタの使い方を喋りながら背景色を打ち変えていた。

See the Pen p5.js (Coding Train 1. 2) by イイダリョウ (@i_ryo) on CodePen.

JSコードの変えた箇所

function draw() {
   background(220, 0, 200);
}
  • background()の3つの引数220 、0、200に。

background()の引数が3つになるとRGBそれぞれの値になるのでRが220、Gが0、Bが200になる。これで背景色は赤紫っぽくなった。

最後に

f:id:idr_zz:20190827070351j:plain

このように、Coding Trainの動画を見ながら、自分はp5.js web editorではなくCodePenの方にオンライン写経をしていきたく思います。そして動画の日本語自動翻訳の概要もメモしていきます。最初は簡単な内容だけどだんだん高度になっていくはずなので楽しみです。それではまた！！

※続き書きました！

www.i-ryo.com

※参考：p5.jsを習得するためにやった事まとめ qiita.com

*1:「Generative Design with p5.js」はp5.js本体のみだった

*2:「Generative Design with p5.js」は書籍も売っているしサンプルコードもオンラインで見れる。Coding Trainよりハードルは低い