cancancanda commented 4 years ago

import processing.svg.*;

PShape shape;

void setup() {
  size(400, 400);
  
  shape = loadShape("JAXA_logo4bento.svg");
  shape.disableStyle();
  shapeMode(CENTER);
}

void draw() {
  background(0);

  fill(150, 0, 0);
  shape(shape, width/2, height/2, 300, 300);
}

cancancanda commented 4 years ago

エラーメッセージ

スクリーンショット (15)

mapconcierge commented 4 years ago

とりあえずSVG出力うまくできました。このサンプルをそのまま実行。 https://qiita.com/enkatsu/items/92f7959c74e4d469dd54

//SVG 日本語
import processing.svg.PGraphicsSVG;

//まず通常のPAppletに描画して出力する例
beginRecord(SVG, "PApplet.svg");
size(640, 480);
noStroke();
fill(0, 200, 250);
ellipse(width/2, height/2, 100, 100);
endRecord();

//次にPGraphicsに描画して出力する例
PGraphics pg;
pg = createGraphics(640, 480, SVG, "PGraphics.svg");
pg.beginDraw();
pg.ellipse(pg.width/2, pg.height/2, 100, 100);
pg.endDraw();

mapconcierge commented 4 years ago

次にやること

[ ] 上記のサンプルを基に、月の満ち欠けシミュレーションプログラムを作成する。
[ ] ガチャムクのデザインを、Shape として表現する。

複数のShapeの位置を変数でコントロールできるようにする。

NASAなどのAPIから、月の満ち欠けや潮の満ち引きに関する情報を取得してデザインに動的に反映させる。

mapconcierge commented 4 years ago

気づいたことMEMO

弁当に海苔を載せたときのシミュレーションができると良さそう。
生成するSVGファイルのファイル名を YYYYMMDDmoon.svg とかわかりやすくする。

mapconcierge commented 4 years ago

基本的なプログラミングの基礎を学ぶには

Python で以下の演習を行う。 https://repository.kulib.kyoto-u.ac.jp/dspace/handle/2433/245698

cancancanda commented 4 years ago

arc(390,60,80,80,QUARTER_PI,PI+QUARTER_PI); の円弧描画がうまくいかない

参考資料

https://cc.musabi.ac.jp/kenkyu/cf/renew/program/processing/processing05.html

//SVG 日本語
import processing.svg.PGraphicsSVG;

//まず通常のPAppletに描画して出力する例
beginRecord(SVG, "PApplet.svg");
size(640, 480);
noStroke();
colorMode(RGB,255,255,0);
fill(0, 200, 250);
ellipse(width/2, height/2, 400, 400);
arc(390,60,80,80,QUARTER_PI,PI+QUARTER_PI);
ellipse(width/2, height/2, 300, 400);
endRecord();

//次にPGraphicsに描画して出力する例
PGraphics pg;
pg = createGraphics(640, 480, SVG, "PGraphics.svg");
pg.beginDraw();
size(640, 480);
fill(0, 200, 250);
noStroke();
colorMode(RGB,255,255,0);
pg.ellipse(pg.width/2, pg.height/2, 100, 100);
pg.ellipse(pg.width/2, pg.height/2, 100, 100);

pg.endDraw();

mapconcierge commented 4 years ago

PAppletの円弧(arc)の描き方

楕円を描く
その楕円の中心からの角度範囲を角度単位ラジアンで記す。
ラジアンは360度単位から radians() を用いて、変換できる。 radians(360) = 2*PI

arc( 円弧の中心のx座標, 円弧の中心のy座標, 横の直径, 縦の直径, 弧を描き始める角度, 円弧を描き終える角度 );

// 月の形をSVGで出力したい
import processing.svg.PGraphicsSVG;

