CGプログラミング演習
12　最終課題のヒント集

最終課題の制作に役立つヒント集を掲載します。
必要に応じて随時更新します。

1　背景を加算混色しない

  • draw() の中のピンク色の部分を... 
    // 描画内容を定めます
void draw()
{
  // 背景を黒く塗りつぶします
  background(0);

  // OpenGL を利用して加算混色します
  gl.glBlendFunc(GL.GL_SRC_ALPHA, GL.GL_ONE);

  • 次のように書き換えて、gl.glBlendFunc を無効にします（ピンク色の箇所）: 
    // 描画内容を定めます
void draw()
{
  // 背景を黒く塗りつぶします
  background(0);

  // OpenGL を利用して加算混色します
  // gl.glBlendFunc(GL.GL_SRC_ALPHA, GL.GL_ONE);

2　描画内容にさらに奥行きを与える

  • void drawGraphic(FFT fft) の内容に下記の行を追加します。
  • 音階に応じた奥行きを、描画内容に与える場合: 
      translate(0, 0, i);

  • 音量に応じた奥行きを、描画内容に与える場合: 
      translate(0, 0, r);

  • 追加する場所は、drawGraphic の以下の場所の直後です（ピンク色の箇所）。
    ＊rotateZ の直後です。 
    •     // マウス位置に応じて視点を変更します
    pushMatrix();
    rotateY(radians(angle * mouseX/float(width) + offset*i));
    rotateX(radians(angle * mouseY/float(height) + offset*i));
    rotateZ(radians(angle / 10.0 + offset * i));
    
    // 音階に応じた奥行きを、描画内容に与える。
    translate(0, 0, i);

    // 円を描画してみます
    stroke(h, 50, 100, 50);
    fill(h, 100, 100, 10);
    ellipse(pos.x, pos.y, r, r);

3　バネの動きと関係ない描画がしたい

  • バネの動きと関係しない描画をする場合には、pos.x, pos.y を用いた位置の指定をしなければOKです。
  • たとえば、下記の描画命令を drawGraphic に追加するとどうなるかためしてみてください。 
        // 円を描画する（バネの動きあり）
    ellipse(pos.x, pos.y, r, r);

    // 円を描画する（バネの動きなし）
    ellipse(0, 0, r, r);

4　バネの動きをカスタマイズしたい

  • バネの動きをカスタマイズしたい場合には、「K2」タブを開き、冒頭にある下記部分の値を変更します。
  • 下記のピンク色の部分の値を適当に変化させてみると、バネの動きが変化します。たとえば重さを「12.0」から「24.0」に変更してみると、バネの動きが遅くなるはずです。
    •   // バネの硬さを定めます
  float stiffness = 0.4;

  // バネの摩擦係数を定めます（減衰の程度）
  float damping = 0.9;

  // 円の重さを定めます
  float mass = 12.0;