Change Processing code to p5.js

Processing Beginners
1

Hi I’m looking to change some Processing code into p5.js code. I’m super new to both Processing and p5.js so I’m wondering if anyone can help transfer the bottom Processing code into p5.js compatible code. Please help! Thanks!!

int num = 5; 
Spring[] springs = new Spring[num]; 

void setup() {
  size(640, 360);
  noFill(); 
  springs[0] = new Spring(35, 10, 15, 0.98, 8.0, 0.1, springs, 0); 
  springs[1] = new Spring(27, 32, 15, 0.95, 9.0, 0.1, springs, 1); 
  springs[2] = new Spring(63, 20, 7, 0.90, 9.9, 0.1, springs, 2);
  springs[3] = new Spring(55, 45, 15, 0.90, 9.9, 0.1, springs, 3);
  springs[4] = new Spring(14, 70, 7, 0.90, 9.9, 0.1, springs, 4);
}

void draw() {
  background(255);
  line(42, 11, 59, 18);
  line(62, 23, 58, 37);
  line(22, 44, 17, 60);

  for (Spring spring : springs) { 
    spring.update(); 
    spring.display();
  }
}


void mouseMoved() {
  for (Spring spring : springs) { 
    spring.pressed();
  }
}

void mouseReleased() {
  for (Spring spring : springs) { 
    spring.released();
  }
}

class Spring { 
  // Screen values 
  float xpos, ypos;
  float tempxpos, tempypos; 
  int size = 20; 
  boolean over = true; 
  boolean move = false; 

  // Spring simulation constants 
  float mass;       // Mass 
  float k = 0.2;    // Spring constant 
  float damp;       // Damping 
  float rest_posx;  // Rest position X 
  float rest_posy;  // Rest position Y 

  // Spring simulation variables 
  //float pos = 20.0; // Position 
  float velx = 0.0;   // X Velocity 
  float vely = 0.0;   // Y Velocity 
  float accel = 0;    // Acceleration 
  float force = 0;    // Force 

  Spring[] friends;
  int me;

  // Constructor
  Spring(float x, float y, int s, float d, float m, 
  float k_in, Spring[] others, int id) { 
    xpos = tempxpos = x; 
    ypos = tempypos = y;
    rest_posx = x;
    rest_posy = y;
    size = s;
    damp = d; 
    mass = m; 
    k = k_in;
    friends = others;
    me = id;
  } 

  void update() { 
    if (move) { 
      rest_posy = mouseY; 
      rest_posx = mouseX;
    } 

    force = -k * (tempypos - rest_posy);  // f=-ky 
    accel = force / mass;                 // Set the acceleration, f=ma == a=f/m 
    vely = damp * (vely + accel);         // Set the velocity 
    tempypos = tempypos + vely;           // Updated position 

    force = -k * (tempxpos - rest_posx);  // f=-ky 
    accel = force / mass;                 // Set the acceleration, f=ma == a=f/m 
    velx = damp * (velx + accel);         // Set the velocity 
    tempxpos = tempxpos + velx;           // Updated position 


    if ((overEvent() || move) && !otherOver() ) { 
      over = true;
    } else { 
      over = false;
    }
  } 

  // Test to see if mouse is over this spring
  boolean overEvent() {
    float disX = tempxpos - mouseX;
    float disY = tempypos - mouseY;
    if (sqrt(sq(disX) + sq(disY)) < size/2 ) {
      return true;
    } else {
      return false;
    }
  }

  // Make sure no other springs are active
  boolean otherOver() {
    for (int i=0; i<num; i++) {
      if (i != me) {
        if (friends[i].over == false) {
          return false;
        }
      }
    }
    return false;
  }

  void display() { 
    if (over) { 
      stroke(000);
    } else { 
      stroke(000);
    } 
    ellipse(tempxpos, tempypos, size, size);
  } 

  void pressed() { 
    if (over) { 
      move = true;
    } else { 
      move = false;
    }
  } 

  void released() { 
    move = false; 
    rest_posx = xpos;
    rest_posy = ypos;
  }
}
2

This may help : https://github.com/processing/p5.js/wiki/Processing-transition
I would recommend to write your functions in p5 once at time.
If you’re stuck at some point, fell free to ask for help. :smiley:

3

Thanks @colin

I’ve managed to change it all to p5.js, but I want the circles to go back to their starting points when the mouse is pressed. However, at the moment when the mouse is pressed, the circles disappear. Do you know why this keeps happening?

