teratail
回答率
85.48%
質問するログイン新規登録

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

新規登録して質問してみよう
ただいま回答率
85.48%
トップProcessingに関する質問
Processing

Processingは、オープンソースプロジェクトによるCGのためのプログラミング言語です。Javaをベースにしており、グラフィック機能に特化しています。イメージの生成やアニメーションなど、視覚的なフィードバックを簡単に得ることが可能です。

Q&A

解決済

2回答

1777閲覧

processingのプログラムからp5.js用に書き換える

harizixyann
harizixyann

総合スコア9

Processing

Processingは、オープンソースプロジェクトによるCGのためのプログラミング言語です。Javaをベースにしており、グラフィック機能に特化しています。イメージの生成やアニメーションなど、視覚的なフィードバックを簡単に得ることが可能です。

0グッド

0クリップ

投稿2023/01/07 01:09

編集2023/01/07 08:13

0

0

let img;//画像用の変数
let polygon;//正多角形用の変数
let gon=6;//正多角形の角数
let scalar//サイズ
let j=1;//鏡映変換のパラメータ
let k=0;//回転変換のパラメータ
function setup(){
createCanvas(300,300);
scalar=height0.4;
//img=loadShape("F.svg");//画像ファイル読み込み
img=loadShape("yosegi1.svg");//寄木１の画像
//img=loadShape("yosegi２.svg");//寄木２の画像
polygon=createShape();
polygon.beginShape();//頂点をつないでかたちを作る
polygon.noFill();
for(let i=0;i<gon;i++){
let v=p5.Vector.fromAngle(2Pi*i/gon);
v.mult(scalar);
polygon.vertex(v.x,v.y);//正多角形の頂点
}
polygon.endShape(CLOSE);//すべての頂点をつなぐ
drawShape();//描画
}イメージ説明### 前提

ここに質問の内容を詳しく書いてください。
これは、processingのプログラムです。p5.js用に書き換えなければいけないのですが、書き方が分からないので、教えていただきたいです。
（例）
TypeScriptで●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。

実現したいこと

ここに実現したいことを箇条書きで書いてください。
p5.js用のプログラムの作成。

  • ▲▲機能を動作するようにする

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

processingからp5.jsへの変換。

ソースコード

試したこと

ここに問題に対して試したことを記載してください。
1、２行目のPShapeや、3、５、６、１６行目のintや、4行目のfloatや、１７行目の最初のPVectorをletに変更しました。
7行目のvoid setupをfunction setupに変更しました。
8行目のsizeをcreateCanvasに変更しました。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

y_waiwai
y_waiwai

2023/01/07 01:33

質問は編集できます 無駄に質問建てないで追記修正しましょう
hoshi-takanori
hoshi-takanori

2023/01/07 02:14

「何をどう書き換えた」と言葉で説明されてもよく分からないので、書き換えたコードをそのまま貼りましょう。
thkana
thkana

2023/01/07 02:18

知恵袋で見た記憶がある。質問削除してるみたいだけど。
guest

回答2件

0

自己解決

プログラム解決できました!
const unit = 150
const gon = 6
let theta = 0;
let Rotating = false;

function setup(){
createCanvas(800,500);
background("white");
yosegi(1.5unit, 1.5unit,0);
}

function yosegi(x,y,theta){
translate(x,y);
scale(1,-1);
fill(color(200,150,100));
rotate(theta)
// 六角形を描く
beginShape();
for (let i = 0; i < gon; i++){
vertex(unitcos(2PI/goni+PI/6), unitsin(2PI/goni+PI/6))
}
endShape(CLOSE);

// 三角形を６０度ずつ回転させながら描く
for (let i = 0; i < gon; i++){
fundTriangle();
rotate(2*PI/gon);
}
rotate(theta)
scale(1,-1);
translate(-x,-y);

}

function fundTriangle(){
fundPattern(0,1,2);
scale(1,-1);
translate(unitcos(PI/gon)/3, unit(sin(PI/gon))/3);
fundPattern(0,1,0);
translate(-unitcos(PI/gon)/3, -unit(sin(PI/gon))/3);
translate(unitcos(PI/gon)/3, -unit(sin(PI/gon))/3);
fundPattern(0,1,0);
translate(unitcos(PI/gon)/3, -unit(sin(PI/gon))/3);
rotate(PI/3);
translate(-unitcos(PI/gon)/3, -unit(sin(PI/gon))/3);
fundPattern(2,1,2);
translate(unitcos(PI/gon)/3, unit(sin(PI/gon))/3);
rotate(-PI/3);
translate(-unitcos(PI/gon)/3, unit(sin(PI/gon))/3);
translate(-unitcos(PI/gon)/3, unit(sin(PI/gon))/3);
scale(1,-1);
}

function fundPattern(l,c,r){
const pal = [color(100,70,50),color(150,100,80),color(200,150,100)]
fill(pal[l]);
beginShape();
vertex(0,0);
vertex(unitcos(PI/gon)/9, unit(sin(PI/gon))/9);
vertex(unitcos(PI/gon)/9 + unitcos(PI/gon)/3,
unit*(sin(PI/gon))/9 - unitsin(PI/gon)/3,
);
vertex(unitcos(PI/gon)/3, -unit*(sin(PI/gon))/3);
endShape(CLOSE);

fill(pal[c]);
translate(unit*cos(PI/gon)/9, unit*(sin(PI/gon))/9);
vertex(0,0);
vertex(unit*cos(PI/gon)/9, unit*(sin(PI/gon))/9);
vertex(unit*cos(PI/gon)/9 + unit*cos(PI/gon)/3,
   unit*(sin(PI/gon))/9 - unit*sin(PI/gon)/3,
  );
vertex(unit*cos(PI/gon)/3, -unit*(sin(PI/gon))/3);
endShape(CLOSE);
translate(-unit*cos(PI/gon)/9, -unit*(sin(PI/gon))/9);

fill(pal[r]);
translate(unit*cos(PI/gon)*2/9, unit*(sin(PI/gon))*2/9);
vertex(0,0);
vertex(unit*cos(PI/gon)/9, unit*(sin(PI/gon))/9);
vertex(unit*cos(PI/gon)/9 + unit*cos(PI/gon)/3,
   unit*(sin(PI/gon))/9 - unit*sin(PI/gon)/3,
  );
vertex(unit*cos(PI/gon)/3, -unit*(sin(PI/gon))/3);
endShape(CLOSE);
translate(-unit*cos(PI/gon)*2/9, -unit*(sin(PI/gon))*2/9);

}

