p5.js template

HTML

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

JavaScript

function setup() {
  //createCanvas(windowWidth,windowHeight);
  createCanvas(600,400);
  //noLoop();
  //frameRate(12);
  // put setup code here
}

function draw() {
  // put drawing code here
  background(0);
  var squareSize = 25;
  drawGrid(squareSize);
  fill(137,240,83);
  strokeWeight(4);
  stroke(255,0,0);

   drawShield (width/2+width/4,height/2,squareSize);


}

function drawShield (x,y,size) {
  beginShape();
  vertex(x,y);
  vertex(x + size*2,y);
  vertex(x + size*2,y + size*2);
  vertex(x ,y + size*4); //vertex
  vertex(x - size*2,y + size*2);
  vertex(x - size*2,y);
  vertex(x,y);
  endShape();
}

function drawGrid( size ) {
  stroke(getColor(frameCount),getColor(20+frameCount),getColor(50+frameCount));
  for( var i =0 ; i < width ; i= i + size) {
    line(i,0,i,height);
  }

  //stroke(255,0,0);
  for( var i =0 ; i < height ; i= i + size) {
    line(0,i, width,i);
  }
}


function getColor( step ){
  return abs(sin(step/100))*255;
}