目次

1.p5.jsを動かす

  1.1 p5.jsとは

  1.2 p5.jsを使ってみる

  1.3 言語の設定とアカウントの作成

  1.4 エディタ

  1.5 はじめてのプログラム

  1.6 関数を呼び出す

  1.7 プログラムを自分で書く

  1.8 線を描く

  1.9 水平垂直錯視を描く

2.色や形を自在に操る～演算と変数～

  2.1 演算

  2.2 さまざまな図形を描く

  2.3 変数

  2.4 値を確認する

  2.5 特別な変数と定数

  2.6 図形の見た目を変える

  2.7 色を指定する

  2.8 図形の重なり

3.規則的なパターンをつくる～繰り返しと条件分岐～

  3.1 繰り返し

  3.2 変数の値を変える演算子

  3.3 比較演算子

  3.4 カウンタ変数を使う

  3.5 円環状の配置

  3.6 2重ループで格子状の配置

  3.7 条件分岐

  3.8 繰り返しと条件分岐

  3.9 forループを途中で終了する

4.絵を動かす～アニメーション～

  4.1 絵を動かす方法

  4.2 三角関数を使ったアニメーション

  4.3 円環状のアニメーション

  4.4 カクカク動かす

  4.5 アニメーションの錯視

5.線や図形を自在に描く

  5.1 頂点

  5.2 さまざまな多角形

  5.3 さまざまな波形

  5.4 さまざまな曲線

  5.5 曲がり盲を描く

6.図形の移動・回転・拡大縮小

  6.1 座標変換による図形の移動

  6.2 キャンバスの中心を原点にする

  6.3 一時的な座標変換

  6.4 一時的な描画スタイルの変更

  6.5 回転と拡大縮小

  6.6 座標変換の組み合わせ

  6.7 ピンナ錯視を描く

7.関数をつくって使う

  7.1 関数を自作する

  7.2 引数付きの関数を自作する

  7.3 デフォルト値のある引数を持つ関数を自作する

  7.4 関数を途中で終了する

  7.5 関数から値を返す

  7.6 変数を使える範囲

  7.7 ヘビの回転錯視を描く

8.図形を操作する～マウスやキーボードを使う～

  8.1 マウスを使う

  8.2 マウスのアクションによって命令を実行する

  8.3 キーボードを使う

  8.4 スライダーやボタンを使う

9.配列とオブジェクト

  9.1 配列

  9.2 配列を使ってたくさんの図形を動かす

  9.3 オブジェクト

  9.4 オブジェクトの配列

  9.5 多次元配列

10.p5.jsの発展的なトピック

  10.1 マルチメディア要素

  10.2 効率的な描画のためのオフスクリーンレンダリング

  10.3 WebGLによる3Dグラフィックス

  10.4 自分のパソコンでp5.jsを動かす

  10.5 キャンバスを画像として保存する

ページの先頭へ