Processing Fan

ようこそチュートリアルへ

このチュートリアルではJavaScriptによるProcessing(p5.js)の使い方を紹介しています。

基本的な図形の書き方から、色の指定方法やランダムな値の使い方、マウスの入力を受け取る方法まで学習できます。

基本的な内容ですが、アイデア次第で素晴らしい作品を作ることができます！

もしチュートリアルを終えてもっと学びたいと思っていただけたら本家サイトのドキュメントをのぞいてみてください。

プログラミング自体が初めてという方はまずJavaScriptのチュートリアルから始めることをお勧めします。

【JavaScriptチュートリアル目次】

  • JavaScriptの概要と開発環境
    • JavaScriptの概要
    • 開発環境
  • 演算子
    • 四則演算
    • 結果を整数値にする
    • いくつかの注意
    • 結果を整数値にする
  • 文字列
    • 文字列の扱い方
    • 文字列の結合
  • 変数
    • 変数とは
    • なぜ変数を使うのか
    • 値の更新
    • インクリメント・デクリメント
  • 配列
    • 配列の作り方
    • 要素の追加
    • 配列の長さ
    • 中身のない配列を作る
  • ループ
    • for文
    • while文
    • lengthを使おう
    • breakを使って処理を中断しよう
    • もうひとつのfor文
  • 条件分岐
    • 等号・不等号
    • 等しくないときをチェックする
    • 否定
    • 基本のif文
    • else
    • elseif
  • 関数を作ろう
    • 関数とは
    • 関数名
    • while文
    • 引数
    • 返り値
    • スコープ
    • なぜ関数を作るのか

【p5.jsチュートリアル目次】

  • Processingを始めよう
    • 概要
    • 開発環境
    • setupとdrawとは
  • 四角形の描き方
    • 座標について
    • 最も基本の長方形
    • 四隅の座標を指定する描き方
    • ボーダー(境界線)
    • 塗りつぶす
  • 円の描き方
    • 円の描き方
    • 楕円の描き方
    • 定数
    • 一部が欠けた円の描き方
    • ボーダーと塗りつぶしの復習
  • 線の描き方
    • 線の描き方
    • 線の色の付け方
    • 線の太さ
  • 色の付け方
    • RGB
    • 塗りつぶす関数fill
    • 線を色付ける関数stroke
    • アルファ値