<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi">

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.2.0/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.2.0/addons/p5.sound.min.js"></script>

 <link rel="stylesheet" type="text/css" href="style.css">

<script src="sketch.js"></script>

let saveButton, clearButton, mouseButton, keyboardButton;
let slider;
let color;
let slider1;
let colorPicker;

createCanvas(windowWidth, windowHeight);

slider1 = createSlider(0, 20, 100);
slider1.position(300, 20);
slider1.style('width', '80px');

 saveButton = createButton('save');
 saveButton.mousePressed(saveFile);
saveButton.position(0,10);

function saveFile() { save('design.png');}

 clearButton = createButton('clear');
  clearButton.mousePressed(clearScreen);
clearButton.position(40,10);

function clearScreen() {
  background(127);
}

fullscreenButton = createButton('Full Screen');
fullscreenButton.mousePressed(screenFull);
fullscreenButton.position(80,10);

function screenFull() {
  let fs = fullscreen();
  fullscreen(!fs);
}

sizeSlider.position(160,20);

  colorPicker = createColorPicker('#000000');

  colorPicker.position(0,40);

  colorPicker.size(100, 50);

function windowResized() {

resizeCanvas(windowWidth, windowHeight);

}

let sym = slider1.value();
\\getting the symmetry of mirror effect

  translate(width / 2, height / 2);

  if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {

    let mx = mouseX - width / 2;

    let my = mouseY - height / 2;

    let pmx = pmouseX - width / 2;

    let pmy = pmouseY - height / 2;

    // getting required mouse properties

    if (mouseIsPressed) {
// on mouse pressed creating drawing
      for (let i = 0; i < sym; i++) {
// javascript for loop
        rotate(360/sym);
// rotation of drawing
        let sw = sizeSlider.value();
// getting strokr width
        strokeWeight(sw);

        stroke(colorPicker.color());
// creating colour of the stroke
        line(mx, my, pmx, pmy);
// creating line on mouseX and mouseY
        push();

        scale(1, -1);

        line(mx, my, pmx, pmy);
// creating line isolated in push and pop such that the previous stroke is saved before the later
        pop();

      }

    }

  }