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 {
  constructor(x, y, rad, unitNum) {
    this.pos = createVector(0,0);
    this.radio = createVector(0,rad); 
    this.pos.add(this.radio);
    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 :)

Answers

  • 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 {
    
      PVector pos, radio; 
      float x, y, rad, unitNum;
    
      Punto(float x, float y, float rad, float unitNum) {
    
        this.pos = new PVector(0, 0);
    
        this.radio = new PVector(rad, rad);
        this.pos = new PVector(rad, rad);
        //this.pos.add(this.radio);
        this.unitNum = unitNum;
        //this.pos.rotate(TWO_PI/2);
      }
    
      void display() {
        strokeWeight(10);
        stroke(255); 
        for (int i = 0; i < unitNum; i++) {
    
          pos.x=radio.x*cos(radians(i*7)) + width/2;
          pos.y=radio.y*sin(radians(i*7)) + height/2;
    
          // 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 {
    
      PVector pos, radio; 
      float x, y, rad, unitNum;
    
      Punto(float x, float y, float rad, float unitNum) {
    
        this.pos = new PVector(0, 0);
    
        this.radio = new PVector(rad, rad);
        this.pos = new PVector(rad, rad);
        //this.pos.add(this.radio);
        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++) {
    
          pos.x=radio.x*cos(theta + radians(i*7)) + width/2;
          pos.y=radio.y*sin(theta+radians(i*7)) + height/2;
    
          // 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...

  • Answer ✓

    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 {
    
      constructor(x, y, rad, unitNum) {
        this.pos = createVector(0,0);
        this.radio = createVector(rad,rad); 
        this.pos.add(this.radio);
        this.unitNum = unitNum;
    
      }
    
      display(angle) {
        strokeWeight(10);
        stroke(255); 
    
        for(let i = 0; i < this.unitNum ; i++){
          this.pos.x=this.radio.x*cos(angle+radians(i*7))+width/2.0;
          this.pos.y=this.radio.y*sin(angle+radians(i*7))+height/2.0;      
          point(this.pos.x, this.pos.y);
        }
    
      }
    
Sign In or Register to comment.