差分

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

--- lecture:design_with_prototyping:p5.js編:11.ピクセル再構成 [2021/02/28 15:22] – [文字の複雑さを濃度として考え、ピクセルを描画する] 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);
@@ 行 268: / 行 268: @@
-===== アスキーアートエフェクト =====
+===== 文字を単位にしてみる =====
 この10ピクセル分の塊を別の単位に置き換えてみましょう．
@@ 行 301: / 行 301: @@
 </file>
-====== 文字の複雑さを濃度として考え、ピクセルを描画する ======
+<WRAP center round todo 60%>
+<code>
+let char_typed;
+function keyPressed(){
+  char_typed = key;
+}
+</code>
+というコードをsketch.jsに追記してあげると入力した文字を char_typed というグローバル変数に保存しておくことができます。これを利用してA以外の文字でピクセル表示に切り替えられるようにプログラムを書き換えて見ましょう。
+</WRAP>
+===== 文字の複雑さを濃度として考え、ピクセルを描画する =====
 いわゆるアスキーアートと呼ばれる手法です。ピクセルに対応する濃度を文字種に変換することで、文字だけで絵を表現する独特の手法になります。ここまでですでに各ピクセルの明るさ情報は取得できているので、それを利用してどの文字を利用するのが良いかがわかれば実装ができそうです。[[http://paulbourke.net/dataformats/asciiart/|Character representation of grey scale images]]という1997年に書かれたサイトには、白と黒の明るさを文字種に対応させた一覧が載せられています。
   char[] char_pixel = {'$', '@', 'B', '%', '8', '&', 'W', 'M', '#', '*', 'o', 'a', 'h', 'k',
@@ 行 336: / 行 348: @@
   background(0);
-  for (let i = 0; i < sample_image.height; i+=5) {
+  for (let i = 0; i < sample_image.height; i+=2) {
-    for (let j = 0; j < sample_image.width; j+=5) {
+    for (let j = 0; j < sample_image.width; j+=2) {
       let c = sample_image.get(j, i);
       let pos = parseInt(map(brightness(c),
 ,255, 0,char_pixel.length-1));
       fill(255);
-      textSize(5);
+      textSize(2);
       text(char_pixel[pos],j,i);
     }
@@ 行 351: / 行 363: @@
 ===== 線で表現する =====
-<WRAP center round tip 60%>
+上記はピクセルをベースに対象物を再構成してみましたが，次は線を用いてみます．テレビの走査線のように左から右へ向けて黒い線を引きます。ただしただ真っ直ぐな線では真っ黒なキャンバスができあがるだけですので、画素の明るさ（brightness）に応じて線を少し上方向にずらして描画してみると、以下のような出力結果を得ることができます。すこし不思議な画像になりましたね。このサンプルではパラメータを調整できるように,index.htmlファイルも編集しているので、そちらの修正も同時に行ってください。
-以下のサンプルプログラムはsetup(), draw()の内プログラムになっています．自分でvoid setup(){} void draw(){}に書き直して
-tweakモード実行しつつ，プログラムの振る舞いを観察してみましょう．
-</WRAP>
-上記はピクセルをベースに対象物を再構成してみましたが，次は線を用いてみます．
+{{ :lecture:design_with_prototyping:p5.js編:11-line01.png?nolink |11-line01.png}}
-{{ :lecture:design_with_prototyping:pixel_sample10.png?nolink |}}
+<WRAP group>
-<file .pde sample09.pde>
+<WRAP half column>
-PImage img;
-img = loadImage("sample.jpg");
+<file .js sketch.js>
-size(800, 597);
+var sample_image;
-imageMode(CENTER);
+let x_step, y_step, y_max;
-noFill();
-background(255);
+function preload() {
-for( int i = 0; i < img.height; i++ ){
+  sample_image = loadImage("seurat.png");
+}
-  beginShape();
-  for( int j = 0; j < img.width; j++ ){
+function setup() {
-    color c = img.get(j,i);
+  createCanvas(500, 336);
-    float gray = (red(c)+green(c)+blue(c))/3;
+  select('#x_step').changed(xChanged);
-    stroke(0,0,0);
+  select('#y_step').changed(yChanged);
-    vertex(j,i-gray/10.0);
+  select('#y_max').changed(maxChanged);
+  x_step = select('#x_step').value();
+  y_step = select('#y_step').value();
+  y_max = select('#y_max').value();
+  noLoop();
+}
+function draw() {
+  background(255);
+  stroke(0);
+  for (let i = 0; i < sample_image.height; i += y_step) {
+    beginShape();
+    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, y_max);
+      vertex(j, i - b);
+    }
+    endShape();
   }
-  endShape();
+}
+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>
 ここで少し工夫している箇所は vertex 関数において，ただ座標を正しくうつのではなく，その画素の
 グレースケール値に基づいて上下に位置を動かしていることです．これにより明るめの画素は上方向に座標が
-移動し，暗めの画素は下方向に画素が移動します．上記プログラムはそれを画像サイズの縦ピクセル分すべて
+移動し，暗めの画素は下方向に画素が移動します．
-描画していますが，これを少し間引いて下記のようなプログラムに変更してみます.これまで i++ としてた
-ものを i=i+5 と変更したのみです．
-{{ :lecture:design_with_prototyping:piel_sample11.png?nolink |}}
-<file .pde sample10.pde>
-PImage img;
-img = loadImage("sample.jpg");
-size(800, 597);
-imageMode(CENTER);
-noFill();
-background(255);
-for( int i = 0; i < img.height; i=i+5 ){ // 変更箇所
-  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);
-    vertex(j,i-gray/10.0);
-  }
-  endShape();
-}
-</file>
+==== 線の本数や頂点座標のずらし方を変更してみる ====
 次はプログラムを少し最初に戻して，描く線にアルファ値をもたせてみます．アルファ値とは
-透明度のことで，詳細は 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>