Move Vertex from SVG

Hello!

Currently I am working on moving backgrounds for music, don’t bother the sound analysis stuff, my only problem is that I want to move the Vertex points from one SVG Child to my created frequency bands. It works if I create the shape in Processing, but if load an SVG and want to add the movement variables to the Points in the SVG, it keeps adding the variable instead of getting back to the starting number.

Does anyone happen to have a solution?

Thanks in advance!

import ddf.minim.*;
import ddf.minim.analysis.*;
import geomerative.*;

Minim minim;
AudioPlayer audio;
FFT fft;


//SVG File
PShape main;
String[] shapeNames = {"rect1", "s1", "rect2", "s2", "rect3", "s3", "rect4", "s4", "rect5", "s5" };
PShape[] mainShapes;


//movement;
float amp;

//Highest and Lowest Movement (for mapping)
int high = 200;
int low = 0;

float[] bandmove = {0, 0, 0, 0, 0, 0, 0, 0};



void setup()
{

  size(1280, 720);
  frameRate(24);
  colorMode(HSB, 360, 100, 100, 100);

  minim = new Minim(this);
  audio = minim.loadFile("short.mp3", 1024);
  audio.play();

  fft = new FFT(audio.bufferSize(), audio.sampleRate());
  fft.linAverages( 8 ); //set bands to 8


  //load main Shape
  main = loadShape("bg_minimal3.svg");
  mainShapes = new PShape[shapeNames.length];
  //loop through children
  for (int i = 0; i < shapeNames.length; i++) {
    mainShapes[i] = main.getChild(shapeNames[i]);
  }
}

void draw()
{
  background(0);

  fft.forward(audio.mix);

  float[] avgVals = new float[fft.avgSize()]; //average Values in created bands
  boolean[] bandbeat = new boolean[fft.avgSize()]; //band detection
  amp = map(audio.mix.level(), 0, 0.4, low, high); //general amplitude



  //Bands Calculation in db
  for (int i = 0; i < avgVals.length; i++)
  {
    // convert the magnitude to a DB value. 
    // this means values will range roughly from 0 for the loudest
    // bands to some negative value.
    float bandDB = 20 * log( 2 * fft.getBand(i) / fft.timeSize() );
    //Map DB to 
    float bandHeight = map( bandDB, -150, 0, low, high );
    rectMode(CENTER);
    //square(20+i+(50*i), height/2, bandHeight);

    avgVals[i] = bandHeight;
  }


  //beat detection each band
  for (int i=0; i< avgVals.length; i++ ) {

    if (avgVals[i] >= 90) {
      bandbeat[i] = true;
    }

    if (bandbeat[i] == true)
    {
      bandmove[i] = amp;
    }
    bandmove[i] *= 0.9;
  }



  //Movement variables
  float m0 = bandmove[0];
  float m1 = bandmove[1];
  float m2 = bandmove[2];
  float m3 = bandmove[3];
  float m4 = bandmove[4];
  float m5 = bandmove[5];
  float m6 = bandmove[6];
  float m7 = bandmove[7];


  //display the rect which should move
  mainRect(m0, m1, m2, m3, m4, m5, m6, m7);

  //display other svg childs
  for (int i = 9; i >= 0; i--) {
    shape(mainShapes[i]);
  }
}



void mainRect(float m0, float m1, float m2, float m3, float m4, float m5, float m6, float m7) {

  //loops for getting 2 Points at a Time in 2 different svg childs 
  //one is the main rect, the other the drop shadow

  //XMove
  for (int i = 2; i<=3; i++) {
    //println(i);
    for (int j = 0; j<=1; j++) {
      PVector v = mainShapes[i].getVertex(j);
      v.x -= m0;
      println(v.x);
      mainShapes[i].setVertex(j, v);
    }
  }

  for (int i = 2; i<=3; i++) {
    //println(i);
    for (int j = 18; j<=19; j++) {
      PVector v = mainShapes[i].getVertex(j);
      v.x += m1;
      mainShapes[i].setVertex(j, v);
    }
  }
  for (int i = 2; i<=3; i++) {
    //println(i);
    for (int j = 22; j<=23; j++) {
      PVector v = mainShapes[i].getVertex(j);
      v.x += m2;
      mainShapes[i].setVertex(j, v);
    }
  }

  for (int i = 2; i<=3; i++) {
    //println(i);
    for (int j = 36; j<=37; j++) {
      PVector v = mainShapes[i].getVertex(j);
      v.x -= m3;
      mainShapes[i].setVertex(j, v);
    }
  }

  //Y MOVE
  for (int i = 2; i<=3; i++) {
    //println(i);
    for (int j = 5; j<=6; j++) {
      PVector v = mainShapes[i].getVertex(j);
      v.y +=m4;
      mainShapes[i].setVertex(j, v);
    }
  }

  for (int i = 2; i<=3; i++) {
    //println(i);
    for (int j = 9; j<=10; j++) {
      PVector v = mainShapes[i].getVertex(j);
      v.y +=m5;
      mainShapes[i].setVertex(j, v);
    }
  }

  for (int i = 2; i<=3; i++) {
    //println(i);
    for (int j = 13; j<=14; j++) {
      PVector v = mainShapes[i].getVertex(j);
      v.y +=m6;
      mainShapes[i].setVertex(j, v);
    }
  }

  for (int i = 2; i<=3; i++) {
    //println(i);
    for (int j = 27; j<=28; j++) {
      PVector v = mainShapes[i].getVertex(j);
      //v.x += x;
      v.y -=m7;
      mainShapes[i].setVertex(j, v);
    }
  }
}

well, if you are modifying the vertex position (setVertex) then it will remain changed. I don’t have your files so I have no idea how the shapes look like. If it’s simple enough, I would copy the vertices and draw them with begin/endShape manually, for example. Unfortunately I don’t find copy function for PShape, which may come in handy in this case.

PShape has translate / resetMatrix. If you are moving the shape uniformly, you can modify the transformation to move all the vertices and reset, but looking at your code I guess that is not the case.