日: 2019年2月20日

p5.jsでは、滑らかなモーションを生み出すために、draw()関数内のコードを毎秒60フレームで実行しようとします。フレームとはdraw()関数を通り抜ける一瞬で、フレームレートは毎秒何フレーム描画されるかを表します。 […]

続きを読む

パラパラ漫画と同様に、画面のアニメーションは、あるイメージを描画し、次いでそれと少しだけ違ったイメージを描画することの連続で作成されます。滑らかなモーション(動き)の錯覚は残像によって生み出されます。同じように見えて少し […]

続きを読む

下図の３体のロボットは、これまでのように線や矩形で作成したものではなく、ベクター描画プログラムで作成されたSVGイメージを読み込んだものです。シェイプの作成は多くの場合、コードを使って定義するよりもInkscapeやIl […]

続きを読む

p5.jsでは、TrueType(.ttf)フォントとOpenType(.otf)フォントを使ったテキストが描画できます。どちらかのタイプのカスタムフォントが用意できると、HTMLやsketch.jsといっしょにサーバー […]

続きを読む

システムフォント以外に、フォントを提供者からダウンロードして使用する選択肢もあります。これはWebフォントと呼ばれ、GoogleFontsが有名です。 GoogleFontsのWebフォントを使用するには次のようにします […]

続きを読む

p5.jsではデフォルト以外の多くの書体でテキストが描画できます。書体を表すフォントは、コンピュータにインストールされているフォント(システムフォント)ならどれでも使用できます。ただし、ほかの人が見たときにも同じ書体で描 […]

続きを読む