<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/p5.min.js"></script>
	<script src="myscript.js"></script>
	
	

html{
	
	height:100%;
}

body {
    
	background-color:rgba(188,110,46);
	height:100%;
	display:flex;
	justify-content:center;
	align-items:center;
}

let c;


function setup() {
  createCanvas(600, 600);

  c = 0;
  rectMode(CENTER);
  colorMode(HSB);


}

function draw() {
  clear();
  rectLine();
  waveLine();


}

function waveLine() {
  
  let wx = 0;
  let wy = height / 2;
	let wl=height/2;

  for (let b = 0; b < 4; b += 0.1) {
    for (let a = 0; a < TWO_PI; a += 0.5) {
      const x = map(a, 0, TWO_PI, 0, width);
      const y = map(sin(a), -1, 1, height / 4 * b, height / 4 * 1.5);
		const l = map(sin(a), -1, 1, height / 4 * b-20, height / 4 * 1.5-20);
		stroke(27, 76, 74);
  noFill();
      line(wx, wy, x, y);
	
	stroke(29, 88, 94);	
  noFill();	
		line(wx,wl,x,l);


      wx = x;
      wy = y;
		wl=l;
		

    }


  }
}

function rectLine() {

  for (let f = 0; f < 4; f += 0.7) {

    const d = map(c, 0, TWO_PI, 0, width);
    const e = map(sin(c), -1, 1, height / 4 * f, height / 4 * 1.5);

    const h = dist(0, 0, mouseX, mouseY);
    const g = map(h, 0, dist(0, 0, width, height), 10, 40);


    fill(42, 25, 99);
    rect(d, e, g, g, 15);
    rect(d - 100, e - 30, g, g, 15);
    rect(d - 200, e - 60, g, g, 15);
    rect(d - 300, e - 90, g, g, 15);
    rect(d - 400, e - 120, g, g, 15);
    rect(d - 500, e - 150, g, g, 15);
    rect(d - 100, e + 30, g, g, 15);
    rect(d - 200, e + 60, g, g, 15);
    rect(d - 300, e + 90, g, g, 15);
    rect(d - 400, e + 120, g, g, 15);
    rect(d - 500, e + 150, g, g, 15);

    noStroke();
    fill(27, 76, 74);

    rect(d, e, 15, 15, 15);
    rect(d - 100, e - 30, 15, 15, 15);
    rect(d - 200, e - 60, 15, 15.15);
    rect(d - 300, e - 90, 15, 15, 15);
    rect(d - 400, e - 120, 15, 15, 15);
    rect(d - 500, e - 150, 15, 15, 15);
    rect(d - 100, e + 30, 15, 15, 15);
    rect(d - 200, e + 60, 15, 15, 15);
    rect(d - 300, e + 90, 15, 15, 15);
    rect(d - 400, e + 120, 15, 15, 15);
    rect(d - 500, e + 150, 15, 15, 15);


    c += 0.01;
    c %= TWO_PI;


  }


}