差分
このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン 前のリビジョン 次のリビジョン | 前のリビジョン | ||
lecture:design_with_prototyping:p5.js編:10デジタルキュビズム [2021/02/28 11:34] – [Sample03] baba | lecture:design_with_prototyping:p5.js編:10デジタルキュビズム [2021/03/02 21:56] (現在) – [Sample08] baba | ||
---|---|---|---|
行 42: | 行 42: | ||
<WRAP center round tip 60%> | <WRAP center round tip 60%> | ||
下記プログラムの資料には下記リンクを参照してください. | 下記プログラムの資料には下記リンクを参照してください. | ||
- | https://processing.org/ | + | https://p5js.org/ |
</ | </ | ||
行 118: | 行 118: | ||
==== Sample04 ==== | ==== Sample04 ==== | ||
{{: | {{: | ||
- | <file .pde 01_sample06.pde> | + | <file .js sketch.js> |
- | size(200, 200); | + | function setup() { |
- | background(0); | + | createCanvas(200, 200); |
- | stroke(255); | + | } |
- | strokeWeight(1); | + | |
- | beginShape(POINTS); | + | function draw() { |
- | for ( int i = 0; i < 100; i=i+10 ) { | + | |
- | vertex(50, 50+i); | + | stroke(255); |
- | vertex(50+i, | + | strokeWeight(1); |
- | vertex(150, 150-i); | + | beginShape(POINTS); |
- | vertex(150-i, | + | for (let i = 0; i < 100; i = i + 10) { |
+ | vertex(50, 50 + i); | ||
+ | vertex(50 + i, 150); | ||
+ | vertex(150, 150 - i); | ||
+ | vertex(150 - i, 50); | ||
+ | } | ||
+ | endShape(CLOSE); | ||
} | } | ||
- | endShape(CLOSE); | ||
</ | </ | ||
<WRAP clear/> | <WRAP clear/> | ||
行 136: | 行 141: | ||
==== Sample05 ==== | ==== Sample05 ==== | ||
{{: | {{: | ||
- | <file .pde 01_sample07.pde> | + | <file .js sketch.js> |
- | size(200, 200); | + | function setup() { |
- | background(0); | + | |
- | noFill(); | + | |
- | stroke(255); | + | |
- | strokeWeight(1); | + | |
- | beginShape(LINES); | + | |
- | for ( int i = 0; i < 100; i=i+10 | + | |
- | | + | |
- | vertex(50+i, | + | |
- | vertex(150, 150-i); | + | |
- | vertex(150-i, | + | |
} | } | ||
- | endShape(CLOSE); | ||
+ | function draw() { | ||
+ | background(0); | ||
+ | noFill(); | ||
+ | stroke(255); | ||
+ | strokeWeight(1); | ||
+ | beginShape(LINES); | ||
+ | for (let i = 0; i < 100; i = i + 10) { | ||
+ | vertex(50, 50 + i); | ||
+ | vertex(50 + i, 150); | ||
+ | vertex(150, 150 - i); | ||
+ | vertex(150 - i, 50); | ||
+ | } | ||
+ | endShape(CLOSE); | ||
+ | } | ||
</ | </ | ||
行 157: | 行 166: | ||
==== Sample06 ==== | ==== Sample06 ==== | ||
{{: | {{: | ||
- | <file .pde 01_sample08.pde> | + | <file .js sketch.js> |
- | size(200, 200); | + | function setup() { |
- | background(0); | + | createCanvas(200, 200); |
- | stroke(255); | + | |
- | strokeWeight(5); | + | } |
- | beginShape(POINTS); | + | |
- | for ( int i = 0; i < 100; i=i+10 ) { | + | function draw() { |
- | vertex(50+random(-3, | + | |
- | vertex(50+i, | + | stroke(255); |
- | vertex(150+random(-3, | + | strokeWeight(5); |
- | vertex(150-i, | + | beginShape(POINTS); |
+ | for (let i = 0; i < 100; i = i + 10) { | ||
+ | vertex(50 + random(-3, 3), 50 + i); | ||
+ | vertex(50 + i, 150 + random(-3, 3)); | ||
+ | vertex(150 + random(-3, 3), 150 - i); | ||
+ | vertex(150 - i, 50 + random(-3, 3)); | ||
+ | } | ||
+ | endShape(CLOSE); | ||
} | } | ||
- | endShape(CLOSE); | ||
</ | </ | ||
行 176: | 行 191: | ||
==== Sample07 ==== | ==== Sample07 ==== | ||
{{: | {{: | ||
- | <file .pde 01_sample09.pde> | + | <file .js sketch.js> |
- | size(200, 200); | + | function setup() { |
- | background(0); | + | createCanvas(200, 200); |
- | stroke(255); | + | |
- | strokeWeight(1); | + | } |
- | noFill(); | + | |
- | beginShape(); | + | function draw() { |
- | for ( int i = 0; i < 100; i=i+10 ) { | + | |
- | vertex(50+random(-3, | + | stroke(255); |
- | vertex(50+i, | + | strokeWeight(1); |
- | vertex(150+random(-3, | + | noFill(); |
- | vertex(150-i, | + | beginShape(); |
+ | for (let i = 0; i < 100; i = i + 10) { | ||
+ | vertex(50 + random(-3, 3), 50 + i); | ||
+ | vertex(50 + i, 150 + random(-3, 3)); | ||
+ | vertex(150 + random(-3, 3), 150 - i); | ||
+ | vertex(150 - i, 50 + random(-3, 3)); | ||
+ | } | ||
+ | endShape(CLOSE); | ||
} | } | ||
- | endShape(CLOSE); | ||
</ | </ | ||
行 196: | 行 217: | ||
==== Sample08 ==== | ==== Sample08 ==== | ||
{{: | {{: | ||
- | <file .pde 01_sample10.pde> | + | <file .js sketch.js> |
- | size(200, 200); | + | function setup() { |
- | background(0); | + | createCanvas(200, 200); |
- | stroke(255); | + | |
- | strokeWeight(1); | + | |
- | noFill(); | + | |
- | + | ||
- | beginShape(); | + | |
- | for ( int i = 0; i < 100; i=i+10 ) { | + | |
- | | + | |
} | } | ||
- | endShape(); | ||
- | beginShape(); | + | function draw() { |
- | for ( int i = 0; i < 100; i=i+10 | + | background(0); |
- | | + | |
- | } | + | stroke(255); |
- | endShape(); | + | |
+ | | ||
- | beginShape(); | + | |
- | for ( int i = 0; i < 100; i=i+10 ) { | + | for (let i = 0; i < 100; i = i + 10) { |
- | vertex(150+random(-3, | + | vertex(50 + random(-3, 3), 50 + i); |
- | } | + | } |
- | endShape(); | + | endShape(); |
- | beginShape(); | + | |
- | for ( int i = 0; i < 100; i=i+10 ) { | + | for (let i = 0; i < 100; i = i + 10) { |
- | vertex(150-i, | + | vertex(50 + i, 150 + random(-3, 3)); |
+ | | ||
+ | endShape(); | ||
+ | |||
+ | beginShape(); | ||
+ | for (let i = 0; i < 100; i = i + 10) { | ||
+ | vertex(150 + random(-3, 3), 150 - i); | ||
+ | } | ||
+ | endShape(); | ||
+ | |||
+ | beginShape(); | ||
+ | for (let i = 0; i < 100; i = i + 10) { | ||
+ | | ||
+ | } | ||
+ | endShape(); | ||
} | } | ||
- | endShape(); | ||
</ | </ | ||
行 242: | 行 270: | ||
<WRAP center round todo 60%> | <WRAP center round todo 60%> | ||
- | 課題:これまでのサンプルを利用して,beginShape()を利用する制約のもと,自分が面白い(興味深い)と思う丸を描くプログラムを記述してください. | + | 課題:これまでのサンプルを利用して,beginShape()を利用する制約のもと,自分が面白い(興味深い)と思う丸を描くプログラムを記述してください.ただし必ずじしも形状が円形である必用はありません。「あなたが考える丸とはなにか」これを深く自分なりに掘り下げてその思考に沿ったコードを記述してください。 |
</ | </ | ||
+ | |||
+ | ==== 技術小話 ==== | ||
+ | キャンバスに描いた画像を保存するためにどのようにすればよいでしょうか?OS標準のスクリーンショット機能を使えば簡単ですが、キャンバスサイズそのままを保存するめの関数がp5.jsには用意されています。sketch.jsファイルに以下の関数を追記してください。 | ||
+ | < | ||
+ | function keyPressed() | ||
+ | { | ||
+ | if( key == ' | ||
+ | save(' | ||
+ | } | ||
+ | } | ||
+ | </ | ||
+ | たったこれだけで、' | ||
+ | |||
===== 作品ギャラリー ===== | ===== 作品ギャラリー ===== |