投稿2023/01/07 13:06

harizixyann
harizixyann

総合スコア9

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

TN8001
TN8001

2023/01/07 13:23

> プログラム解決できました! よかったですね^^お疲れさまでした。 SVGと同じになるように、コードで描画したということですね？（そんなのわからんがなｗ >> コードは画像ではなく文字（コードブロック）で提示してください。 > 試してみた後のプログラムの画像を文字に変更しました。 対応ありがとうございました。 できればコードはコードブロックを使用してください（私の回答のようになります） 現状一部斜体になっていたり、「*」が消えたりしています。 [ヘルプ｜質問する時のヒント](https://teratail.com/help/question-tips#questionTips35)
guest

0

コードは画像ではなく文字（コードブロック）で提示してください。
はっきり言ってその時点で回答する気が起きません（回答者も実際に動作確認等しています。全部書き起こすとなるとかったるすぎます）

p5.jsにはPShapeに当たるものがありません。
implement PShape · Issue #37 · processing/p5.js

SVGも標準では読めません。
zenozeng/p5.js-svg: SVG runtime for p5.js.

PShapeを使わずに同様の結果を出すことも可能だろうとは思いますが、元コードとは全く異なるコードになるでしょう。
正六角形だとわかっているならSVGを使わずに、PVector（p5.Vector）の配列として扱ってはどうでしょうか？

コードを書き起こしていて気が付きましたが、SVGは飾り？なんですね。
ならばSVGをなにかしらの方法で、PNGにでも変えてください。
svg png 変換 - Google 検索

結局drawShapeで同じようなことをしているので、PShapeも（6角形程度なら）必要ないです。

微妙な仕様違いでいくつか罠がありました。

Java
1PImage img;
2int gon = 6;
3float scalar;
4int j = 1;
5int k = 0;
6
7void setup() {
8  size(300, 300);
9  imageMode(CENTER);
10  
11  scalar = height * 0.4;
12  img = loadImage("F.png");
13  drawShape();
14}
15
16void drawShape() {
17  background(200);
18  translate(width / 2, height / 2);
19
20  pushMatrix();
21  scale(1, j);
22  rotate(k * 2 * PI / gon);
23  image(img, 0, 0);
24  popMatrix();
25
26  noFill();
27  beginShape();
28  for (int i = 0; i < gon; i++) {
29    int ind = (j * i - k + 2 * gon) % gon;
30    PVector v = PVector.fromAngle(2 * PI * i / gon);
31    v.mult(scalar);
32    vertex(v.x, v.y);
33
34    textSize(20);
35    text(ind, v.x, v.y);
36  }
37  endShape(CLOSE);
38}
39
40void keyPressed() {
41  if (key == 's') {
42    j *= -1;
43    println(key);
44  } else if (key == 'r') {
45    k = (k + j + gon) % gon;
46    println(key);
47  } else if (key == 'e') {
48    k = 0;
49    j = 1;
50    println("RESET");
51  }
52  drawShape();
53}
54
55void draw() {}
JavaScript
1let img;
2let gon = 6;
3let scalar;
4let j = 1;
5let k = 0;
6
7function preload() {
8  img = loadImage("data/F.png"); // 画像読み込みはpreloadで
9}
10
11function setup() {
12  createCanvas(300, 300);
13  imageMode(CENTER);
14
15  scalar = height * 0.4;
16
17  drawShape();
18}
19
20function drawShape() {
21  background(200);
22  translate(width / 2, height / 2);
23
24  push();
25  scale(1, j);
26  rotate(k * 2 * PI / gon);
27  image(img, 0, 0);
28  pop();
29
30  noFill();
31  beginShape();
32  for (let i = 0; i < gon; i++) {
33    let ind = (j * i - k + 2 * gon) % gon;
34    let v = p5.Vector.fromAngle(2 * PI * i / gon);
35    v.mult(scalar);
36    vertex(v.x, v.y);
37  }
38  endShape(CLOSE);
39
40  // textもfill vertexと同時に描けなかった
41  fill(0);
42  for (let i = 0; i < gon; i++) {
43    let ind = (j * i - k + 2 * gon) % gon;
44    let v = p5.Vector.fromAngle(2 * PI * i / gon);
45    v.mult(scalar);
46    textSize(20);
47    text(ind, v.x, v.y);
48  }
49}
50
51function keyPressed() {
52  if (key == 's') {
53    j *= -1;
54    print(key); // logでもいいがprintはある
55  } else if (key == 'r') {
56    k = (k + j + gon) % gon;
57    print(key);
58  } else if (key == 'e') {
59    k = 0;
60    j = 1;
61    print("RESET");
62  }
63  drawShape();
64}
65
66function draw() {}

投稿2023/01/07 03:33

編集2023/01/07 07:07
TN8001
TN8001

総合スコア9326

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

トップProcessingに関する質問

processingのプログラムからp5.js用に書き換える