using waveforms to draw down the screen
in
Core Library Questions
•
1 year ago
Hi,
I'm hoping someone can help me find out how to use the audio waveform data to draw both across and down the screen-
Basically, at the moment im just drawing sine waves that overlap each other from right to left- as soon as they hit the edge of the screen, they start again from the left, a little lower. I'm using a mask to create areas that the pattern "skips" over.
I'd like to use minim to do the same with audio input instead of just a sine wave.
So- draw the waveform 'dynamically', hit the edge of the screen, and then keep drawing the waveform a little lower.
Below is the code i have that uses sine waves.
- Fiber [] fiber;
- int NUMFIBERS = 3;
- int STEPS_PER_FRAME = 300; // number of moves made by each fiber per frame (call to draw())
- PGraphics collisionMask;
- void setup() {
- size(800,600);
- createFibers();
- createCollisionMask();
- background(0);
- }
- void createFibers () {
- fiber = new Fiber[NUMFIBERS];
- for (int i = 0; i < NUMFIBERS; i++) {
- fiber[i] = new Fiber(0, 0);
- fiber[i].amp = random(10, 40);
- // fiber[i].angle = random(360);
- // fiber[i].freq = 4 * int(random(1, 3));
- // fiber[i].shade = color(random(200, 250), 64);
- }
- }
- void createCollisionMask() {
- collisionMask = createGraphics(width, height, JAVA2D);
- collisionMask.beginDraw();
- // Clear the collision mask's background to white
- collisionMask.background(255);
- // Draw three black circles on the collision mask
- collisionMask.fill(0);
- collisionMask.ellipse(0.50*width, 0.35*height, 300, 100);
- collisionMask.endDraw();
- }
- void draw() {
- for (int j = 0; j < STEPS_PER_FRAME; j++) { // perform a number of steps per frame
- for (int i = 0; i < NUMFIBERS; i++) { // cycle through each fiber, and apply the following
- fiber[i].move();
- }
- }
- }
- class Fiber {
- float baseY; // the baseline to draw the sine wave around
- float prevX, prevY; // the last position that a line was drawn to
- float nextX, nextY; // the next position that a line may be drawn to (current position considered)
- float angle;
- float amp;
- float gap;
- float freq;
- color shade;
- Fiber(float x, float y) {
- // set the baseline and the previous and next drawing positions to the given position
- baseY = y;
- prevX = x;
- prevY = y;
- nextX = x;
- nextY = y;
- shade = color(250);
- angle = 0;
- amp = 40;
- gap = 4;
- freq = 4;
- }
- void move() {
- if (baseY > height) return; //contains the sketch to the height of the window
- strokeWeight(1);
- stroke(shade);
- angle += freq;
- nextX = nextX + 1;
- nextY = baseY + sin(radians(angle)) * amp; //create the sin wave in the y direction
- if (collisionMask.get(int(nextX), int(nextY)) != color(0)) { // if the points are not black
- line(prevX, prevY, nextX, nextY); // draw a line between the previous and next positions
- prevX = nextX; // update the previous position to match the next position
- prevY = nextY; // update the previous position to match the next position
- }
- if (nextX > width) { // if the next location is beyond the width of the sketch
- baseY += gap; // update the baseline for the sine wave
- prevX = 0; // reset the previous and next positions for drawing the fiber
- prevY = baseY;
- nextX = 0;
- nextY = baseY;
- }
- }
- }
Thanks =)
1