Animate the nodes

Programming Questions

chotu90

in Programming Questions • 3 months ago

I wrote this in processing. I wanna animate the whole structure as the mouse is being dragged any help? I'm still a begineer at this. Maxim is only for sound

ArrayList network = new ArrayList();
Maxim maxim;
AudioPlayer player;
AudioPlayer player2;


void setup(){
  background(0);
  size(400,400);
  smooth();
  maxim = new Maxim(this);
  player = maxim.loadFile("atmos1.wav");
  player.setLooping(true);
  player2 = maxim.loadFile("bells.wav");
  player2.setLooping(true);
  player.volume(0.25);
}

void draw(){
  stroke(200,random(200,500),random(100,200),20);
  
}

void mouseDragged(){
  player.play();
  player2.play();
  PVector nodes = new PVector(mouseX,mouseY);
  network.add(nodes);
  
  for(int i = 0; i<network.size(); i++){
    PVector li = (PVector) network.get(i);
    
    float distance = nodes.dist(li);
    
    if (distance < 50){
      
      line(li.x,li.y,nodes.x,nodes.y);
      //ellipse(nodes.x,li.y,2,2);
    }
    if (distance < 30){
      ellipse(nodes.x,nodes.y,2,2);
    }
    player.setFilter((float) mouseY/height*5000,mouseX / width);
  player2.setFilter((float) mouseY/height*5000,mouseX / width);
  
  player2.ramp(1.,1000);
  player2.speed((float) mouseX/width/2);
  
  }


}

Replies(9)

PhiLho

" Maxim is only for sound"
Then remove code that is not relevant to your problem, it would save us the time to do it ourselves.

I did it to test your code, which is nice.
Your request is a bit fuzzy...
Animate, how?

Basically, you have to iterate on your array list, and slightly change the coordinates.
You also have to call background in draw(), and draw all the network there.

Not obvious, because your sketch mostly relies on a static update of the screen...

PhiLho

Re: Animate the nodes

3 months ago

This reproduces more or less your sketch in a dynamic way, although it quickly becomes slow.

ArrayList<PVector> network = new ArrayList<PVector>();
/*
Maxim maxim;
AudioPlayer player;
AudioPlayer player2;
*/
void setup() {
size(400, 400);
smooth();
/*
maxim = new Maxim(this);
player = maxim.loadFile("atmos1.wav");
player.setLooping(true);
player2 = maxim.loadFile("bells.wav");
player2.setLooping(true);
player.volume(0.25);
*/
}
void draw() {
background(0);
for (PVector node : network) {
for (PVector li : network) {
if (li == node)
continue;
float distance = node.dist(li);
if (random(10) > 2)
stroke(200, random(200, 500), random(100, 200), 20);
if (distance < 50) {
line(li.x, li.y, node.x, node.y);
//ellipse(nodes.x,li.y,2,2);
}
if (distance < 30) {
ellipse(node.x, node.y, 2, 2);
}
}
}
}
void mouseDragged() {
/*
player.play();
player2.play();
*/
PVector node = new PVector(mouseX, mouseY);
network.add(node);
/*
player.setFilter((float) mouseY/height*5000, mouseX / width);
player2.setFilter((float) mouseY/height*5000, mouseX / width);
player2.ramp(1., 1000);
player2.speed((float) mouseX/width/2);
*/
}

Chrisir

Re: Animate the nodes

3 months ago

here is the otherwise unchanged program without maxim

looks very nice

ArrayList network = new ArrayList();
//Maxim maxim;
//AudioPlayer player;
//AudioPlayer player2;
int posX, posY;
void setup() {
background(0);
size(400, 400);
smooth();
//maxim = new Maxim(this);
// player = maxim.loadFile("atmos1.wav");
// player.setLooping(true);
// player2 = maxim.loadFile("bells.wav");
// player2.setLooping(true);
// player.volume(0.25);
}
void draw() {
stroke(200, random(200, 500), random(100, 200), 20);
}
void mouseDragged() {
// player.play();
// player2.play();
if ( mouseButton==LEFT) {
PVector nodes = new PVector(mouseX, mouseY);
network.add(nodes);
for (int i = 0; i<network.size(); i++) {
PVector li = (PVector) network.get(i);
float distance = nodes.dist(li);
if (distance < 50) {
line(li.x, li.y, nodes.x, nodes.y);
//ellipse(nodes.x,li.y,2,2);
}
if (distance < 30) {
ellipse(nodes.x, nodes.y, 2, 2);
}
// player.setFilter((float) mouseY/height*5000, mouseX / width);
// player2.setFilter((float) mouseY/height*5000, mouseX / width);
//
// player2.ramp(1., 1000);
// player2.speed((float) mouseX/width/2);
}
} // if
else
{
}
}

PhiLho

Re: Animate the nodes

3 months ago

Little optimization, back to integer counters:

void draw() {
background(0);
for (int i = 0; i < network.size() - 1; i++) {
PVector node = network.get(i);
for (int j = i + 1; j < network.size(); j++) {
PVector li = network.get(j);
float distance = node.dist(li);
if (random(10) > 2)
stroke(200, random(200, 500), random(100, 200), 20);
if (distance < 50) {
line(li.x, li.y, node.x, node.y);
//ellipse(nodes.x,li.y,2,2);
}
if (distance < 30) {
ellipse(node.x, node.y, 2, 2);
}
}
}
}

PhiLho

Re: Animate the nodes

3 months ago

With animation:

