WEBGL positioning issue array of torus objects

p5.js Coding Questions
1

Hey in this specific code I have a problem aligning an array of torus objects using WEBGL.
When I switch it to circle with the same coordinates it runs fine. But when I use translate and Torus everything is off. I feel the translate function somehow needs to be done at a different position in the code…

Here is the version which runs fine the circles emit from the position they should:

let soundwaves = [];
let interval;
let maxSoundwaves = 25;

let y = 0;
let x = 0;
let angle = 0;
let period = 0.006;

function setup() {
  createCanvas(windowWidth,windowHeight,WEBGL);
  interval = setInterval(addSoundwave, 600);
}

function addSoundwave() {
  let s = new Soundwave(x, y, 0, 0);
  soundwaves.push(s);

  if (soundwaves.length >= maxSoundwaves) {
    soundwaves.splice(s, 1);
  }
}

function draw() {
  background(0);
  
  //move object and sound waves x and y;
  let ampx = width;
  x = map(sin(angle), -1, 1, 0, ampx);
  y = 500;
  angle += period;
  
  translate (-500, -500, 0);
  fill(255);
  circle(x, y, 20);

  for (let soundwave of soundwaves) {
    soundwave.show();
    soundwave.update();
  }
}

class Soundwave {
  constructor(x, y, radius, expand) {
    this.x = x;
    this.y = y;
    this.radius = radius;
    this.expand = expand;
  }

  update() {
    this.expand += 8;
    this.radius = this.expand;
  }

  show() {
    //CIRCLE
    noFill(0);
    stroke(255);
    strokeWeight(5);
    circle(this.x,this.y,this.radius)  

    //TORUS
//    translate(this.x,this.y,0)
//    noStroke(0);
//    torus(this.radius, 10, 100, 12);

  }
}

Same exact code but switching from circle to torus in the “show()” function and use translate with the same x and y values to move the torus “circles” - they are emitting from total different positions. I played around with the translate values and the position with no luck:

let soundwaves = [];
let interval;
let maxSoundwaves = 25;

let y = 0;
let x = 0;
let angle = 0;
let period = 0.006;

function setup() {
  createCanvas(windowWidth,windowHeight,WEBGL);
  interval = setInterval(addSoundwave, 600);
}

function addSoundwave() {
  let s = new Soundwave(x, y, 0, 0);
  soundwaves.push(s);

  if (soundwaves.length >= maxSoundwaves) {
    soundwaves.splice(s, 1);
  }
}

function draw() {
  background(0);
  
  //move object and sound waves x and y;
  let ampx = width;
  x = map(sin(angle), -1, 1, 0, ampx);
  y = 500;
  angle += period;
  
  translate (-500, -500, 0);
  fill(255);
  circle(x, y, 20);

  for (let soundwave of soundwaves) {
    soundwave.show();
    soundwave.update();
  }
}

class Soundwave {
  constructor(x, y, radius, expand) {
    this.x = x;
    this.y = y;
    this.radius = radius;
    this.expand = expand;
  }

  update() {
    this.expand += 8;
    this.radius = this.expand;
  }

  show() {
    //CIRCLE
//    noFill(0);
//    stroke(255);
//    strokeWeight(5);
//    circle(this.x,this.y,this.radius)  

    //TORUS
    translate(this.x,this.y,0)
    noStroke(0);
    torus(this.radius, 10, 100, 12);

  }
}
1 Like
2

push() & pop()

3

:palm_tree::man_facepalming::palm_tree:
Thank you, @GoToLoop !

1 Like