月: 2019年2月

データセットは行と列として保持される場合が多くあるので、p5.jsでもその扱いを容易にするp5.Tableオブジェクトが提供されています。行と列で構成されるスプレッドシート(Excelなどで言う表)を扱ったことがあれば、 […]

続きを読む

データの視覚化は、コードとグラフィックスが交わる最も活発な分野で、p5.jsで最も人気のある用途の１つです。 データの視覚化でよく使用されるソフトウェアの代表格はMicrosoft Excelでしょう。Excelの機能を […]

続きを読む

配列を使用すると、多数ある要素が扱いやすくなります。 次のリンクをクリックすると、実際の動作が確認できます。「ロボットの配列」 let robotImage; const bots = []; // Robotオブジェク […]

続きを読む

以下の２つは、これまで見てきた変数、繰り返し、条件、関数、オブジェクト、配列というプログラミングの主要概念を全部取り入れたサンプルです。オブジェクトの配列の作成はこれまで見てきた配列の作成とほとんど同じですが、要素がオブ […]

続きを読む

forループを使用すると、コードの簡潔性を保ちながら、大きな配列の扱いが簡単になります。それは、配列の各要素の位置に１つずつ移動するループを記述する、というアイデアによります。そのためには、配列の長さを知る必要があります […]

続きを読む

配列に含まれる各項目は要素と呼ばれ、要素はそれぞれ、配列内のその要素の位置を示すインデックス値を持ちます。キャンバスの座標と同じように、配列のインデックス値も0から数え始めます。たとえば、配列の最初の要素はインデックス値 […]

続きを読む

配列は、共通の名前を共有する、変数のリストです。新しい名前を逐一作成せずに多くの変数が扱えるので非常に便利です。これにより、コードは短く読みやすくなり、更新も容易になります。 変数から配列へ プログラムで１つか２つの物事 […]

続きを読む

ソフトウェアオブジェクトは、メソッド(関数)とプロパティ(変数)を1つの単位にまとめたものです。次のサンプルのRobotクラスでは、作成するロボットオブジェクトのすべてを定義しています。１つ１つのRobotオブジェクトは […]

続きを読む

オブジェクト指向プログラミング(OOP)はプログラムについて考える、また別の方法です。オブジェクトはまた、変数をそれと関係する関数とグループ化する方法でもあります。変数や関数の扱いに慣れてくると、オブジェクトは単に、これ […]

続きを読む

次のサンプルでは、関数を使って、４つの異なる形状をしたロボットを同じプログラム内で作成しています。draw()内にdrawRobot()関数が４回現れるので、drawRobot()のブロックが４回実行され、関数にはそのた […]

続きを読む

関数は、計算した結果の値をメインのプログラムに返すことができます。これまでに使用してきたrandom()やsin()はこのタイプの関数です。このタイプの関数を使うときには、返される値(戻り値)を変数に割り当てます。 le […]

続きを読む

本稿では、フクロウの描画を通して、関数の作成に必要な手順を見ていきます。 フクロウの描画 フクロウを描画するコードの例です。 function setup() { createCanvas(480, 120); } fu […]

続きを読む

コンピュータはプログラムのコードを１行ずつ実行します。関数を実行するときには、関数が定義されている場所にジャンプしてそこに書かれているコードを実行し、終わったらジャンプした元の場所に戻ってそこから実行をつづけます。 fu […]

続きを読む

p5.jsプログラムにとって関数は欠かせない基本要素で、これまで見てきたどのプログラムでも使用しています。たとえばcreateCanvas()やline()、fill()などは頻繁に使用しています。以降では、新しい関数を […]

続きを読む

random()とsin()関数を取り入れて、ロボットを震えさせるサンプルです。 毎フレーム、-4から4未満のランダムな値がx座標に、-1から1未満のランダムな値がy座標に加算されるので、ロボットは上下よりも左右に多く震 […]

続きを読む

三角関数のサインとコサインは連続する滑らかなモーションに利用できます。 サインとコサインと円 サイン(sin)とコサイン(cos)は、角度θに対する半径1の円周上の点が座標(cosθ, sinθ)にあることを言います。し […]

続きを読む

すべてのp5.jsプログラムは、スタートしてから経過した時間量をミリ秒単位で数えます(1ミリ秒は1/1000秒)。このカウンタを使用すると、ある特定のタイミングでアニメーションを引き起こすことができます。millis() […]

続きを読む

滑らかな線形モーションはどのコンピュータでも同じように描画されますが、現実世界の事物はそれぞれの動きをしています。たとえば地面にひらひらと落ちる葉っぱや荒れ地をはう蟻は、どれ１つとして同じ動きをしていないように見えます。 […]

続きを読む

シェイプをある位置から別に位置に、アニメーションして移動させたい場合、そのスタート位置と終了位置を設定し、その間の位置を毎フレーム計算して、描画します。「トゥイーン」とはFlashから生まれた言葉で、あるものとあるもの間 […]

続きを読む

右に少しずつ移動する 左から右に少しずつ、移動するモーションのコードは次のように記述できます。 // x軸方向への移動 // シェイプの半径 const radius = 40; // シェイプの最初のx値 let x […]

続きを読む

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

続きを読む

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

続きを読む

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

続きを読む

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

続きを読む

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

続きを読む

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

続きを読む

ここまで、画像を読み込むときには、loadImage()関数をpreload()関数内に置いて、読み込みが終わってからsetup()関数に進んでいました。しかしloadImage()やloadJSON()、loadFon […]

続きを読む

p5.jsでは、JPEG、GIF、PNG形式と、SVG形式の画像を読み込んで表示することができます。 JPEG、GIF、PNG形式の画像はラスター画像と呼ばれます。これは、画面の小さなドット(ピクセル)に色を付けていくこ […]

続きを読む

イメージを画面に描画するには、次の手順を取ります。 イメージを用意し適切な場所に配置する。 イメージを保持する変数を作成する。 loadImage()関数でイメージを変数に読み込む。 注意が必要なのは、読み込んだJPGや […]

続きを読む

p5.jsでは、単純な線やシェイプの描画に留まらず、さまざまなことが行えます。以降では写真や図、文字のさまざまな書体表現に活かせる、p5.jsのイメージやテキストの作成方法を見ていきます。 注意 ここまで行ってきたキャン […]

続きを読む

「4_8：応答するロボット p5.js JavaScript」で作成したロボットに、translate()とrotate()、scale()関数を組み込みます。 次のリンクをクリックすると、実際の動作が確認できます。「ロ […]

続きを読む

変換の効果が以降の関数に影響しないように分離させることができます。push()関数は現在の座標システムのコピーを保存し、pop()関数は保存した座標システムを復元します。これらの関数は、あるシェイプにだけ特定の変換が必要 […]

続きを読む

scale()関数はキャンバスの座標を引きのばしたり縮めたりします。スケール(縮尺比)の変化に合わせて、座標が伸縮するので、キャンバスの描画物すべてのサイズが大きくなったり小さくなったりします。スケールの量は小数点付きの […]

続きを読む

