<html>
<head>
  <meta charset="UTF-8">
  <script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.17/p5.js"></script>
  <script language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.17/addons/p5.dom.js"></script>
  <script language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.17/addons/p5.sound.js"></script>
  <script language="javascript" type="text/javascript" src="sketch.js"></script>
  <style>
    body {
        margin: 0;
        padding: 0;
    }
  </style>
</head>

<body>
</body>
</html>
var counter, goDontGo;

function setup() {
    createCanvas(windowWidth, windowHeight);
    frameRate(15);

    counter = 0;
    goDontGo = color(255, 0, 0, 255);
}

function draw() {
    if(wait(10)){
        var random = rollTheDice();
        if(random === 1){
            goDontGo = color(255, 0, 0, 255)
        }
        else{
            goDontGo = color(0, 255, 0, 255)
        }
    }
    fill(goDontGo);
    rect(0, 0, width, height);
}

function wait(frames){
    if(counter > frames){
        counter = 0;
        return true;
    }
    else{
        counter++;
        return false;
    }
}

function rollTheDice(){
    return ~~(Math.random()*2);
}