Thanks!!

var num=5; 
var springs = [] 

function setup() {
  createCanvas(window.innerWidth, window.innerHeight);
  noFill(); 
  springs[0] = new Spring(35, 10, 15, 0.98, 8.0, 0.1, springs, 0); 
  springs[1] = new Spring(27, 32, 15, 0.95, 9.0, 0.1, springs, 1); 
  springs[2] = new Spring(63, 20, 7, 0.90, 9.9, 0.1, springs, 2);
  springs[3] = new Spring(55, 45, 15, 0.90, 9.9, 0.1, springs, 3);
  springs[4] = new Spring(14, 70, 7, 0.90, 9.9, 0.1, springs, 4);
}

function draw() {
  background(255);
  line(42, 11, 59, 18);
  line(62, 23, 58, 37);
  line(22, 44, 17, 60);

  for (var i = 0; i < num; i++) { 
    springs[i].update(); 
    springs[i].display();
  }
}


function mouseMoved() {
  for (var i = 0; i < num; i++) { 
    springs[i].pressed();
  }
}

function touchEnded() {
  for (var i = 0; i < num; i++) { 
    springs[i].released();
  }
}

///////////////////////////////////////////////

// Spring class
function Spring (_x, _y, _s, _d, _m, _k_in, _others, _id) {
  // Screen values 
  // this.xpos = _x;
  // this.ypos = _y;

  this.x_pos = _x;
  this.y_pos= _y;

  this.size = 20;
  this.size = _s; 

  this.over = false; 
  this.move = false; 

  // Spring simulation constants 
  this.mass = _m;       // Mass 
  this.k = 0.2;    // Spring constant 
  this.k = _k_in;
  this.damp = _d;       // Damping 
  this.rest_posx = _x;  // Rest position X 
  this.rest_posy = _y;  // Rest position Y 

  // Spring simulation variables 
  //float pos = 20.0; // Position 
  this.velx = 0.0;   // X Velocity 
  this.vely = 0.0;   // Y Velocity 
  this.accel = 0;    // Acceleration 
  this.force = 0;    // Force 

  this.friends = _others;
  this.id = _id;

  this.update = function() {

    if (this.move) { 
      this.rest_posy = mouseY; 
      this.rest_posx = mouseX;
    }

    this.force = -this.k * (this.y_pos - this.rest_posy);  // f=-ky 
    this.accel = this.force / this.mass;                 // Set the acceleration, f=ma == a=f/m 
    this.vely = this.damp * (this.vely + this.accel);         // Set the velocity 
    this.y_pos = this.y_pos + this.vely;           // Updated position 


    this.force = -this.k * (this.x_pos - this.rest_posx);  // f=-ky 
    this.accel = this.force / this.mass;                 // Set the acceleration, f=ma == a=f/m 
    this.velx = this.damp * (this.velx + this.accel);         // Set the velocity 
    this.x_pos = this.x_pos + this.velx;           // Updated position 

 


    if ((this.overEvent() || this.move) && !(this.otherOver()) ) { 
      this.over = true;
    } else { 
      this.over = false;
    }
  } 

  // Test to see if mouse is over this spring
  this.overEvent = function() {
    var disX = this.x_pos - mouseX;
    var disY = this.y_pos - mouseY;
    var dis = createVector(disX, disY);
    if (dis.mag() < this.size/2 ) {
      return true;
    } else {
      return false;
    }
  }

  // Make sure no other springs are active
  this.otherOver = function() {
    for (var i=0; i<num; i++) {
      if (i != this.id) {
        if (this.friends[i].over == false) {
          return false;
        }
      }
    }
    return false;
  }

  this.display = function() { 
    if (this.over) { 
      stroke(000);
    } else { 
      stroke(000);
    } 
    ellipse(this.x_pos, this.y_pos, this.size, this.size);
  } 

  this.pressed = function() { 
    if (this.over) { 
      this.move = true;
    } else { 
      this.move = false;
    }
  } 

  this.released = function() { 
    this.move = false; 
    this.rest_posx = this.xpos;
    this.rest_posy = this.ypos;
  }
}
4

Hi @chloe,

did you mispelled x_pos and y_pos ?

this.released = function() { 
    this.move = false; 
    this.rest_posx = this.x_pos;
    this.rest_posy = this.y_pos;
  }
5

You also might be interested in some sketches available in both Java Mode & p5js: :sunglasses: