差分

このページの2つのバージョン間の差分を表示します。

--- lecture:design_with_prototyping:p5.js編:11.ピクセル再構成 [2021/03/01 16:18] – [線で表現する] 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; j++) {
       let c = sample_image.get(j, i);
-      let gray = (blue(c)+green(c)+blue(c))/3;
+      let gray = (red(c)+green(c)+blue(c))/3;
       stroke(gray);
       point(j, i);
@@ 行 300: / 行 300: @@
 }
 </file>
+<WRAP center round todo 60%>
+<code>
+let char_typed;
+function keyPressed(){
+  char_typed = key;
+}
+</code>
+というコードをsketch.jsに追記してあげると入力した文字を char_typed というグローバル変数に保存しておくことができます。これを利用してA以外の文字でピクセル表示に切り替えられるようにプログラムを書き換えて見ましょう。
+</WRAP>
 ===== 文字の複雑さを濃度として考え、ピクセルを描画する =====
@@ 行 440: / 行 452: @@
 ==== 線の本数や頂点座標のずらし方を変更してみる ====
 次はプログラムを少し最初に戻して，描く線にアルファ値をもたせてみます．アルファ値とは
-透明度のことで，詳細は https://processing.org/tutorials/color/ を参照すると
+透明度のことで，詳細は https://p5js.org/reference/#/p5/alpha を参照すると
 よいでしょう．
-この透明度を利用し，これまで真っ黒で書いていた線に対して一定の透明度をつけてみます．
+この透明度を利用し，これまで真っ黒で書いていた線に対して一定の透明度（stroke(0,0,0,100);）をつけてみます．
-実行結果とプログラムは下記の通りです．面白いことに結果として得られた画像は，デプスマップ（深度情報）
+実行結果とプログラムは下記の通りです．面白いことに結果として得られた画像は，凹凸がついた銀盤のように見えますね。なお下記画像のパラメータは
-を持った画像のように見えますね．
+  * x_step = 1;
+  * y_step = 1;
+  * y_max = 5;
+としています。
-{{ :lecture:design_with_prototyping:pixel_sample12.png?nolink |}}
+{{ :lecture:design_with_prototyping:p5.js編:11-line-sample03.png?nolink |}}
-<file .pde sample12.pde>
-PImage img;
-img = loadImage("sample.jpg");
+<WRAP center round tip 60%>
-size(800, 597);
+ここまで学習した内容から、単位を別のなにかに置き換えることでスーラの絵画を再構成してください。
-imageMode(CENTER);
+  * Hint
-noFill();
+    * 文字をピクセルにしたように、様々な文字（漢字やカタカナ等）も単位として表現しても良いかもしれません
-background(255);
+    * beginShape()にLINESやTRIANGLE_FAN等を使って表示した場合どのようになるか試してみると良いかもしれません。
-for( int i = 0; i < img.height; i++ ){
+    * 出力した結果がもとの絵からかけ離れてしまっても面白いかもしれません。
+</WRAP>
-  beginShape();
-  for( int j = 0; j < img.width; j++ ){
-    color c = img.get(j,i);
-    float gray = (red(c)+green(c)+blue(c))/3;
-    stroke(0,0,0,100);
-    vertex(j,i-gray/10.0);
-  }
-  endShape();
-}
-</file>