差分
このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン 前のリビジョン 次のリビジョン | 前のリビジョン 次のリビジョン両方とも次のリビジョン | ||
lecture:design_with_prototyping:p5.js編:10デジタルキュビズム [2021/02/28 11:26] – baba | lecture:design_with_prototyping:p5.js編:10デジタルキュビズム [2021/02/28 11:40] – [Sample06] baba | ||
---|---|---|---|
行 45: | 行 45: | ||
</ | </ | ||
+ | <WRAP clear/> | ||
- | {{: | + | ==== Sample01 ==== |
- | <file .pde 01_sample02.pde> | + | |
- | size(250, | + | |
- | background(0); | + | |
- | rectMode(CENTER); | + | |
- | noStroke(); | + | |
- | rect(width/ | + | |
- | </ | + | |
- | <WRAP clear/> | + | {{: |
+ | <file .js sketch.js> | ||
+ | function setup() { | ||
+ | createCanvas(200, | ||
+ | } | ||
- | {{: | + | function draw() { |
- | <file .pde 01_sample03.pde> | + | background(0); |
- | size(200,200); | + | stroke(255); |
- | background(0); | + | strokeWeight(10); |
- | stroke(255); | + | line(50, 50, 50, 150); |
- | strokeWeight(10); | + | line(50, 150, 150, 150); |
- | line(50,50, 50, 150); | + | line(150, 150, 150, 50); |
- | line(50, | + | line(150, 50, 50, 50); |
- | line(150, | + | } |
- | line(150, | + | |
</ | </ | ||
<WRAP clear/> | <WRAP clear/> | ||
+ | |||
+ | ==== Sample02 ==== | ||
{{: | {{: | ||
- | <file .pde 01_sample04.pde> | + | <file .js sketch.js> |
- | size(200, 200); | + | function setup() { |
- | background(0); | + | createCanvas(200, 200); |
- | stroke(255); | + | } |
- | strokeWeight(10); | + | |
- | noFill(); | + | function draw() { |
- | beginShape(); | + | |
- | vertex(50, 50); | + | stroke(255); |
- | vertex(50, 150); | + | strokeWeight(10); |
- | vertex(150, 150); | + | noFill(); |
- | vertex(150, 50); | + | beginShape(); |
- | endShape(CLOSE); | + | vertex(50, 50); |
+ | vertex(50, 150); | ||
+ | vertex(150, 150); | ||
+ | vertex(150, 50); | ||
+ | endShape(CLOSE); | ||
+ | } | ||
</ | </ | ||
<WRAP clear/> | <WRAP clear/> | ||
+ | ==== 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); | ||
</ | </ | ||
<WRAP clear/> | <WRAP clear/> | ||
+ | |||
+ | ==== 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/> | ||
+ | ==== 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); | ||
+ | } | ||
</ | </ | ||
<WRAP clear/> | <WRAP clear/> | ||
+ | |||
+ | ==== 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); | ||
</ | </ | ||
<WRAP clear/> | <WRAP clear/> | ||
+ | |||
+ | ==== Sample07 ==== | ||
{{: | {{: | ||
<file .pde 01_sample09.pde> | <file .pde 01_sample09.pde> | ||
行 177: | 行 209: | ||
<WRAP clear/> | <WRAP clear/> | ||
+ | ==== Sample08 ==== | ||
{{: | {{: | ||
<file .pde 01_sample10.pde> | <file .pde 01_sample10.pde> |