canvas」の訳文です。createCanvas()関数は、グラフィックが描画できる特別な要素のHTML5キャンバスを作成します。p5.domアドオンライブラリを使用すると、p5.jsはまた、グラフィックを描くキャンバスの外にあるHTML要素の作成やインタラクティブな操作に使用することができます。p5.domライブラリを組み込むp5.domライブラリを使用するにはまず。HTMLにp5.dom.jsファイルを読み込む必要があります。src='relative/path/to/your/p5.dom.js'>HTMLヘッダに次のリンク先を追加します。h)を呼び出すとき、キャンバスを指定した幅と高さで作成できますが、そのキャンバスを変数に保持することもできます。これはポインタや参照と呼ばれます。このポインタを使用すると、要素自身が持つ、たとえば位置やid、クラスなどを設定するメソッドを呼び出すことができます。メソッドの全リストはここに書かれています。すべてのメソッドがすべての要素で動作し有意な結果をもたらすわけではないので、少し頭を使う必要があります。スライダのvalue()メソッドはスライダの値を返すか設定しますが、キャンバスから呼び出しても効果はありません。createCanvas()を呼び出しているが、その結果を変数として保持している。これによって、位置の設定など、要素のメソッドが呼び出せるようになる。ここでは位置とクラスを設定するメソッドを呼び出している。このコードが生成したHTMLを確認するには、インスペクタを使う。これらの命令は通常通り、キャンバスに適用される。50);}要素レベルの操作(要素自身が持つメソッドの呼び出し)と、rect()やfill()といったキャンバスに直接描画する関数の呼び出しには、1つ重要な違いがあります。ループの実行中キャンバスに描画しているときには、シーン全部を毎フレーム再描画する必要があります。矩形を画面に表示しつづけたい場合には、draw()内にrect()を記述し、矩形を1秒間に何度も再描画します。要素レベルで操作するときには、要素は、要素自身のメソッドを呼び出すことで、いつでも変更できる静的な状態を保持しています。このメソッドはsetup()内で1度だけ呼び出されただけですが、その後はずっとその位置のまま変わりません。毎フレーム設定し直す必要はありません。0)に現れずに、ページの最後(=既存の最後の要素の後)に付加されることに気づかれるかもしれません。要素はまた、ページに設定されている既存のCSSスタイルの影響を受けます。このときの指針になる考えは、p5では、ページをできるだけ台無しにしないように、要素をページの流れにしたがわせるようにしている、ということです。変更を加えたい場合には、p5のメソッドやCSSスタイルを使用します。newDiv.class('red');}ページの最後に直接付加するのではなく、位置を指定したい場合には、parent()メソッドを使用します。HTMLファイルの<body>内の、キャンバスを挿入したい場所に、IDを付けたコンテナを作成します。id='myContainer'></div>コードでは、作成した要素のポインタを保持する変数を作成し、その変数からparent()を呼び出します。y)メソッドを使用します。0)を基準とする位置を指定することができます。100)に配置します。100);}上記の例ではcreateCanvas()関数を使っていますが、ほかのcreate関数でも同様に動作します。library」を参照)。次のサンプルでは、テキスト付のdivを作成し、キャンバスとdivの位置をそれぞれ設定しています。50);}ここでは要素内にただテキスト文字列を置いているだけですが、要素は実はどのHTMLでも中に含むことができます。次のコードを試してみてください。リンク部分のテキストはクリックできます。href='https://i.imgur.com/WXaUlrK.gif'>ここはHTMLリンク</a>!");これらのメソッドはp5.Elementオブジェクトを作成します。p5.Elementは、HTML要素の多くのプロパティへのアクセスを簡単にする、要素を包むラッパーですが、p5.Elementオブジェクトの基底にあるHTML要素にアクセスしたいときには、eltプロパティが使用できます。要素の全プロパティはここで読むことができます。HTMLイメージの作成イメージそのものが欲しい場合には、createImg(src)を使用します(注:作成されるのはp5.Elementオブジェクトですが、ここではこれをHTMLイメージと呼んでいます)。HTMLイメージは、image()でキャンバスに描画したイメージとは違います。loadImage()を使う必要も、毎フレーム描画する必要もなく、作成したら、それを削除するまで、ページに存在しつづけます。このイメージはそれ自体が1つの要素なので、その上をマウスでドラッグすると、ハイライト表示できます(下図参照)。これは、その要素に直接マウスイベントのハンドラを割り当てることができる、ということを意味していますが、これについては後で見ていきます。次の例では、イメージとキャンバスを作成し、それぞれの位置とサイズを設定しています。}}HTMLメディア要素の作成create関数にはまた、ビデオやオーディオのメディアを扱う要素を追加する関数があります(createVideo()、createAudio()、createCapture())。これらの関数は、通常のp5.Elementは持っていない、追加的なメソッドを持つp5.MediaElementオブジェクトを作成します。APIを通してアクセスできますが、それでもネイティブな機能性は多くあります。基底を成す要素にはeltプロパティからアクセスでき、ネイティブ機能全部が使用できることを覚えておいてください。次のサンプルは、ボタンのクリックでビデオの再生と一時停止を切り替える方法を示しています。実際の動作はここで確認できます。!playing;}とは言え、すべてのブラウザがこういったメディア機能をサポートしているとは限りません。ブラウザごとのサポート状況はcaniuse.comで調べることができます。APIがサポートするのは全HTML要素の一部です。固有のcreate関数のない要素を追加したい場合には、汎用的なcreateElement()関数を使用します。最初のパラメータはタグ名で、2つめはオプションの、要素内に置く内容です。次の例では、<h1>要素を作成しています。要素はどれでも、マウスが重ねられたりそこからはずれたりしたときに呼び出されるmouseOver()やmouseOut()メソッドを自分自身が持っています。いった出来事(イベント)の1つが発生したときに固有のアクションを実行するには、これらのメソッドに引数として関数か関数の名前を渡します。次のサンプルでは、マウスがキャンバスに重なったときユニコーンのイメージを隠す振る舞いと、キャンバスから出たときに表示する振る舞いを割り当てています。ユニコーンイメージを隠す関数と表示する関数。img.show();}上記サンプルでは、関数名のuniHideとuniShowを渡していますが、同じ結果は、名前なしで関数を丸ごと渡すことでも行えます。この名前のない関数は”無名関数”と呼ばれます。要素はまた、関数とmousePressedイベントを要素ごとのレベルで結びつけることのできるmousePressed()メソッドを持っています。これは、どこでもいつでもマウスがクリックされたときに引き起こされるグローバルなmousePressed()関数とは違います。要素は固有のハンドラを持ち、要素のメソッドはその要素が直接クリックされたときだけ呼び出されます。ユニコーンイメージを隠す関数と表示する関数。グローバルなkeyPressed時の振る舞いを定義。これはグローバルなリスナーで、キーの押し下げ時に自動的に発火する。uniShow();}次も、要素固有のリスナーとグローバルなリスナーの違いを示すサンプルです。キャンバスも含むページのどこかをクリックすると背景が明るくなります。キャンバスを直接クリックすると円のサイズが変わります。5;}要素を探す要素にクラスやidを割り当てておくとCSSスタイルシートを使った要素のスタイル処理に役立ちますが、ページの要素を探すときにも便利です。class()メソッドは要素に名前付きのクラスを割り当てるときに使用します。どんなクラス名をつけるかはつける人次第です。ドキュメント内の複数の要素は同じクラス値を持つことができます。id()メソッドは要素にidを付けるときに使用します。どんなidをつけるかはつける人次第です。id名はドキュメントで一意でなくてはならず、同じidを持つ要素がほかにあってはいけません。ページに存在している要素を探すときに使用できる関数は2つあります。select(#id)は、指定されたidを持つ要素を返し、見つからないときはnullを返します。selectAll(.className)は指定されたクラス名を持つ全要素の配列を返し、見つからないときは空の配列を返します。各要素のメソッドを呼び出し、位置とクラスを設定する。}}”要素を返す”と言っているときの”要素”は、実際にはp5.Elementオブジェクトです。基底を成すHTML要素にアクセスしたい場合には、eltプロパティを使用します。スタイルの設定キャンバスは描画することでその外見を変えますが、ほかのHTML要素はCSS(カスケーディングスタイルシート)と呼ばれるものを使ってスタイルを設定します。CSSは、画面にレンダリングされるHTML要素表現の記述に使用される言語で、背景色やフォントサイズ、フォントカラー、パディングといった事柄が設定できます。p5.jsでは、要素のstyle()メソッドを使ってCSSプロパティが設定できます。CSSリファレンス」を参照してください。50);}また別の方法として、設定するCSSプロパティをまとめ、セミコロンで区切った1つの文字列として入力することもできます。adding:10px;");CSSスタイルシートの使用スケッチに組み込むもう1つの方法に、スタイルシートの自作があります。そのためには、style.cssといった名前のファイルを作成し、HTMLファイルのヘッダでこのファイルへのリンクを追加します。href="style.css">CSSファイル(style.css)には、”ルール”、つまり要素の外見をどのように提示するかを決めるコードを記述します。ルールは、HTMLタグ(pやdiv、spanなど)や要素クラス(頭に.が付く)、要素id(頭に#が付く)にもとづいて定義します。次の例は前の例と同じですが、style()メソッドの代わりにCSSスタイルシートを使っています。この場合、プロパティ名や値を引用符で囲んではいけません。要素は、その要素のremove()メソッドを呼び出すことで削除できます。これにより、その要素に結び付けられているすべてのイベントハンドラも削除され、要素もページから削除されます。createDiv('これはテキスト');myDiv.remove();removeElements()関数は、createCanvas()やcreateGraphics()関数で作成されたキャンバスやグラフィックをのぞく、p5によって作成された全要素を削除します。これらの要素からはすべてのイベントハンドラも削除され、要素もページから削除されます。removeElements();}また、remove()関数の呼び出しによってp5スケッチ全体が削除できます。remove()関数は、p5.jsやp5.dom.jsによって作成されたキャンバスや全要素を削除します。draw()関数のループを停止し、イベントリスナーを削除して、windowグローバルスコープからプロパティやメソッドをアンバインド(結び付き解除)します。1つの変数p5は、新しいスケッチの作成に使用できるように、残ります。nullを設定します。ビデオp5.jsでは、createVideo()関数によって、オーディオやビデオの簡単な再生に使用できるHTML5要素がDOM内に作成できます。vid.play();}ビデオ要素は、デフォルトでは表示されますが、hide()メソッドで隠すことができます。ビデオ要素は、指定されていれば(parent()などで)コンテナノードに付加され、指定されていない場合は<body>に付加されます。1つめのパラメータには、ビデオファイルへのパスの文字列か、同じビデオの異なる形式へのパスの文字列の配列が指定できます。配列で渡す方法は、ブラウザによってサポートするビデオ形式が異なるので、できるだけ多くの環境で再生できるようにしたい場合に役立ちます。ビデオの上に画像を描画したいときには、まずビデオを作成し、その後キャンバスを作成して画像を描画します。}}また別の方法として、ビデオは表示せず、ビデオのピクセルをキャンバスにコピーする方法もあります。コメントをキャンセルメールアドレスが公開されることはありません。*サイト上に表示された文字を入力してください。WAAPIに関する注意WAAPIを利用するにはブラウザに特別な設定が必要です。ブラウザの実験的な機能を有効化する方法に書いているので、必ずお読みください。楕円(円)、円弧を描く。APIやTensorFlow.jsについて調べたことを書いています。freebiescafe.com。