Week03: Oscillation

I referred to Dan’s Code Challenge video and Wiki page about Mathematical Rose Patterns for this assignment.
Especially referred the following image.

In the above image, you can see some regular patterns as the values of d and n are increasing or decreasing.
I chose three types of them, which are the series of patterns on the diagonal line from (1,2), the series of patterns on the diagonal line from (6,1) and the series of pattern on the horizontal line from (2,3).
The code to draw them is like below:

[sketch.js]

var num = 20;
var rc = false;
var cnt = 0;

let rose1, rose2, rose3;
let step;

let cvs;

function setup() { 
  cvs = createCanvas(600, 400);
  colorMode(HSB);
  
  let rad = 70;
  step = 0.01;
  
  rose1 = new Rose(1, 2, rad, step, 0, 0);
  rose2 = new Rose(6, 1, rad, step, 150, 0);
  rose3 = new Rose(2, 3, rad, step, 270, 1);
    
} 

function draw() { 
  background(0);
  
  push();
  translate(width/4, height/4);
  rose1.display();
  pop();
  
  push();
  translate(width*3/4, height/4);
  rose2.display();
  pop();
  
  push();
  translate(width/2, height*3/4);
  rose3.display();
  pop();
}

[rose.js]

class Rose {
  
  constructor(d, n, l, step, h, type) {
    
    this.d0 = d;
    this.n0 = n;
    this.d = d;
    this.n = n;
    this.l = l;
    this.step = step;
    this.inc = true;
    this.c = h;
    this.type = type;
    
    this.monitor = false;
  }
  
  display() {
    let k = this.n/this.d;
  
    beginShape();
      stroke(this.c, 100, 90);
      strokeWeight(1);
      noFill();
      for(let a=0; a<TWO_PI*this.d; a+=0.01) {
        let r = this.l * cos(k*a);
        let x = r * cos(a);
        let y = r * sin(a);
        vertex(x, y);
      }
    endShape();

    if(this.inc) {
      if(this.n<(this.n0+num)) {
        this.n += this.step;
        if(this.type == 0)  this.d += this.step;
        this.c += (360/(num/this.step));
      } else this.inc = false;
    } else {
      if(this.n>this.n0) {
        this.n -= this.step;
        if(this.type == 0)  this.d -= this.step;
        this.c -= (360/(num/this.step));
      } else this.inc = true;
    }
    if(this.c > 360) this.c = 0;
    else if(this.c < 0) this.c = 360;
  }
  
}

I also added the lines for exporting the frame images.

function draw() { 

  ...

  let maxCnt = ((num-rose1.n0)/step)*2+7;
  
  if(rc) {
    if((cnt<=0) && (rose1.n == rose1.n0)) {
      cnt=1;
    }
    if((cnt>0) && (cnt<=maxCnt)) {
      let fileName = "rose_" + nf(cnt, 4) + ".png";
    	saveCanvas(cvs, fileName, 'png');
      cnt++;
    } else if(cnt>maxCnt) {
      rc = false;
      cnt=0;
    }
  }
    
  
}

function keyTyped() {
  if(key=='p' || key =='P') rc = true;
}

And following is the result of the sketch:

The complete code is available here

Leave a Reply

Your email address will not be published. Required fields are marked *