ArrayList<PVector> network = new ArrayList<PVector>();
ArrayList<PVector> moves = new ArrayList<PVector>();
void setup() {
size(400, 400);
smooth();
}
void draw() {
background(0);
for (int i = 0; i < network.size() - 1; i++) {
PVector node = network.get(i);
node.add(moves.get(i));
for (int j = i + 1; j < network.size(); j++) {
PVector li = network.get(j);
float distance = node.dist(li);
if (random(10) > 2)
stroke(200, random(200, 500), random(100, 200), 20);
if (distance < 50) {
line(li.x, li.y, node.x, node.y);
//ellipse(nodes.x,li.y,2,2);
}
if (distance < 30) {
ellipse(node.x, node.y, 2, 2);
}
}
}
}
void mouseDragged() {
PVector node = new PVector(mouseX, mouseY);
network.add(node);
//PVector move = new PVector(-(pmouseY - mouseY) / 5, (pmouseX - mouseX) / 5);
PVector move = new PVector(0.25 - random(0.5), 0.25 - random(0.5));
moves.add(move);
}

Chrisir

Re: Animate the nodes

3 months ago

ah, I am too late... again.....

Basically, you have to iterate on your array list, and slightly change the coordinates.
You also have to call background in draw(), and draw all the network there.

left mouse - paint
right mouse - move the whole thing

//
ArrayList network = new ArrayList();
ArrayList<Line> lines = new ArrayList();
//Maxim maxim;
//AudioPlayer player;
//AudioPlayer player2;
int posX, posY;
void setup() {
background(0);
size(400, 400);
smooth();
//maxim = new Maxim(this);
// player = maxim.loadFile("atmos1.wav");
// player.setLooping(true);
// player2 = maxim.loadFile("bells.wav");
// player2.setLooping(true);
// player.volume(0.25);
stroke(200, random(200, 500), random(100, 200), 20);
}
void draw() {
background(0);
translate (posX, posY);
for (int i = 1; i<network.size(); i++) {
PVector li = (PVector) network.get(i);
PVector li2 = (PVector) network.get(i-1);
line(li.x, li.y, li2.x, li2.y);
ellipse(li.x, li.y, 2, 2);
}
for (int i = 1; i<lines.size(); i++) {
Line newLine= lines.get(i);
newLine.display();
}
}
void mouseDragged() {
// player.play();
// player2.play();
if ( mouseButton==LEFT) {
PVector nodes = new PVector(mouseX, mouseY);
network.add(nodes);
for (int i = 0; i<network.size(); i++) {
PVector li = (PVector) network.get(i);
float distance = nodes.dist(li);
if (distance < 50) {
// line(li.x, li.y, nodes.x, nodes.y);
Line newLine= new Line(li.x, li.y, nodes.x, nodes.y);
lines.add(newLine);
//ellipse(nodes.x,li.y,2,2);
}
if (distance < 30) {
ellipse(nodes.x, nodes.y, 2, 2);
}
// player.setFilter((float) mouseY/height*5000, mouseX / width);
// player2.setFilter((float) mouseY/height*5000, mouseX / width);
//
// player2.ramp(1., 1000);
// player2.speed((float) mouseX/width/2);
}
} // if
else
{
posX-=pmouseX-mouseX;
posY-=pmouseY-mouseY;
}
}
//
class Line {
float x1, y1, x2, y2;
// constr
Line (float x1_, float y1_, float x2_, float y2_) {
x1=x1_;
y1=y1_;
x2=x2_;
y2=y2_;
} // constr
void display () {
line(x1, y1, x2, y2);
}
} // class
//

tfguy44

Re: Animate the nodes

3 months ago

Something like this?

// Music code removed.
class Node{
PVector p, v;
Node(){
p = new PVector( mouseX, mouseY, 0);
v = new PVector( mouseX-pmouseX, mouseY-pmouseY, int(random(200,500)) );
//v = new PVector( random(-5,5), random(-5,5), int(random(200,500)) ); // Alternate movement.
}
boolean draw(){
p.x+=v.x;
p.y+=v.y;
if( p.x < 0 ){ p.x = 0; v.x*=-1; }
if( p.y < 0 ){ p.y = 0; v.y*=-1; }
if( p.x > width ){ p.x = width; v.x*=-1; }
if( p.y > height ){ p.y = height; v.y*=-1; }
fill(200,random(200,500),random(100,200) );
noStroke();
ellipse(p.x,p.y,5,5);
v.z--; // Time to live.
return( v.z <= 0 ); // Eventually die.
}
}
ArrayList<Node> network = new ArrayList();
void setup(){
background(0);
size(400,400);
smooth();
}
void draw(){
background(0);
noFill();
for(int i = network.size()-1; i>= 0; i-- ){
if( network.get(i).draw() ){
network.remove(i); // Kill me.
} else {
stroke(255,255,0,50);
for( int j=0; j<i; j++ ){
if( network.get(j).p.dist( network.get(i).p ) < 50 ){
line(network.get(j).p.x,network.get(j).p.y,network.get(i).p.x,network.get(i).p.y);
}
}
}
}
}
void mouseDragged(){
network.add( new Node() );
}

EDIT: Wow, I am really late...

chotu90

Re: Animate the nodes

3 months ago

WOW thanks a lot to all of you :)

btw what does the (v.z) mean? I didn't understand that part and how do I make the audio stop when all the particles are dead?

GoToLoop

Re: Animate the nodes

3 months ago

PVector class has 3 float variables -> x, y, z.

So, v.z accesses the field z from the PVector object that v is referencing to.

Go to this reference to learn more about PVector class:

http://processing.org/reference/PVector.html

Top Reply