差分
このページの2つのバージョン間の差分を表示します。
| 両方とも前のリビジョン 前のリビジョン 次のリビジョン | 前のリビジョン | ||
| lecture:design_with_prototyping:p5.js編:11.ピクセル再構成 [2021/03/02 23:52] – [線の本数や頂点座標のずらし方を変更してみる] baba | lecture:design_with_prototyping:p5.js編:11.ピクセル再構成 [2021/05/11 15:25] (現在) – [Sample04] baba | ||
|---|---|---|---|
| 行 126: | 行 126: | ||
| for (let j = 0; j < sample_image.width; | for (let j = 0; j < sample_image.width; | ||
| let c = sample_image.get(j, | let c = sample_image.get(j, | ||
| - | let gray = (blue(c)+green(c)+blue(c))/ | + | let gray = (red(c)+green(c)+blue(c))/ |
| stroke(gray); | stroke(gray); | ||
| point(j, i); | point(j, i); | ||
| 行 300: | 行 300: | ||
| } | } | ||
| </ | </ | ||
| + | |||
| + | |||
| + | <WRAP center round todo 60%> | ||
| + | < | ||
| + | let char_typed; | ||
| + | function keyPressed(){ | ||
| + | char_typed = key; | ||
| + | } | ||
| + | </ | ||
| + | というコードをsketch.jsに追記してあげると入力した文字を char_typed というグローバル変数に保存しておくことができます。これを利用してA以外の文字でピクセル表示に切り替えられるようにプログラムを書き換えて見ましょう。 | ||
| + | </ | ||
| + | |||
| ===== 文字の複雑さを濃度として考え、ピクセルを描画する ===== | ===== 文字の複雑さを濃度として考え、ピクセルを描画する ===== | ||
| 行 455: | 行 467: | ||
| <WRAP center round tip 60%> | <WRAP center round tip 60%> | ||
| ここまで学習した内容から、単位を別のなにかに置き換えることでスーラの絵画を再構成してください。 | ここまで学習した内容から、単位を別のなにかに置き換えることでスーラの絵画を再構成してください。 | ||
| + | * Hint | ||
| + | * 文字をピクセルにしたように、様々な文字（漢字やカタカナ等）も単位として表現しても良いかもしれません | ||
| + | * beginShape()にLINESやTRIANGLE_FAN等を使って表示した場合どのようになるか試してみると良いかもしれません。 | ||
| + | * 出力した結果がもとの絵からかけ離れてしまっても面白いかもしれません。 | ||
| </ | </ | ||