Untitled Document

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Robot With Buttons 01</title>

<script src="https://use.fontawesome.com/7bbc3b58c7.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.16/p5.js"></script>
<style>
body {
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
font-size:24px;
}
canvas {
border:1px solid #000;
box-shadow:0 5px 10px #666;
}
button {
background-color:#365467;
color:#ffffff;
padding:.5em;
font-size:1em;
border:1px solid #000;
border-radius:10em;
}
button:hover {
background-color:#466b82;
/* background-color:#ff0000; */
}
button:active {
background-color:#009dff;
}
</style>

<script>
// Vars to toggle movement
var goLeft = false; // Unlike Processing, true/false must be lowercase
var goRight = false;
var goUp = false;
var goDown = false;
var changeHoriz = 0;
var changeVert = 0;
// Var to toggle flashing cap
var countCapFlash = 0;
var toggleCapFlash = false;

// Setup same as Processing
function setup() {
// Use createCanvas instead of size()
// and put it into a variable
var canvas = createCanvas(700, 700);
// Places the canvas into a div for more control over positioning
canvas.parent("p5jsCanvas");
// Use center radius mode for all ellipses and rects.
ellipseMode (RADIUS);
rectMode(RADIUS);
}

function draw() {
background("#365467"); // Dark teal
// Test for button presses and change x y accordingly
if (goLeft) { changeHoriz-- }
if (goUp) { changeVert-- }
if (goDown) { changeVert++ }
if (goRight) { changeHoriz++ }

// Isolate translations from text status output
push(); // Equivolent to pushMartix in Processing
// Move with buttons
translate(350 + changeHoriz, 350 + changeVert);
strokeWeight(5);
// Neck
fill("#563ca5"); // purple
rect(0,160, 15,80);
// Shoulders
fill("#8465B9"); // light purple
ellipse(-50,130,20,20);
ellipse(50,130,20,20);
// Arms
fill(115); // medium gray
rect(-50,190,10,60);
rect(50,190,10,60);
// Head
fill("#563ca5"); // purple
rect(0,0,140,110,30);
// Eyes
strokeWeight(4);
fill("#fffec0"); // cream
ellipse(-65,0,45,47);
ellipse(65,0,45,47);
// Flash irises on mousePress
if (mouseIsPressed) {
fill(255);
} else {
fill(0);
}
// Irises
ellipse(-50,5,10,10);
ellipse(50,5,10,10);
// Nose
fill("#FF154F"); // red
ellipse(0,35,24,19);
// Flashing Cap
countCapFlash++;
if (countCapFlash > 30) { // Smaller number for faster flash
// Toggle flash
toggleCapFlash = !toggleCapFlash;
// Reset counter
countCapFlash = 0;
}
if (toggleCapFlash) {
fill("#FF154F"); // red
} else {
fill("#ffbb29"); // orange
}
// Cap
rect(0,-120,20,10);
// Wheel
fill("#ffbb29"); // orange
ellipse(0,280,40,40);
// Shirt
strokeWeight(5);
fill("#563ca5"); // purple
rect(0,170,45,40);
// Skirt
beginShape();
fill("#563ca5"); // purple
vertex(-45, 205);
vertex(-75, 280);
vertex(75,280);
vertex(45,205);
endShape(CLOSE);
pop(); // Equivolent to popMatrix()

// display statuses
textSize(18);
fill(255);
// 350 + changeHoriz must be in parantheses to give the correct value
text("xlocation: " + (350 + changeHoriz ), 5, 20);
text("ylocation: " + (350 + changeVert ), 5, 40);
text("goLeft: " + goLeft, 5, 60);
text("goRight: " + goRight, 5, 80);
text("goUp: " + goUp, 5, 100);
text("goDown: " + goDown, 5, 120);

}

// Triggered on mouseDown on button
function moveButton(whichWay) {
switch(whichWay) {
case "left":
goLeft = true
break;
case "right":
goRight = true
break;
case "up":
goUp = true
break;
case "down":
goDown = true
break;
}
}

// Triggered on mouseUp on button
function stopButton() {
goLeft = false;
goRight = false;
goUp = false;
goDown = false;
}
</script>

</head>

<body>
<h1>P5.js Robot with Buttons 01</h1>

<div id="p5jsCanvas"></div>

<div style="text-align:center;width:700px;">
<button id="leftButton" onMouseDown="moveButton('left')" onMouseUp="stopButton()"><span class="fa fa-arrow-left"></span></button>
<button id="leftButton" onMouseDown="moveButton('up')" onMouseUp="stopButton()"><span class="fa fa-arrow-up"></span></button>
<button id="leftButton" onMouseDown="moveButton('down')" onMouseUp="stopButton()"><span class="fa fa-arrow-down"></span></button>
<button id="leftButton" onMouseDown="moveButton('right')" onMouseUp="stopButton()"><span class="fa fa-arrow-right"></span></button>
</div>
<p>The robot above uses P5.js to render itself on a Canvas element (placed inside a div) but also uses pure JavaScript buttons to control
its movement. Thanks to Ms. Jenny Mintz for her excellent robot artwork!</p>
</body>
</html>