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

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

新規登録して質問してみよう
ただいま回答率
85.48%
canvas

HTML5の<canvas>要素用のタグです。CanvasはHTML5から導入された、二次元の図形描写が可能な要素です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Processing

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

Q&A

解決済

1回答

1116閲覧

p5.jsでクラスを用いた線分の描写ができない

teratera2

総合スコア3

canvas

HTML5の<canvas>要素用のタグです。CanvasはHTML5から導入された、二次元の図形描写が可能な要素です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Processing

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

1グッド

0クリップ

投稿2021/05/26 06:35

p5.jsでベクトルクラスと線分クラスを用いて三角形を描写したいのですが、Uncaught TypeError: Cannot read property 'x' of undefined (sketch: line 64)
というエラーメッセージが出ます。

p5

1class Vec2{ 2 /** 3 @param {number} x 4 @param {number} y 5 **/ 6 constructer(x,y){ 7 this.x = x; 8 this.y = y; 9 } 10 /** 11 @param {Vec2} b 12 **/ 13 add(b){ 14 let a = this; 15 return new Vec2(a.x+b.x,a.y+b.y); 16 } 17 sub(b){ 18 let a = this; 19 return new Vec2(a.x-b.x,a.y-b.y); 20 } 21} 22 23class Ray2{ 24 /** 25 @param {Vec2} pos このレイの始点ベクトル 26 @param {Vec2} way このレイの始点から伸びる方向ベクトル 27 **/ 28 constructer(pos,way){ 29 this.pos = pos; 30 this.way = way; 31 } 32 /** 33 @param {Vec2} begin 34 @param {Vec2} end 35 **/ 36 static with2p(begin,end){ 37 return new Ray2(begin,end.sub(begin)); 38 } 39 //線分の始点 40 get begin(){ 41 return this.pos; 42 } 43 //線分の終点 44 get end(){ 45 return this.pos.add(this.way); 46 } 47} 48 49function setup() { 50 createCanvas(640, 360); 51} 52 53function draw() { 54 background(60); 55 strokeWeight(3); 56 stroke('white'); 57 58 let walls = [ 59 Ray2.with2p(new Vec2(50,50),new Vec2(100,300)), 60 Ray2.with2p(new Vec2(100,300),new Vec2(100,300)), 61 Ray2.with2p(new Vec2(250,200),new Vec2(50,350)), 62 ]; 63 64 for(let wall of walls){ 65 line(wall.begin.x,wall.begin.y,wall.end.x,wall.end.y); 66 } 67 68 /** 69 line(50,50,100,300); 70 line(100,300,250,200); 71 line(250,200,50,50); 72 これと同じ結果 73 **/ 74 75}

どの様に修正すれば三角形を描写できるでしょうか?
回答をお願い致します。

TN8001👍を押しています

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

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

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

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

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

guest

回答1

0

ベストアンサー

間違い探しのようですね^^;

正:constructor
誤:constructer

js

1//Ray2.with2p(new Vec2(50,50),new Vec2(100,300)), 2//Ray2.with2p(new Vec2(100,300),new Vec2(100,300)), 3//Ray2.with2p(new Vec2(250,200),new Vec2(50,350)), 4 5Ray2.with2p(new Vec2(50,50),new Vec2(100,300)), 6Ray2.with2p(new Vec2(100,300),new Vec2(250,200)), 7Ray2.with2p(new Vec2(250,200),new Vec2(50,50)),

投稿2021/05/26 13:43

編集2023/08/14 09:07
TN8001

総合スコア9326

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

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

teratera2

2021/05/26 14:04

回答ありがとうございます! 回答の通り修正したところ三角形を描写することができました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問