lecture:design_with_prototyping:p5.js編:11.ピクセル再構成

差分

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

この比較画面へのリンク

両方とも前のリビジョン 前のリビジョン
次のリビジョン
前のリビジョン
lecture:design_with_prototyping:p5.js編:11.ピクセル再構成 [2021/03/01 10:49] – [アスキーアートエフェクト] babalecture:design_with_prototyping:p5.js編:11.ピクセル再構成 [2021/05/11 15:25] (現在) – [Sample04] baba
行 126: 行 126:
     for (let j = 0; j < sample_image.width; j++) {     for (let j = 0; j < sample_image.width; j++) {
       let c = sample_image.get(j, i);       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);       stroke(gray);
       point(j, i);       point(j, i);
行 300: 行 300:
 } }
 </file> </file>
 +
 +
 +<WRAP center round todo 60%>
 +<code>
 +let char_typed;
 +function keyPressed(){
 +  char_typed = key;
 +}
 +</code>
 +というコードをsketch.jsに追記してあげると入力した文字を char_typed というグローバル変数に保存しておくことができます。これを利用してA以外の文字でピクセル表示に切り替えられるようにプログラムを書き換えて見ましょう。
 +</WRAP>
 +
  
 ===== 文字の複雑さを濃度として考え、ピクセルを描画する ===== ===== 文字の複雑さを濃度として考え、ピクセルを描画する =====
行 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(800597); +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(500336); 
-    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> </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 関数において,ただ座標を正しくうつのではなく,その画素の ここで少し工夫している箇所は 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>+
  
  • /home/users/2/lolipop.jp-4404d470cd64c603/web/ws/data/attic/lecture/design_with_prototyping/p5.js編/11.ピクセル再構成.1614563384.txt.gz
  • 最終更新: 2021/03/01 10:49
  • by baba