差分

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

--- lecture:design_with_prototyping:p5.js編:11.ピクセル再構成 [2021/03/01 16:15] – [線の本数や頂点座標のずらし方を変更してみる] 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>
 ===== 文字の複雑さを濃度として考え、ピクセルを描画する =====
@@ 行 351: / 行 363: @@
 ===== 線で表現する =====
-上記はピクセルをベースに対象物を再構成してみましたが，次は線を用いてみます．テレビの走査線のように左から右へ向けて黒い線を引きます。ただしただ真っ直ぐな線では真っ黒なキャンバスができあがるだけですので、画素の明るさ（brightness）に応じて線を少し上方向にずらして描画してみると、以下のような出力結果を得ることができます。すこし不思議な画像になりましたね。
+上記はピクセルをベースに対象物を再構成してみましたが，次は線を用いてみます．テレビの走査線のように左から右へ向けて黒い線を引きます。ただしただ真っ直ぐな線では真っ黒なキャンバスができあがるだけですので、画素の明るさ（brightness）に応じて線を少し上方向にずらして描画してみると、以下のような出力結果を得ることができます。すこし不思議な画像になりましたね。このサンプルではパラメータを調整できるように,index.htmlファイルも編集しているので、そちらの修正も同時に行ってください。
 {{ :lecture:design_with_prototyping:p5.js編:11-line01.png?nolink |11-line01.png}}
+<WRAP group>
+<WRAP half column>
 <file .js sketch.js>
 var sample_image;
+let x_step, y_step, y_max;
 function preload() {
@@ 行 363: / 行 379: @@
 function setup() {
   createCanvas(500, 336);
+  select('#x_step').changed(xChanged);
+  select('#y_step').changed(yChanged);
+  select('#y_max').changed(maxChanged);
+  x_step = select('#x_step').value();
+  y_step = select('#y_step').value();
+  y_max = select('#y_max').value();
   noLoop();
 }
@@ 行 369: / 行 391: @@
   background(255);
   stroke(0);
-  for (let i = 0; i < sample_image.height; i += 1) {
+  for (let i = 0; i < sample_image.height; i += y_step) {
     beginShape();
-    for (let j = 0; j < sample_image.width; j += 1) {
+    for (let j = 0; j < sample_image.width; j += x_step) {
       let c = sample_image.get(j, i);
       let b = brightness(c);
-      b = map(b, 0, 255, 0, 10);
+      b = map(b, 0, 255, 0, y_max);
       vertex(j, i - b);
     }
@@ 行 381: / 行 403: @@
 }
+function xChanged() {
+  x_step = this.value();
+  draw();
+}
+function yChanged() {
+  y_step = this.value();
+  draw();
+}
+function maxChanged() {
+  y_max = this.value();
+  draw();
+}
 </file>
+</WRAP>
+<WRAP half column>
+<file .html index.html>
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/addons/p5.sound.min.js"></script>
+    <link rel="stylesheet" type="text/css" href="style.css">
+    <meta charset="utf-8" />
+  </head>
+  <body>
+    <script src="sketch.js"></script>
+    x_step:<input type="range" id="x_step" value="1", min="1", max="10"><br>
+    y_step:<input type="range" id="y_step" value="1", min="1", max="10"><br>
+    y_max:<input type="range" id="y_max" value="5" min="0" max="50"><br>
+  </body>
+</html>
+</file>
+</WRAP>
+</WRAP>
@@ 行 390: / 行 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>