差分
このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン 前のリビジョン 次のリビジョン | 前のリビジョン | ||
lecture:design_with_prototyping:p5.js編:11.ピクセル再構成 [2021/03/01 14:47] – [線で表現する] 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以外の文字でピクセル表示に切り替えられるようにプログラムを書き換えて見ましょう。 | ||
+ | </ | ||
+ | |||
===== 文字の複雑さを濃度として考え、ピクセルを描画する ===== | ===== 文字の複雑さを濃度として考え、ピクセルを描画する ===== | ||
行 351: | 行 363: | ||
===== 線で表現する ===== | ===== 線で表現する ===== | ||
- | 上記はピクセルをベースに対象物を再構成してみましたが,次は線を用いてみます.テレビの走査線のように左から右へ向けて黒い線を引きます。ただしただ真っ直ぐな線では真っ黒なキャンバスができあがるだけですので、画素の明るさ(brightness)に応じて線を少し上方向にずらして描画してみると、以下のような出力結果を得ることができます。すこし不思議な画像になりましたね。 | + | 上記はピクセルをベースに対象物を再構成してみましたが,次は線を用いてみます.テレビの走査線のように左から右へ向けて黒い線を引きます。ただしただ真っ直ぐな線では真っ黒なキャンバスができあがるだけですので、画素の明るさ(brightness)に応じて線を少し上方向にずらして描画してみると、以下のような出力結果を得ることができます。すこし不思議な画像になりましたね。このサンプルではパラメータを調整できるように, |
{{ : | {{ : | ||
+ | <WRAP group> | ||
+ | <WRAP half column> | ||
+ | |||
<file .js sketch.js> | <file .js sketch.js> | ||
var sample_image; | var sample_image; | ||
+ | let x_step, y_step, y_max; | ||
function preload() { | function preload() { | ||
行 363: | 行 379: | ||
function setup() { | function setup() { | ||
createCanvas(500, | createCanvas(500, | ||
+ | select('# | ||
+ | select('# | ||
+ | select('# | ||
+ | x_step = select('# | ||
+ | y_step = select('# | ||
+ | y_max = select('# | ||
noLoop(); | noLoop(); | ||
} | } | ||
行 369: | 行 391: | ||
background(255); | background(255); | ||
stroke(0); | stroke(0); | ||
- | for (let i = 0; i < sample_image.height; | + | for (let i = 0; i < sample_image.height; |
beginShape(); | beginShape(); | ||
- | 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 b = brightness(c); | let b = brightness(c); | ||
- | b = map(b, 0, 255, 0, 10); | + | b = map(b, 0, 255, 0, y_max); |
vertex(j, i - b); | 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(); | ||
+ | } | ||
</ | </ | ||
+ | </ | ||
+ | |||
+ | <WRAP half column> | ||
+ | <file .html index.html> | ||
+ | < | ||
+ | <html lang=" | ||
+ | < | ||
+ | <script src=" | ||
+ | <script src=" | ||
+ | <link rel=" | ||
+ | <meta charset=" | ||
+ | |||
+ | </ | ||
+ | < | ||
+ | <script src=" | ||
+ | x_step:< | ||
+ | y_step:< | ||
+ | y_max:< | ||
+ | |||
+ | </ | ||
+ | </ | ||
+ | |||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | |||
行 389: | 行 451: | ||
==== 線の本数や頂点座標のずらし方を変更してみる ==== | ==== 線の本数や頂点座標のずらし方を変更してみる ==== | ||
- | |||
- | {{ : | ||
- | <file .pde sample10.pde> | ||
- | PImage img; | ||
- | img = loadImage(" | ||
- | 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, | ||
- | float gray = (red(c)+green(c)+blue(c))/ | ||
- | stroke(0, | ||
- | vertex(j, | ||
- | } | ||
- | endShape(); | ||
- | } | ||
- | </ | ||
- | |||
次はプログラムを少し最初に戻して,描く線にアルファ値をもたせてみます.アルファ値とは | 次はプログラムを少し最初に戻して,描く線にアルファ値をもたせてみます.アルファ値とは | ||
- | 透明度のことで,詳細は https://processing.org/tutorials/color/ を参照すると | + | 透明度のことで,詳細は https://p5js.org/reference/#/p5/ |
よいでしょう. | よいでしょう. | ||
- | この透明度を利用し,これまで真っ黒で書いていた線に対して一定の透明度をつけてみます. | + | この透明度を利用し,これまで真っ黒で書いていた線に対して一定の透明度(stroke(0, |
- | 実行結果とプログラムは下記の通りです.面白いことに結果として得られた画像は,デプスマップ(深度情報) | + | 実行結果とプログラムは下記の通りです.面白いことに結果として得られた画像は,凹凸がついた銀盤のように見えますね。なお下記画像のパラメータは |
- | を持った画像のように見えますね. | + | * x_step = 1; |
+ | * y_step = 1; | ||
+ | * y_max = 5; | ||
+ | としています。 | ||
- | {{ : | + | {{ : |
- | <file .pde sample12.pde> | + | |
- | PImage img; | + | |
- | img = loadImage(" | + | <WRAP center round tip 60%> |
- | size(800, 597); | + | ここまで学習した内容から、単位を別のなにかに置き換えることでスーラの絵画を再構成してください。 |
- | imageMode(CENTER); | + | |
- | noFill(); | + | |
- | background(255); | + | |
- | for( int i = 0; i < img.height; i++ ){ | + | |
- | + | </WRAP> | |
- | | + | |
- | for( int j = 0; j < img.width; j++ ){ | + | |
- | | + | |
- | | + | |
- | | + | |
- | vertex(j, | + | |
- | } | + | |
- | endShape(); | + | |
- | } | + | |
- | </file> | + | |