Week 2 sketch

script.js

var started = false;

var name = '';

function setup() {
  // set canvas height/width
  createCanvas(windowWidth, windowHeight);
}

function draw() {
  background('blue');
  
  fill('yellow');
  noStroke();
  textSize(30);
  textAlign(CENTER);
  
  if(!started) {
    startScreen();
  } else {
    startQuiz();
    noLoop();
  }
  
}

function startScreen()  {
  text('Press "g" to go!', width/2, height/2);
}

function startQuiz() {
  text('1', width/2, height/2);
  name = prompt("What's your name?");
}

function windowResize() {
  resizeCanvas(windowWidth, windowHeight);
}

function keyTyped() {
  if(key == 'g') {
    started = true;
  }
}

/*function showGo() {
  if(!started) {
    push();

      if(mouseIsPressed) {
        fill('white');
      } else {
        fill('yellow');
      }
      noStroke();

      ellipse(width/2, height/2, 200, 200);

      var size = 80;
      var msg = 'GO';

      textSize(size);  

      var tw = textWidth(msg)
      var tx = width/2 - (tw/2);
      var ty = height/2 + (size/3);
      fill('black');
      textAlign(LEFT);

      textStyle(BOLD);

      text('GO', tx, ty);
    pop();
  }
}*/

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.5/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.5/addons/p5.dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.5/addons/p5.sound.min.js"></script>

style.css

body {
  padding: 0;
  margin: 0;
  background-color: #fff;
}

canvas {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);    
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

Week 2 sketch.markdown

Week 2 sketch

This is a template for a p5.js project that is full window width.

A Pen by Andy Dayton on CodePen.

License.