差分
このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン 前のリビジョン 次のリビジョン | 前のリビジョン 次のリビジョン両方とも次のリビジョン | ||
lecture:design_with_prototyping:p5.js編:10デジタルキュビズム [2021/02/28 11:33] – [形を表現する] baba | lecture:design_with_prototyping:p5.js編:10デジタルキュビズム [2021/02/28 11:44] – [Sample08] baba | ||
---|---|---|---|
行 93: | 行 93: | ||
==== Sample03 ==== | ==== Sample03 ==== | ||
{{: | {{: | ||
- | <file .pde 01_sample05.pde> | + | <file .js sketch.js> |
- | size(200, 200); | + | function setup() { |
- | background(0); | + | createCanvas(200, 200); |
- | stroke(255); | + | } |
- | strokeWeight(1); | + | |
- | noFill(); | + | function draw() { |
- | beginShape(POINTS); | + | |
- | for ( int i = 0; i < 100; i++ ) { | + | stroke(255); |
- | vertex(50, 50+i); | + | strokeWeight(10); |
- | vertex(50+i, | + | noFill(); |
- | vertex(150, 150-i); | + | beginShape(POINTS); |
- | vertex(150-i, | + | for (let i = 0; i < 100; i++) { |
+ | vertex(50, 50 + i); | ||
+ | vertex(50 + i, 150); | ||
+ | vertex(150, 150 - i); | ||
+ | vertex(150 - i, 50); | ||
+ | } | ||
+ | endShape(CLOSE); | ||
} | } | ||
- | endShape(CLOSE); | ||
</ | </ | ||
行 113: | 行 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/> | ||
行 131: | 行 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); | ||
+ | } | ||
</ | </ | ||
行 152: | 行 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); | ||
</ | </ | ||
行 171: | 行 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); | ||
</ | </ | ||
行 191: | 行 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 (let i = 0; i < 100; i = i + 10) { | ||
+ | vertex(50 + i, 150 + random(-3, 3)); | ||
+ | } | ||
+ | endShape(); | ||
+ | |||
+ | beginShape(); | ||
+ | for (let i = 0; i < 100; i = i + 10) { | ||
+ | | ||
+ | } | ||
+ | endShape(); | ||
- | beginShape(); | + | |
- | for ( int i = 0; i < 100; i=i+10 ) { | + | for (let i = 0; i < 100; i = i + 10) { |
- | vertex(150-i, | + | vertex(150 - i, 50 + random(-3, 3)); |
+ | } | ||
+ | endShape(); | ||
} | } | ||
- | endShape(); | ||
</ | </ | ||
行 237: | 行 270: | ||
<WRAP center round todo 60%> | <WRAP center round todo 60%> | ||
- | 課題:これまでのサンプルを利用して,beginShape()を利用する制約のもと,自分が面白い(興味深い)と思う丸を描くプログラムを記述してください. | + | 課題:これまでのサンプルを利用して,beginShape()を利用する制約のもと,自分が面白い(興味深い)と思う丸を描くプログラムを記述してください.ただし必ずじしも形状が円形である必用はありません。「あなたが考える丸とはなにか」これを深く自分なりに掘り下げてその思考に沿ったコードを記述してください。 |
</ | </ | ||