Drawing Page

This is the project which i have not shared with my YouTube Community so let's start and see how to build it..This is a VIP Project

1. Open P5.js Editor

STEP 1- Go to google.com and search p5.js and click on the first option. 

STEP 2-Inside that option click on Home.

STEP 3-Then Click Start creating with p5 editor.

2. Create a New Project 

Code:

// Symmetry corresponding to the number of reflections. Change the number for different number of reflections 

let symmetry = 6;   

let angle = 360 / symmetry;

let saveButton, clearButton, mouseButton, keyboardButton;

let slider;

function setup() { 

  createCanvas(710, 710);

  angleMode(DEGREES);

  background(127);

  // Creating the save button for the file

  saveButton = createButton('save');

  saveButton.mousePressed(saveFile);

  // Creating the clear screen button

  clearButton = createButton('clear');

  clearButton.mousePressed(clearScreen);

  // Creating the button for Full Screen

  fullscreenButton = createButton('Full Screen');

  fullscreenButton.mousePressed(screenFull);

  // Setting up the slider for the thickness of the brush

  brushSizeSlider = createButton('Brush Size Slider');

  sizeSlider = createSlider(1, 32, 4, 0.1);

}

// Save File Function

function saveFile() {

  save('design.jpg');

}

// Clear Screen function

function clearScreen() {

  background(127);

}

// Full Screen Function

function screenFull() {

  let fs = fullscreen();

  fullscreen(!fs);

}

function draw() {

  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;

    

    if (mouseIsPressed) {

      for (let i = 0; i < symmetry; i++) {

        rotate(angle);

        let sw = sizeSlider.value();

        strokeWeight(sw);

        line(mx, my, pmx, pmy);

        push();

        scale(1, -1);

        line(mx, my, pmx, pmy);

        pop();

      }

    }

  }

}

We are done making our drawing pad