#### Howdy, Stranger!

We are about to switch to a new forum software. Until then we have removed the registration on this forum.

# Draw along a circle by rotating angle. But make it static, not turn with every frame.

I want to draw along a circle so what i did is i set an point somewhere and then rotate its angle so it actually turn in a circular way.

http://codepen.io/giorgiomartini/pen/oLJyBj?editors=0010

``````let punto;

function setup(){
createCanvas(600,600);
punto = new Punto(0,0,200,8);
frameRate(1);
}

function draw(){
translate(300,300);
background(0);
punto.display();
}

class Punto {
this.pos = createVector(0,0);
this.unitNum = unitNum;
//this.pos.rotate(TWO_PI/2);
}

display() {
strokeWeight(10);
stroke(255);
for(let i = 0; i < this.unitNum ; i++){
this.pos.rotate(TWO_PI/30);
point(this.pos.x, this.pos.y);
}
}

}
``````

This way i can draw along the circle.

But I have a problem... It keeps on rotating with every frame.

Got any ideas on hoe i can draw along the circle some points once, and then draw that static on the page.

I dont want to use noLoop, as I want those points to do other stuff afterwards.

Here is the sketch: http://codepen.io/giorgiomartini/pen/oLJyBj?editors=0010

Thanks :)

• ``````Punto punto;

void setup() {
size(600, 600);
punto = new Punto(0, 0, 200, 8);
frameRate(1);
}

void draw() {
// translate(300, 300);
background(0);
punto.display();
}

class Punto {

Punto(float x, float y, float rad, float unitNum) {

this.pos = new PVector(0, 0);

this.unitNum = unitNum;
//this.pos.rotate(TWO_PI/2);
}

void display() {
strokeWeight(10);
stroke(255);
for (int i = 0; i < unitNum; i++) {

// this.pos.rotate(TWO_PI/30);
point(pos.x, pos.y);
}
}
}
``````
• Notice the code only works ok with the current settings. If you adjust the radio, the proportions might not hold (in other words, I did not test it). Just as part of the demo. I increase the frameRate to make it more responsive. If you want it static, just choose a single angle in the draw function (comment out the line with the mapping function):

Kf

``````Punto punto;

void setup() {
size(600, 600);
punto = new Punto(0, 0, 200, 5);
frameRate(15);
}

void draw() {
// translate(300, 300);
background(0);
float angle = 0;
angle=map(mouseX,0,width,-180,180);
punto.display(angle*PI/180);
}

class Punto {

Punto(float x, float y, float rad, float unitNum) {

this.pos = new PVector(0, 0);

this.unitNum = unitNum;
//this.pos.rotate(TWO_PI/2);
}

void display() {
display(0);
}

void display(float theta) {
strokeWeight(10);
stroke(255);
for (int i = 0; i < unitNum; i++) {

// this.pos.rotate(TWO_PI/30);
point(pos.x, pos.y);
}
}
}
``````
• Hi Guys thank for the help.. but my code is javascript p5js not p5...

• Check if this does the trick. Again, comment out the map line in draw to make it static.

Kf

``````let punto;

function setup(){
createCanvas(600,600);
punto = new Punto(0,0,200,5);
frameRate(5);
}

function draw(){
//translate(300,300);
background(0);
var angle=45;
angle=map(touchX,0,width,-180,180);
punto.display(angle*PI/180);
}

class Punto {

this.pos = createVector(0,0);
this.unitNum = unitNum;

}

display(angle) {
strokeWeight(10);
stroke(255);

for(let i = 0; i < this.unitNum ; i++){