Untitled Document

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Robot With Buttons 02</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>
var goLeft = false;
var goRight = false;
var goUp = false;
var goDown = false;
var changeHoriz = 0;
var changeVert = 0;
var countCapFlash = 0;
var toggleCapFlash = false;
// VERSION 2
var surprise = false;
var inflationValue = 1;

function setup() {
var canvas = createCanvas(700, 700);
canvas.parent("p5jsCanvas");
ellipseMode (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);
// Neck
strokeWeight(5);
fill("#563ca5"); // purple
rectMode(RADIUS);
rect(0,160, 15,80);
// Shoulder
fill("#8465B9"); // light purple
ellipse(-50,130,20,20);
ellipse(50,130,20,20);
// Arms
fill(115);
rect(-50,190,10,60);
rect(50,190,10,60);
// Wheel
if (mouseIsPressed) {
fill(255);
} else {
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);
// Head
// Isolated head into a separate function that
// gets called at each frame of the animation so
// the surprise animation can replace the head animation
if(!surprise) {
drawHead();
} else {
doSurprise();
}
pop(); // Equivolent to popMatrix()

// display status
textSize(18);
fill(255);
// 350 + changeHoriz must be in parantheses to give the right 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);
text("bobberVal: " + (Math.round(bobberVal*100)/100), 5, 140);
text("inflationValue: " + (Math.round(inflationValue)), 5, 160);

}

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;
}
}

function stopButton() {
goLeft = false;
goRight = false;
goUp = false;
goDown = false;
}

var bobberAngle = 0.0
var bobberScalar = 5;
var bobberSpeed = 0.05;
var bobberVal;

function drawHead() {
bobberVal = Math.cos(bobberAngle) * bobberScalar;
bobberAngle += bobberSpeed;
push();
translate(0, bobberVal);
// Head
strokeWeight(5);
fill("#563ca5"); // purple
rectMode(RADIUS);
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);
}
// VERSION 2 move eyes with direction
if(goLeft) {
ellipse(-100,5,10,10);
ellipse(30,5,10,10);
} else if(goRight) {
ellipse(-30,5,10,10);
ellipse(100,5,10,10);
} else if(goUp) {
ellipse(-50,-20,10,10);
ellipse(50,-20,10,10);
} else if(goDown) {
ellipse(-50,25,10,10);
ellipse(50,25,10,10);
} else {
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) {
toggleCapFlash = !toggleCapFlash;
countCapFlash = 0;
}
if (toggleCapFlash) {
fill("#FF154F"); // red
} else {
fill("#ffbb29"); // orange
}
rect(0,-120,20,10);
pop();
}

function doX() {
if(!surprise) {
surprise = true;
document.getElementById("xButton").innerHTML="RESET";
// Play the sound that's preloaded in the myAudio audio element
document.getElementById("myAudio").play();
} else {
surprise = false;
// Watch out for double and single quotes
document.getElementById("xButton").innerHTML="<span class='fa fa-times' ></span>";
inflationValue = 1;
}
}

function doSurprise() {
if(inflationValue < 1000) {
inflationValue*= 1.05; // fiddle with value until the sound syncs
// Head
strokeWeight(5);
fill("#563ca5" ); // purple
rectMode(RADIUS);
rect(0 - (inflationValue/2), 0 - (inflationValue/2), 140 + (inflationValue * 4), 110 + (inflationValue * 4),30);
// Eyes
strokeWeight(4);
fill("#fffec0"); // cream
// Shrink eyes until they're gone
if ( inflationValue < 90) {
ellipse(-65, 0, 45 - (inflationValue/2), 47-(inflationValue/2));
ellipse(65, 0, 45 - (inflationValue/2), 47-(inflationValue/2));
ellipse(-50,5,10 - (inflationValue/10),10 - (inflationValue/10));
ellipse(50,5,10 - (inflationValue/10),10 - (inflationValue/10));
}
// Nose
fill("#FF154F"); // red
ellipse(0,35,24 + inflationValue, 19 + inflationValue);
}
}

</script>

</head>

<body>
<h1>P5.js Robot with Buttons 02</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>
<button id="xButton" onClick="doX('left')" ><span class="fa fa-times" ></span></button>
</div>

<audio id="myAudio">
<source = src="pop.ogg" type="audio/ogg">
</audio>
<img src="smoke03.gif" id="smoke" style="display:none;">
<p>In this version we'll add a bit more reaction from the robot when the move buttons are pressed, plus a surprise with the X button.</p>
</body>
</html>