pointlissajous

let ringArrayX = [];//Tree x variable
let ringArrayY = [];//Tree y variable
let nPoints = 150;//number of points in curves PLAY WITH THIS NUMBER!
let m = 1;

function setup(){
  cnv = createCanvas(windowWidth ,windowHeight)//create canvas
  stroke(255);
  strokeWeight(0.2)
}
function draw(){
  background(0);
  noFill();
  translate(width/2,height/2)//make origin be in center
  rIn = min(width/3,height/3)
  ringMakerInit(rIn,0);//initial ring
  drawRing(ringArrayX[0],ringArrayY[0]);//draw ring function
}

function ringMakerInit(r,v){//initial growth
  ringArrayX[0] = [];
  ringArrayY[0] = [];
  for (let i =0; i<=nPoints;i++){
    ringArrayX[0][i] = (width/3)*sin(i*m*(nPoints)+frameCount/300);//CHANGE SPEED BY CHANGING THE 100 AND CHANGE 2 TO CHANGE SHAPE
    ringArrayY[0][i] = (height/3)*cos(i*(nPoints)+frameCount/300);
  }
}

function drawRing(X,Y){//draw ring
  beginShape();
    for (let i = 0;i<=nPoints;i++){
      curveVertex(X[i],Y[i]);
      
      fill(255-X[i],255-Y[i],X[i])
      stroke(255-X[i],255-Y[i],X[i])
      circle(X[i],Y[i],width/60)
      fill(255-X[i],Y[i],X[i]+Y[i])
      stroke(X[i],Y[i],Y[i])
      circle(X[i],Y[i],width/90)
      fill(25)
      circle(X[i],Y[i],width/200)
      noFill()
      stroke(200)
    }
  strokeWeight(0.1)
  endShape(CLOSE);
}

function mousePressed(){//reset with mousepress
  background(255);
  translate(-width/2,-width/2);
  nPoints = int(random(20,300));
  text(nPoints,-width/2,-width/2);
  frameCount = 0;
  m = random(0.5,9);
  draw();
}