WEBGL positioning issue array of torus objects

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);
}

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 {
this.x = x;
this.y = y;
this.expand = expand;
}

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

show() {
//CIRCLE
noFill(0);
stroke(255);
strokeWeight(5);

//TORUS
//    translate(this.x,this.y,0)
//    noStroke(0);

}
}

``````

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);
}

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 {
this.x = x;
this.y = y;
this.expand = expand;
}

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

show() {
//CIRCLE
//    noFill(0);
//    stroke(255);
//    strokeWeight(5);

//TORUS
translate(this.x,this.y,0)
noStroke(0);

}
}

``````
1 Like

Thank you, @GoToLoop !

1 Like