環境／macOS Montery Apple Silicon Mac

サウンドビジュアライズするモチーフとして、スピーカーのコーンをイメージしています。アニメーショングラフィック要素では、振動図形であるリサジュー図形を利用しています。環境／macOS Montery Apple Silicon Macサウンドビジュアライズするモチーフとして、スピーカーのコーンをイメージしています。アニメーショングラフィック要素では、振動図形であるリサジュー図形を利用しています。

アニメーションの設計概要は、リサジュー図形の各周波数を１で揃え丸い円形を作り、周波の位相の値を変化させることで上下左右に動かします。さらに、そこにSoundライブラリーの音圧を加え、コーンの振動に見立てています。

The sound visualization motif is based on the image of a speaker cone. As an animated graphic element, we use the Lissajous figure, which is a vibrating figure.

The design of the animation is outlined by aligning each frequency of the Lissajous figure with 1 to create a round circle, and moving it up, down, left, and right by changing the phase value of the frequencies. The sound pressure from the Sound library is then added to the circle to simulate the vibration of a cone.

minimal-speaker (Lissajous figure)

Processing-Sound library

コードは、Soundライブラリーをインストールが必要になります。以前の投稿記事にも記載しています。
The code requires the Sound library to be installed. This is described in a previous post.

Source code of minimal-speaker(Lissajous figure)

下記コード内の soundfile = new SoundFile(this, “音源ファイル”); 適宜変更します。
soundfile = new SoundFile(this, “sound file”) in the code below; modify as appropriate.

/**
 *Sound-Lissajous-figure
 *This code made by barbe_generative_diary
 *URL https://barbegenerativediary.com/
 *date 3.16.2022Sound-Lissajous-figure
 */
 
import processing.sound.*;
SoundFile soundfile;
Amplitude vol;

lissajousFigure lisFig;

void setup(){
  size(1300,1300);
  background(10);
  frameRate(30);
  soundfile = new SoundFile(this, "sound005.mp3");
  soundfile.loop();
  vol = new Amplitude(this);
  vol.input(soundfile);
  
  lisFig = new lissajousFigure();
}

void draw(){
  fill(10,10);  
  noStroke();
  rect(0,0,width,height);
  soundfile.rate(1.1);
  float ampLength = vol.analyze();
  stroke(255);
  lisFig.update(ampLength);
}

リサジュー図形を使って円を描くクラス
Class for drawing circles using Lissajous shapes

/**The lissajous figure class
 * Drawing Circle
 */

class lissajousFigure{
  int pointCount = 300;
  int freqX =1;
  int freqY =1;
  float addFreqX = 1;
  float addFreqY = 1;
  float angle;
  float x,y; 
  float phiX = 0;
  float phiY = 0;
  int margin = 200;
  float withinX, withinY;
  
  lissajousFigure(){
    stroke(255);
    strokeWeight(2);
    smooth();
    noFill();
    translate(width/2, height/2);
    withinX = width/2-margin;
    withinY = height/2-margin;
  }
  
  void update(float amp){
    translate(width/2, height/2);
    beginShape();
      for(int i=0; i<=pointCount; i++){
        angle = map(i, 0,pointCount, 0,TWO_PI/2);

        x = sin(angle*freqX + radians(phiX));
        float addX = sin(angle * addFreqX);
        x = x * addX * amp*4;
        
        y = sin(angle*freqY + radians(phiY));
        float addY = cos(angle * addFreqY);
        y = y * addY * amp*4;
        
        x = x * withinX;
        y = y * withinY;
        vertex(x, y);
      }
      endShape();
      
      phiX += 1;
      phiY += 3;
  }
}

ーーーーー
Soundライブラリーの仕様は、下記ドキュメントにて参照ください。
Please refer to the following document for Sound library specifications.
Processing-Sound library documentation
ーーーーー

barbe_generative_library

Processing 参考書籍
[Book] Generative Design-Processingで切り拓く、デザインの新たな地平

初版／ 2016.2.25
ページ数／488ページ
出版社／ビー・エヌ・エヌ新社
言語／日本語

【Amazon.co.jp で購入】

ーーーーー
”Books”では、”barbe_generative_Library”として、
barbe_generative_diary の創作において実際に購入し、読んだ本を紹介します。

ーーーーー