translate()とrotate()とline()の組み合わせを３回行って、３つの線が互いにつながった連結アームのようにアニメーションするサンプルです。 次のリンクをクリックすると、実際の動作が確認できます。[連結ア […]

続きを読む

translate()とrotate()関数を組み合わせて使用すると、描画物に対する制御力が高まります。そのとき重要なのが、これらを呼び出す順番です。座標システムを移動してから回転させるのと、座標システムを回転させてから […]

続きを読む

rotate()関数は座標システムを回転させます。引数には角度(ラジアン単位)を取り、(0, 0)に対しての、つまり原点を中心とした回転を作成します。 // 赤の矩形 fill(255, 0, 0); rect(20, […]

続きを読む

座標変換は実際には、相当な数学的難問で、高校数学程度の知識(行列や三角関数など)が必要になりますが、p5.jsでは専用の関数が用意されているので、それらを適切に呼び出すだけで実現できます。とは言え、その舞台裏で行われてい […]

続きを読む

キャンバス上での描画物の位置取りと移動にはまた、キャンバスの座標システムを変更するというテクニックがあります。たとえばシェイプは右に50ピクセル移動することができますが、これは、座標の原点(0,0)を50ピクセル右に移動 […]

続きを読む

「3_3：p5.js ロボット四変化」のロボットが、マウスの移動とクリックに応答するバージョンです。 次のリンクをクリックすると、実際の動作が確認できます。「応答するロボット」 let x = 60; let bodyH […]

続きを読む

プログラミング用語として「マッピング」という単語が使われますが、これは日本語で言うと、「あれとこれを対応付ける」というような意味です。たとえば、キャンバスの幅が1920ピクセルあって、mouseXの値を、キャンバスの背景 […]

続きを読む

p5.jsは、キーボードのいずれかのキーが押し下げられているかどうかを追跡します。システム変数のkeyIsPressedは、何らかのキーが押し下げられているときtrueを返し、どのキーも押し下げられていないときにfals […]

続きを読む

マウスカーソルの位置(mouseX、mouseY)を使って、描画内容を変更する例です。 線をカーソルに近づける キャンバスにマウスカーソルを重ねると、縦線がカーソルに近づいてきます。同時に縦線の進行方向を示す矢印が描画さ […]

続きを読む

p5.jsには、mouseX、mouseY、pmouseX、pmouseYに加え、mouseIsPressedというシステム変数があります。mouseIsPressedを使うと、今マウスがWebページ上で押されているかど […]

続きを読む

Webアニメーションでは、ある位置からある位置に移動するとき、目的地にすぐにではなく少し間をとってから到達したり、だんだん速くなったり(加速)、だんだん遅くなったり(減速)するものがよく見られます。これはイージングと呼ば […]

続きを読む

draw()関数は１秒間に60回呼び出されつづけるので、キャンバスをその頻度で再描画しつづけるキャンバスアニメーションの表現に適しています。 マウスを追跡 p5.jsのシステム変数であるmouseXは現在のマウスカーソル […]

続きを読む

「1_2：p5.js 円を描く」で見たように、draw()関数は、setup()関数の後、何度も繰り返し呼び出される、p5.jsの特別な関数です。 draw()関数内のコードは上から下に実行され、ウィンドウが閉じられるな […]

続きを読む

「2_8：p5.js Robotの描画」で見たロボットを描画するコードに変数を追加し、代入する数値を変えることで、ロボットの見た目を変化させるサンプルです。 変更する変数は次の３つです。 // パターン1 const y […]

続きを読む

widthとheight p5.jsのwidthとheightは「3_1：p5.js 変数」で見たように、特別なシステム変数です。widthには描画するキャンバスの幅が、heightには高さが自動的に割り当てられます。 […]

続きを読む

変数は、後からプログラムで利用できるようにするために、メモリに値を保持します。変数は１つのプログラム内で何度でも使用でき、その値はプログラムの実行中に簡単に変更できます。変数を使用する大きな理由は、コード内での同じことの […]

続きを読む

線や円、矩形を組み合わせてロボットを描画するサンプルです。 キャンバスに”それ風に見えるもの”を描画するときには、できれば方眼紙や定規などを使って、何のパーツをどこにどんな大きさで描くかを前もってデザインしておくようにし […]

続きを読む

いささか手数がかかりますが、vertex()関数とbeginShape()、endShape()関数を組み合わせることで、カスタムシェイプが描画できます。 function setup() { createCanvas( […]

続きを読む

シェイプの線と塗りの色 シェイプの線と塗りの色は、stroke()関数とfill()関数で設定できます。次のサンプルでは、stroke()にもfill()にも0から255までの数値を１つだけ渡しているので、グレーの濃さの […]

続きを読む

描画するシェイプ(形状)の属性は専用の関数で設定できます。 ストロークの太さ デフォルトでは、ストローク(線や円、四角形などの枠線)の幅は1ピクセルですが、これはstrokeWeight()関数で変更できます。 func […]

続きを読む

楕円(円) 矩形の(x, y)座標は矩形の左上隅を設定しますが、楕円の(x, y)座標は楕円の中心を設定します。次のサンプルでは、大きな楕円はキャンバスのサイズを超えていますが、p5.jsはエラーを発生させることなく、そ […]

続きを読む

p5.jsには、基本的なシェイプ(形状)を描く関数が定義されているので、三角形や四角形などを簡単に描画することができます。また線を描いてつなぎ合わせる方法で、複雑な形状を作ることもできます。 線 function set […]

続きを読む

キャンバスに点を描画するには、point()関数を使用します。次のコードはキャンバスの真ん中に1ピクセルの点を描画します。 function setup() { createCanvas(480, 120); } fun […]

続きを読む

p5.jsが得意とするビジュアル表現には、HTML5の<canvas>要素が使用できます。<canvas>要素は前出のcreateCanvas()関数で作成します。createCanvas()関数 […]

続きを読む

次のJavaScriptコードをsketch.jsに記述します。 function setup() { createCanvas(480, 120); } function draw() { console.log(mo […]

続きを読む

p5.jsを使用するには、p5.jsライブラリをWebブラウザに読み込む必要があります。そのためには、次の<script>タグを、<head>タグ内に挿入します。 <script src=” […]

続きを読む

「processing/p5.js」のp5.js overviewには、次のように書かれています。 p5.jsは、アーティストやデザイナー、教育者、初心者などがプログラミングをする際、そのコードの記述のハードルをできるだ […]

続きを読む