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.

edited August 2016

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++){