p5.jsでは、滑らかなモーションを生み出すために、draw()関数内のコードを毎秒60フレームで実行しようとします。フレームとはdraw()関数を通り抜ける一瞬で、フレームレートは毎秒何フレーム描画されるかを表します。 […]
続きを読む日: 2019年2月20日
7:モーション p5.js JavaScript
パラパラ漫画と同様に、画面のアニメーションは、あるイメージを描画し、次いでそれと少しだけ違ったイメージを描画することの連続で作成されます。滑らかなモーション(動き)の錯覚は残像によって生み出されます。同じように見えて少し […]
続きを読む6_7:SVGロボット p5.js JavaScript
下図の3体のロボットは、これまでのように線や矩形で作成したものではなく、ベクター描画プログラムで作成されたSVGイメージを読み込んだものです。シェイプの作成は多くの場合、コードを使って定義するよりもInkscapeやIl […]
続きを読む6_6:カスタムフォントの使用 p5.js JavaScript
p5.jsでは、TrueType(.ttf)フォントとOpenType(.otf)フォントを使ったテキストが描画できます。どちらかのタイプのカスタムフォントが用意できると、HTMLやsketch.jsといっしょにサーバー […]
続きを読む6_5:Webフォントの使用 p5.js JavaScript
システムフォント以外に、フォントを提供者からダウンロードして使用する選択肢もあります。これはWebフォントと呼ばれ、GoogleFontsが有名です。 GoogleFontsのWebフォントを使用するには次のようにします […]
続きを読む6_4:フォント p5.js JavaScript
p5.jsではデフォルト以外の多くの書体でテキストが描画できます。書体を表すフォントは、コンピュータにインストールされているフォント(システムフォント)ならどれでも使用できます。ただし、ほかの人が見たときにも同じ書体で描 […]
続きを読む