p5.gui pacman template

p5-gui-pacman-template.markdown

p5.gui pacman template

Just a simple template sketch to get you started with p5.gui. More info here: https://github.com/bitcraftlab/p5.gui

A Pen by Chad Boyce on CodePen.

License.

script.js

// A p5.gui Template feat. Pacman

// gui params
var myAngle = 30;
var myColor = '#eeee00';

var gui;

function setup() {

  createCanvas(windowWidth, windowHeight);

  // Create the GUI
  sliderRange(0, 90, 1);
  gui = createGui('p5.gui');
  gui.addGlobals('myColor', 'myAngle');
  
  // Only call draw when then gui is changed
  noLoop();
  
}


function draw() {
    
  // this is a piece of cake
  background(0);
  fill(myColor);
  angleMode(DEGREES);
  arc(width/2, height/2, 100, 100, myAngle/2, 360 - myAngle/2, PIE);
  
}


// dynamically adjust the canvas to the window
function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.4/p5.js"></script>
<script src="https://cdn.rawgit.com/bit101/quicksettings/master/quicksettings.js"></script>
<script src="https://cdn.rawgit.com/bitcraftlab/p5.gui/master/libraries/p5.gui.js"></script>

style.css

body {
  padding: 0; 
  margin: 0;
} 
canvas {
  vertical-align: top;
}