p5.js template

HTML

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

JavaScript

var img;
var offset;

function setup() {
  createCanvas(windowWidth,windowHeight)
  //createCanvas(400 ,400)
  //noLoop();
}


function draw() {
background(10);
offset = 50 * sin(frameCount/100);
  // put drawing code here

  //image(img,0,0,img.width/10,img.height/10);
  //image(img,width/2 - 140,height/2 - 95 ,280,190);

  myGrid(color(255,255,0));
  //fill(255,255,0);
//  myDiagGrid(color(0,0,0));
starGrid();

  medici();
c_star (200+offset,200-offset,10);
c_star (200+offset,200+offset,10);
}

function starGrid(color = 255) {
  stroke(color);

  // draw rows
  for ( var x = 0 ; x < width ; x+=100) {
    for ( var y = 0 ; y < height ; y+=100) {
    c_star(x,y, 10)
    }
  }


}




function myGrid(color = 255) {
  stroke(color);

  // draw rows
  for ( var x = 0 ; x < height ; x+=10) {
    line(0,x, width,x);
  }
  //draw columns
  for ( var y = 0 ; y < width ; y+=10) {
    line(y,0,y,height);
  }
}







function myDiagGrid(color = 255) {
  stroke(color);

  for ( var x = 0 ; x < width ; x+=10 ) {
    for ( var y = 0 ; y < height ; y+=10 ) {
      //line(x,y+10,x+10,y);
      //line(x,y,x+10,y+10);
      if (x%50 == 0) {
        if (y%50 == 0) {
        c_star (x+25, y+25 ,6)
      }
      }
    }
  }
}



function medici() {

  let w1 = width;
  let h1 = height;

  let ho = 0;
  let wo = 0;

  // check if the canvas is square, wider or taller
  if ( w1 != h1 ) { // if this is true then not a square
    if (w1>h1) { // if this is true then canvas is wider than tall
      w1 = h1;
    }
    else { // else if canvas is taller than wide
      h1 = w1;
    }
  }

  // calculate offset
  wo = (width - w1)/2; // zero if w1 and width are the same
  ho = (height - h1)/2; // zero if h1 and height are the same

  // add a line around objects
  stroke(0);

  var bSize = h1/6;
  // draw yellow crest background
  fill(255,255,0); // red + green = yellow
  ellipse(wo+w1/2,ho+h1/2,w1/(4/3),h1);

  // draw top blue ball
  fill(0,0,255);
 ...