grid template with coordinate display by Owen Roberts

*/

var u = 30; // one unit = 20 px

​

function setup() {

    createCanvas(540, 540);

}

​

function draw() {

    // grid with scale of 20 px

    // comment function to remove grid, mouse position

  background(255);

    // displayMousePosition();

    // grid();

    // START YOUR DRAWING HERE!

  circle()

j()

}

​

​

function grid() {

    background(200);

    stroke(220);

    strokeWeight(1);

    for (let x = 0; x <= width; x += u) {

        for (let y = 0; y <= height; y += u) {

            line(x, 0, x, height);

            line(0, y, width, y);

        }

    }

}

​

function displayMousePosition() {

    textFont('menlo');

    textSize(14);

    noStroke();

    text("x:" + mouseX, 10, 20);

    text("y:" + mouseY, 10, 40);

  stroke('black'); // reset stroke

}

​

function circle(){

  noStroke()

  // stroke(0)

  // noFill()

  fill(0)

  ellipse(290,160,60)

}

​

​

function j(){

  translate(20,170);

  push()

  noFill();

stroke(0);

  // fill(0)

curve(300, -100, 240, 26, 300, 26, 200, -100);

  stroke(0);

//   fill(0)

curve(300, 0, 300, 220, 300, 26, 550, -150);

 stroke(0);

  fill(0)

curve(300, -100, 250, 120, 240, 26, 0, -100);

//    stroke(255, 102, 0);

// curve(400, -100, 220, 150, 249, 123, 0, -100);

   stroke(0);

  fill(0)

curve(220, -300, 210, 150, 249, 123, 0, -100);

 stroke(0);

  fill(0)

curve(1000, -200, 210, 150, 300, 220, 210, -190);

  pop()

//   noFill();

// stroke(255, 102, 0);

// curve(5, 26, 5, 26, 73, 24, 73, 61);

// stroke(0);

// curve(5, 26, 73, 24, 73, 61, 15, 65);

// stroke(255, 102, 0);

// curve(73, 24, 73, 61, 15, 65, 15, 65);

}