差分
このページの2つのバージョン間の差分を表示します。
| 両方とも前のリビジョン 前のリビジョン 次のリビジョン | 前のリビジョン | ||
| lecture:design_with_prototyping:p5.js編:12.動画の再構成 [2021/05/18 13:12] – [明るさを円の大きさで描く] baba | lecture:design_with_prototyping:p5.js編:12.動画の再構成 [2021/05/19 08:56] (現在) – [技術小話（canvasで描いた内容を動画で保存する）] baba | ||
|---|---|---|---|
| 行 78: | 行 78: | ||
| を | を | ||
| < | < | ||
| + | const i = y * width + x; | ||
| color(video.pixels[i * 4], video.pixels[i*4+1], | color(video.pixels[i * 4], video.pixels[i*4+1], | ||
| </ | </ | ||
| 行 182: | 行 183: | ||
| 下記サンプルは5ピクセルごとに線を引き，各頂点の明るさに応じてy座標を少しずらしています．描いてるのはたった100本程度の線ですが，私たちはこれをみて人間がいることがわかります。このように線を描く，四角や三角，丸などの基本図形を用いて，動画データを再構成してみましょう．表示結果に失敗はありません．どのようなプログラムがどのような表現に結びつくのかを楽しみならが学んでください． | 下記サンプルは5ピクセルごとに線を引き，各頂点の明るさに応じてy座標を少しずらしています．描いてるのはたった100本程度の線ですが，私たちはこれをみて人間がいることがわかります。このように線を描く，四角や三角，丸などの基本図形を用いて，動画データを再構成してみましょう．表示結果に失敗はありません．どのようなプログラムがどのような表現に結びつくのかを楽しみならが学んでください． | ||
| + | <WRAP group> | ||
| + | <WRAP half column> | ||
| <file js sketch.js> | <file js sketch.js> | ||
| let video; | let video; | ||
| 行 210: | 行 213: | ||
| } | } | ||
| </ | </ | ||
| + | |||
| + | </ | ||
| + | |||
| + | <WRAP half column> | ||
| + | {{: | ||
| + | </ | ||
| + | </ | ||
| ===== アスキーアートで描く ===== | ===== アスキーアートで描く ===== | ||
| 行 219: | 行 229: | ||
| </ | </ | ||
| + | |||
| + | ===== 技術小話（canvasで描いた内容を動画で保存する） ===== | ||
| + | 作ったエフェクトを課題等で動画形式に変換して提出する場合，chromeブラウザで動作させているのであれば，webm形式で保存するのが簡単です．以下のページにtemplateがあります． | ||
| + | * [[p5js: | ||
| + | |||
| + | ただし上記ファイルは p5canvasRecording.jsという別ファイルを読み込んでいるので，一旦作ってしまった課題ファイルとガッチャンコするのは初学者の場合は少し大変かなとおもいました．そこで，このページの課題を動画形式にで保存するための雛形も合わせて準備しておきました．「自作エフェクトを動画で提出しなきゃ」という場合は以下のtemplateを利用してください． | ||
| + | * https:// | ||
| + | |||
| + | テンプレートを利用して保存した動画ファイルの例を以下に示します．現時点（2021年5月19日）ではGoogleの独自形式なため，FirefoxやSafariでは再生できないことにご注意ください．このページをChromeブラウザで開いている場合に以下の動画を閲覧できます． | ||
| + | {{ : | ||
| ====== 作品ギャラリー ====== | ====== 作品ギャラリー ====== | ||
| - | {{gallery> | + | 課題提出物を一部抜粋してご紹介します． |