Last updated: 2016 -Sep 2014. Kajiyama         [ 総合案内 CG/CADに戻る ]

コピペで学ぶ
Processing言語によるグラフィックス・プログラミング入門

グラフィックス・リテラシ−教育:
「図学 I ・図形情報 I 」科目 修了後のコースウェア

福岡大学工学部図学教室   梶山 喜一郎


  1. はじめに
  1. プログラミング言語 Processing(プロセシング)を使う
  2. Processingの公式サイト
  3. 学習に便利なリファレンス マニュアル
  4. Processingの入門書籍案内
  2. 初心者体験
プログラミング言語を用いてソースコードを記述することがコーディング. 記述したものがソースファイルである.
  1. ソフトウェアProcessingをインストール・起動・終了する.

    1. ダウンロードとインストール[ v3版v2版 ]
    2. 起動・終了と初期設定[ v3版v2版 ] (作業フォルダ・日本語設定)
    3. 操作画面を理解する[ v3版v2版 ]
    4. プログラムの結果は,キャンバスかコンソールに表示する

  2. ソースファイルを観察・実行・保存する

    1. 仮想教室のコピペ学習法:ソースファイルをコピー・ペースト・ラン

    2. 観察:豊富なサンプルの読込と実行
      1. YellowtailSine Wave のソースファイルを実行
      2. アスキー文字日本語文字 の描画ソースファイルを実行
      3. 直線と長方形の描画のソースファイルを実行
      4. マウスで文字を描くソースファイルを実行
    3. ソースファイルはsetup( ) と draw( )で基本を構成
  3. 初心者のためのプログラム言語とコ-ディング
  1. プログラミングの基礎
    1. ソースファイルの基本構造
    2. プログラム言語の関数変数
    3. マウスを押すとプログラムを終了させる.
      void mousePressed() {
      exit();
      }
  2. ループによるプログラムらしい制御の方法
    1. メインループ関数draw( ) でフレームを繰返す
          i. 色を繰返し変える  ii. 直線を繰返し描く  iii. 円を繰返し描く
    2. for ループ 決められた回数繰返す
          i. 直線を繰返し描く  ii. 円を繰返し描く
    3. while ループ 一定の条件になるまで繰返す
          i. 直線を繰返し描く  ii. 円を繰返し描く
    4. if ループ 条件によって処理内容を変える
          i. 直線を繰返し描く  ii. 円を繰返し描く

  3. random で不規則な値の変数にする
    1. 色を繰返し変える  b. 直線を繰返し描く  c. 円を繰返し描く

  4. プログラムの実行結果を画像やWEBに保存する

    1. 結果を静止画,連続画像,動画,pdf,実行形式で保存
      1. 静止画像を[jpg, png, gif, tif, tga] 形式で保存 save ( )
      2. 動きを連番を付けた連続画像で保存 saveFrame ( )
      3. 連続画像から動画[.mov]を作成 ツール->MovieMaker
      4. pdf形式で保存 import processing.pdf.*;
      5. プログラムを実行ファイル[.exe]で保存

    2. 結果を processing.js を使用しWEBに表示する方法
      1. マウスで文字・図形を描く
      2. 円を繰返し描く/ 線を繰返し描く
      3. 等速直線運動/ 放物運動 / 等加速度円運動 / 振り子運動
  4. グラフィックス・プログラミング
  1. 文章の表示
    1. 文字の描画に日本語フォントを使う
    2. 詩文を表示する [text( )] ["+"] [\n]
    3. 詩文を整形・レイアウト [textLording( )]
    4. 動き出す詩文
    5. [未]文字列をキーボードから入力する

  2. 写真・画像・動画の表示
    1. 写真・画像を取り込み・キャンバスに表示する
    2. 動画を取り込み・キャンバスに表示する

  3. 色を表示
    1. 色の指定方法

  4. 平面図形を描く
    1. キャンバスと座標系
    2. キャンバスの座標系を平行移動する
    3. キャンバスに直線・長方形・円を描く
    4. 線の性質(線幅,線色,端部)を決める
    5. 平面図形はプログラムに描かれた順に重ね書きする

  5. 関数は調べてから使う習慣を持つ--全部知る必要はない
    1. 困ったらリファレンス [ v3版v2版 ]で調べる
    2. 図形関数 (i) 平面図形 (ii) 立体図形
    3. 数学関数 (i) 四則演算 (ii) 三角関数 (iii) 指数関数・対数関数
      (iv) ベクトルの関数

  6. 物理運動のシミュレーションとアニメーション表現
    Processingは,関数draw( )で静止画を作成する.さらに,関数drawは1秒間に60回繰り返し静止画を作成するので,これがアニメーション(動画)になる.

    1. ベクトルを使った水平運動(運動の第1と第2法則)
      1. 位置と速度で等速直線運動
      2. 水平面上を等速直線運動
      3. 加速度と減衰率で速度を変化させる
    2. ベクトルを使った落下運動
      1. 重力加速度と落下運動
    3. ベクトルを使った放物運動 (水平運動と落下運動の合成)
      1. 放物運動
    4. ベクトルを使ったバネ運動
      1. 水平ばね振り子  ii. 鉛直ばね振り子
    5. 極座標を使った円運動と振り子運動
      1. 復習 極座標・円運動・振り子運動
      2. 水平面上の円運動
      3. 鉛直面上の円運動と振り子運動
    6. [未]引力

  7. ジェネラティブ・アート・ら・し・く・表現する
    Generative artは、ソフトウェアのアルゴリズムや数学的過程によってアルゴリズム的に生成・合成・構築されるアート -wikipedia

    1. 指先でランダムに変化する 円 ellipse 長方形 rect
    2. 回転する 1本の直線 2本の直線  時計

  8. 配列の基本
    1. 一次元配列 i. 作成と表示 ii. 操作
    2. 二次元配列 i. 作成と表示 ii [未]操作
体験クリック

 Hue  
Sine Wave
Radial Gradient
Game of Life
Distance2d
Perspective
Scale Shape
Icosahedra

sample
 他人の作品とプログラムを分析することが学習.
 (1) processing.orgまずはここをクリック
 (2) OpenProcessingサンプル体験
 (3) [File]->[Examples]->[Java Exsamples]を体験

日本語表示

文字書き

線の構成

円の構成

振り子運動

放物運動

Examples: SineWave

Examples: Yellowtail

Examples: Wiggling

Nitin Waghmare

Ramiz Midani

bitcraft

Efrain Garcia A

mitchell whitelaw
[ 先頭に戻る ]   [総合案内 CG/CADに戻る ]