差分

このページの2つのバージョン間の差分を表示します。

--- lecture:design_with_prototyping:p5.js編:10デジタルキュビズム [2021/02/28 11:32] – [形を表現する] baba
+++ lecture:design_with_prototyping:p5.js編:10デジタルキュビズム [2021/03/02 21:56] (現在) – [Sample08] baba
@@ 行 42: / 行 42: @@
 <WRAP center round tip 60%>
 下記プログラムの資料には下記リンクを参照してください．
-https://processing.org/reference/beginShape_.html
+https://p5js.org/reference/#/p5/beginShape
 </WRAP>
 <WRAP clear/>
+==== Sample01 ====
 {{:lecture:design_with_prototyping:スクリーンショット_2018-10-16_15.15.14.png?nolink&200 |}}
@@ 行 65: / 行 67: @@
 <WRAP clear/>
+==== Sample02 ====
 {{:lecture:design_with_prototyping:スクリーンショット_2018-10-16_15.42.27.png?nolink&200 |}}
 <file .js sketch.js>
@@ 行 87: / 行 91: @@
 <WRAP clear/>
+==== Sample03 ====
 {{:lecture:design_with_prototyping:スクリーンショット_2018-10-16_15.46.20.png?nolink&200 |}}
-<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);
+  background(0);
-for ( int i = 0; i < 100; i++ ) {
+  stroke(255);
-  vertex(50, 50+i);
+  strokeWeight(10);
-  vertex(50+i, 150);
+  noFill();
-  vertex(150, 150-i);
+  beginShape(POINTS);
-  vertex(150-i, 50);
+  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);
 </file>
 <WRAP clear/>
+==== Sample04 ====
 {{:lecture:design_with_prototyping:スクリーンショット_2018-10-16_15.58.36.png?nolink&200 |}}
-<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 ) {
+  background(0);
-  vertex(50, 50+i);
+  stroke(255);
-  vertex(50+i, 150);
+  strokeWeight(1);
-  vertex(150, 150-i);
+  beginShape(POINTS);
-  vertex(150-i, 50);
+  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);
 </file>
 <WRAP clear/>
+==== Sample05 ====
 {{:lecture:design_with_prototyping:スクリーンショット_2018-10-18_10.20.52.png?nolink&200 |}}
-<file .pde 01_sample07.pde>
+<file .js sketch.js>
-size(200, 200);
+function setup() {
-background(0);
+  createCanvas(200, 200);
-noFill();
-stroke(255);
-strokeWeight(1);
-beginShape(LINES);
-for ( int 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);
+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);
+}
 </file>
 <WRAP clear/>
+==== Sample06 ====
 {{:lecture:design_with_prototyping:スクリーンショット_2018-10-16_16.01.04.png?nolink&200 |}}
-<file .pde 01_sample08.pde>
+<file .js sketch.js>
-size(200, 200);
+function setup() {
-background(0);
+  createCanvas(200, 200);
-stroke(255);
+  noLoop();
-strokeWeight(5);
+}
-beginShape(POINTS);
-for ( int i = 0; i < 100; i=i+10 ) {
+function draw() {
-  vertex(50+random(-3,3), 50+i);
+  background(0);
-  vertex(50+i, 150+random(-3,3));
+  stroke(255);
-  vertex(150+random(-3,3), 150-i);
+  strokeWeight(5);
-  vertex(150-i, 50+random(-3,3));
+  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);
 </file>
 <WRAP clear/>
+==== Sample07 ====
 {{:lecture:design_with_prototyping:スクリーンショット_2018-10-16_16.03.16.png?nolink&200 |}}
-<file .pde 01_sample09.pde>
+<file .js sketch.js>
-size(200, 200);
+function setup() {
-background(0);
+  createCanvas(200, 200);
-stroke(255);
+  noLoop();
-strokeWeight(1);
+}
-noFill();
-beginShape();
+function draw() {
-for ( int i = 0; i < 100; i=i+10 ) {
+  background(0);
-  vertex(50+random(-3,3), 50+i);
+  stroke(255);
-  vertex(50+i, 150+random(-3,3));
+  strokeWeight(1);
-  vertex(150+random(-3,3), 150-i);
+  noFill();
-  vertex(150-i, 50+random(-3,3));
+  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);
 </file>
 <WRAP clear/>
+==== Sample08 ====
 {{:lecture:design_with_prototyping:スクリーンショット_2018-10-16_16.06.47.png?nolink&200 |}}
-<file .pde 01_sample10.pde>
+<file .js sketch.js>
-size(200, 200);
+function setup() {
-background(0);
+  createCanvas(200, 200);
-stroke(255);
+  noLoop();
-strokeWeight(1);
-noFill();
-beginShape();
-for ( int i = 0; i < 100; i=i+10 ) {
-  vertex(50+random(-3,3), 50+i);
 }
-endShape();
-beginShape();
+function draw() {
-for ( int i = 0; i < 100; i=i+10 ) {
+  background(0);
-  vertex(50+i, 150+random(-3,3));
+  background(0);
-}
+  stroke(255);
-endShape();
+  strokeWeight(1);
+  noFill();
-beginShape();
+  beginShape();
-for ( int i = 0; i < 100; i=i+10 ) {
+  for (let i = 0; i < 100; i = i + 10) {
-  vertex(150+random(-3,3), 150-i);
+    vertex(50 + random(-3, 3), 50 + i);
-}
+  }
-endShape();
+  endShape();
-beginShape();
+  beginShape();
-for ( int i = 0; i < 100; i=i+10 ) {
+  for (let i = 0; i < 100; i = i + 10) {
-  vertex(150-i, 50+random(-3,3));
+    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) {
+    vertex(150 - i, 50 + random(-3, 3));
+  }
+  endShape();
 }
-endShape();
 </file>
@@ 行 224: / 行 270: @@
 <WRAP center round todo 60%>
-課題：これまでのサンプルを利用して，beginShape()を利用する制約のもと，自分が面白い（興味深い）と思う丸を描くプログラムを記述してください．
+課題：これまでのサンプルを利用して，beginShape()を利用する制約のもと，自分が面白い（興味深い）と思う丸を描くプログラムを記述してください．ただし必ずじしも形状が円形である必用はありません。「あなたが考える丸とはなにか」これを深く自分なりに掘り下げてその思考に沿ったコードを記述してください。
 </WRAP>
+==== 技術小話 ====
+キャンバスに描いた画像を保存するためにどのようにすればよいでしょうか？OS標準のスクリーンショット機能を使えば簡単ですが、キャンバスサイズそのままを保存するめの関数がp5.jsには用意されています。sketch.jsファイルに以下の関数を追記してください。
+<code>
+function keyPressed()
+{
+  if( key == 's' ){
+    save('output.png');
+  }
+}
+</code>
+たったこれだけで、's'キーを押すとその時のキャンバス描画をpngファイルに保存することができます。
 ===== 作品ギャラリー =====