//まず通常のPAppletに描画して出力する例
beginRecord(SVG, "PApplet.svg");
size(640, 480);
//noStroke();
strokeWeight( 5 );
stroke( #339933 );

colorMode(RGB,0,0,255);
fill(255, 255, 0);
//fill(0, 200, 250);
ellipse(width/2, height/2, 400, 400);
arc(390,60,80,80,QUARTER_PI,PI+QUARTER_PI);
//ellipse(width/2, height/2, 300, 400);
endRecord();

mapconcierge commented 4 years ago

16990D89-4B15-4898-B028-14CEF4161D7B

mapconcierge commented 4 years ago

２つの円弧で、月の形を表現する方法

// 月をSVGで描きたい
import processing.svg.PGraphicsSVG;

//まず通常のPAppletに描画して出力する例
beginRecord(SVG, "PApplet.svg");
size(640, 480);
//noStroke();
strokeWeight( 5 );
//colorMode(RGB,0,0,255);
fill(100, 100, 0);
//fill(0, 200, 250);
//ellipse(width/2, height/2, 400, 400);
//ellipse(width/2, height/2, 300, 400);

//arc( 円弧の中心のx座標, 円弧の中心のy座標, 横の直径, 縦の直径, 弧を描き始める角度, 円弧を描き終える角度 );
// 右側エッジ描画
stroke( #339933 );
arc(200, 200, 100, 100,radians(-90),radians(90));

// 左側エッジ描画
stroke( #FFFF00 );
arc(200, 200, 100, 100,radians(90),radians(270));

mapconcierge commented 4 years ago

２つの円弧で、月の形を表現する方法その２

// 月をSVGで描きたい
import processing.svg.PGraphicsSVG;

// 月齢変数定義
int MoonAge=2; // 0:新月 2:三日月 7:上限の月 15:満月 22:下限の月 29

// 通常のPAppletに描画して出力する例
beginRecord(SVG, "PApplet.svg");
size(640, 480);
//noStroke();
strokeWeight( 5 );
//colorMode(RGB,0,0,255);

// 塗りつぶしの透明度( 0:透明 255:不透明 )
//fill(R, G, B, 透明度);
fill(100, 100, 0, 0);
//fill(0, 200, 250);
//ellipse(width/2, height/2, 400, 400);
//ellipse(width/2, height/2, 300, 400);

// 右側エッジ描画
stroke( #66FF66 );
//arc( 円弧の中心のx座標, 円弧の中心のy座標, 横の直径, 縦の直径, 弧を描き始める角度, 円弧を描き終える角度 );
arc(200, 200, 100, 100,radians(-90),radians(90));

// 三日月描画
stroke( #339933 );
//arc( 円弧の中心のx座標, 円弧の中心のy座標, 横の直径, 縦の直径, 弧を描き始める角度, 円弧を描き終える角度 );
arc(200, 200, 50, 100,radians(-90),radians(90));

// 半月描画
stroke( #00FF00 );
//arc( 円弧の中心のx座標, 円弧の中心のy座標, 横の直径, 縦の直径, 弧を描き始める角度, 円弧を描き終える角度 );
arc(200, 200, 0, 100,radians(90),radians(270));

// 26夜描画
stroke( #666600 );
//arc( 円弧の中心のx座標, 円弧の中心のy座標, 横の直径, 縦の直径, 弧を描き始める角度, 円弧を描き終える角度 );
arc(200, 200, 50, 100,radians(90),radians(270));

// 左側エッジ描画
stroke( #FFFF00 );
//arc( 円弧の中心のx座標, 円弧の中心のy座標, 横の直径, 縦の直径, 弧を描き始める角度, 円弧を描き終える角度 );
arc(200, 200, 100, 100,radians(90),radians(270));

cancancanda commented 4 years ago

円弧の横の直径を０から400まで２０ずつ変化させて円弧を描いた

// 月をSVGで描きたい
import processing.svg.PGraphicsSVG;

// 月齢変数定義
int MoonAge=0; //=2; // 0:新月 2:三日月 7:上限の月 15:満月 22:下限の月 29

// 通常のPAppletに描画して出力する例
beginRecord(SVG, "PApplet.svg");
size(640, 480);
//noStroke();
strokeWeight( 5 );
//colorMode(RGB,0,0,255);

// 塗りつぶしの透明度( 0:透明 255:不透明 )
//fill(R, G, B, 透明度);
fill(100, 100, 0, 0);
//fill(0, 200, 250);
//ellipse(width/2, height/2, 400, 400);
//ellipse(width/2, height/2, 300, 400);
background(0);

// 楕円幅を20ピクセルずつ変更して MoonAge変数で自動生成
for (MoonAge=0; MoonAge <=400; MoonAge +=20){
   stroke(#FFFF00);  //線の色は黄色
   arc(200, 200, MoonAge, 400,radians(-90),radians(270));
//println(MoonAge);
//delay(100);
}

/* 以下の描画テスト用コードはコメントアウト
// 右側エッジ描画3
stroke( #66FF66 );
//arc( 円弧の中心のx座標, 円弧の中心のy座標, 横の直径, 縦の直径, 弧を描き始める角度, 円弧を描き終える角度 );
arc(200, 200, 100, 100,radians(-90),radians(90));

// 三日月描画
stroke( #339933 );
//arc( 円弧の中心のx座標, 円弧の中心のy座標, 横の直径, 縦の直径, 弧を描き始める角度, 円弧を描き終える角度 );

arc(200, 200, 50, 100,radians(-90),radians(90));

// 半月描画
stroke( #00FF00 );
//arc( 円弧の中心のx座標, 円弧の中心のy座標, 横の直径, 縦の直径, 弧を描き始める角度, 円弧を描き終える角度 );
arc(200, 200, 0, 100,radians(90),radians(270));

// 26夜描画
stroke( #666600 );
//arc( 円弧の中心のx座標, 円弧の中心のy座標, 横の直径, 縦の直径, 弧を描き始める角度, 円弧を描き終える角度 );
arc(200, 200, 50, 100,radians(90),radians(270));

// 左側エッジ描画
stroke( #FFFF00 );
//arc( 円弧の中心のx座標, 円弧の中心のy座標, 横の直径, 縦の直径, 弧を描き始める角度, 円弧を描き終える角度 );
arc(200, 200, 100, 100,radians(90),radians(270));
*/

mapconcierge commented 4 years ago

次のステップは MoonAge 変数(int にしたけど、よく考えてみれば月齢7.5 とか使うので、float 定義のほうがよいかも)をそのまま楕円の横幅ではなく、月齢として扱えるように修正。
楕円の横幅は EllipseWidth という変数を新たに定義する。

cancancanda commented 4 years ago

楕円の横幅を新たに定義はこれでできている？

MoonAge変数を月齢として扱う方法が謎

// 月をSVGで描きたい import processing.svg.PGraphicsSVG;

// 月齢変数定義 float MoonAge=0; //=2; // 0:新月 2:三日月 7:上限の月 15:満月 22:下限の月 29

//楕円の横幅 int EllipseWidth=0;

// 通常のPAppletに描画して出力する例 beginRecord(SVG, "PApplet.svg"); size(640, 480); //noStroke(); strokeWeight( 5 ); //colorMode(RGB,0,0,255);

// 塗りつぶしの透明度( 0:透明 255:不透明 ) //fill(R, G, B, 透明度); fill(100, 100, 0, 0); //fill(0, 200, 250); //ellipse(width/2, height/2, 400, 400); //ellipse(width/2, height/2, 300, 400); background(0);

// 楕円幅を20ピクセルずつ変更して MoonAge変数で自動生成 for (EllipseWidth=0; EllipseWidth<=400; EllipseWidth +=20){ stroke(#FFFF00); //線の色は黄色 arc(200, 200, EllipseWidth, 400,radians(-90),radians(270)); //println(MoonAge); //delay(100); }

furuhashilab / fabla-bu

Processingで月齢自動生成シュミレーションプログラムを作る #4

エラーメッセージ

次にやること

複数のShapeの位置を変数でコントロールできるようにする。

NASAなどのAPIから、月の満ち欠けや潮の満ち引きに関する情報を取得してデザインに動的に反映させる。

気づいたことMEMO

基本的なプログラミングの基礎を学ぶには

参考資料

PAppletの円弧(arc)の描き方

２つの円弧で、月の形を表現する方法

２つの円弧で、月の形を表現する方法その２

円弧の横の直径を０から400まで２０ずつ変化させて円弧を描いた

楕円の横幅を新たに定義はこれでできている？

MoonAge変数を月齢として扱う方法が謎

furuhashilab / fabla-bu

Processingで月齢自動生成シュミレーションプログラムを作る #4

エラーメッセージ

次にやること

複数のShapeの位置を変数でコントロールできるようにする。

NASAなどのAPIから、月の満ち欠けや潮の満ち引きに関する情報を取得してデザインに動的に反映させる。

気づいたことMEMO

基本的なプログラミングの基礎を学ぶには

参考資料

PAppletの円弧(arc)の描き方

２つの円弧で、月の形を表現する方法

２つの円弧で、月の形を表現する方法 その２

円弧の横の直径を０から400まで２０ずつ変化させて円弧を描いた

楕円の横幅を新たに定義はこれでできている？

MoonAge変数を月齢として扱う方法が謎

２つの円弧で、月の形を表現する方法その２