# WEBGL positioning issue array of torus objects

**URL:** https://discourse.processing.org/t/webgl-positioning-issue-array-of-torus-objects/40458
**Category:** Coding Questions
**Created:** [January 5, 2023, 12:15pm UTC](https://discourse.processing.org/t/webgl-positioning-issue-array-of-torus-objects/40458 "2023-01-05T12:15:45Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![Tilman](https://avatars.discourse-cdn.com/v4/letter/t/90db22/32.png) [@Tilman](https://discourse.processing.org/u/Tilman)
#### Post date: [January 5, 2023, 12:15pm UTC](https://discourse.processing.org/t/webgl-positioning-issue-array-of-torus-objects/40458/1 "2023-01-05T12:15:45Z")

</div>

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:

```auto
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:

```auto
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);

  }
}

```

---

<div class="post-metadata">

### Author: ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)
#### Post date: [January 5, 2023, 12:19pm UTC](https://discourse.processing.org/t/webgl-positioning-issue-array-of-torus-objects/40458/2 "2023-01-05T12:19:10Z")

</div>

[**push()**](https://p5js.org/reference/#/p5/push) & [**pop()**](https://p5js.org/reference/#/p5/pop)

---

<div class="post-metadata">

### Author: ![Tilman](https://avatars.discourse-cdn.com/v4/letter/t/90db22/32.png) [@Tilman](https://discourse.processing.org/u/Tilman)
#### Post date: [January 5, 2023, 12:38pm UTC](https://discourse.processing.org/t/webgl-positioning-issue-array-of-torus-objects/40458/3 "2023-01-05T12:38:12Z")

</div>

🌴🤦‍♂️🌴  
Thank you, @GoToLoop !