差分
このページの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; | 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以外の文字でピクセル表示に切り替えられるようにプログラムを書き換えて見ましょう。 | ||
+ | </ | ||
+ | |||
===== 文字の複雑さを濃度として考え、ピクセルを描画する ===== | ===== 文字の複雑さを濃度として考え、ピクセルを描画する ===== | ||
行 440: | 行 452: | ||
==== 線の本数や頂点座標のずらし方を変更してみる ==== | ==== 線の本数や頂点座標のずらし方を変更してみる ==== | ||
次はプログラムを少し最初に戻して,描く線にアルファ値をもたせてみます.アルファ値とは | 次はプログラムを少し最初に戻して,描く線にアルファ値をもたせてみます.アルファ値とは | ||
- | 透明度のことで,詳細は 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> | + | |