<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Robot with buttons</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>
<script>
// Vars to toggle movement
var goLeft = false;
var goUp = false;
var goDown = false;
var goRight = false;
var changeHoriz = 0;
var changeVert = 0;
// Var to change the flashing cap
var countCapFlash = 0;
var toggleCapFlash = false;
// Setup same as processing
function setup() {
var myCanvas = createCanvas(700, 700);
myCanvas.parent("p5jsCanvas");
ellipseMode(RADIUS);
rectMode(RADIUS);
}
function draw() {
background("#365467");
// Isolate translation from text status output
push();
// USE LOGIC TO TOGGLE MOVEMENT
translate(350,350);
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");
ellipse(-65, 0,45,47);
ellipse(65, 0,45,47);
// iris
if(mouseIsPressed) {
fill(255);
} else {
fill(0);
}
// irises
ellipse(-50,5,10,10);
ellipse(50,5,10,10);
// nose
fill("#ff154f"); // red
ellipse(0,30,24,19);
// cap
fill("#ffbb29"); // orange
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);
// lampshade
beginShape();
vertex(-45,205);
vertex(-75,280);
vertex(75,280);
vertex(45,205);
endShape(CLOSE);
pop();
// ADD TEXT STATUS UPDATES HERE
}
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() {
goUp = false;
goDown = false;
goRight = false;
goLeft = false;
}
</script>
<style>
body {
font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
size:24px;
}
canvas {
border:1px solid black;
}
button {
}
</style>
</head>
<body>
<h1>P5.js Robot with Buttons 01</h1>
<div id="p5jsCanvas"></div>
<!-- Buttons -->
<button id="leftButton" onMouseDown="moveButton('left')" onMouseUp="stopButton()">
<i class="fa fa-arrow-left" aria-hidden="true"></i>
</button>
<button id="upButton" onMouseDown="moveButton('up')">
<i class="fa fa-arrow-up" aria-hidden="true"></i>
</button>
<button id="downButton" onMouseDown="moveButton('down')">
<i class="fa fa-arrow-down" aria-hidden="true"></i>
</button>
<button id="rightButton" onMouseDown="moveButton('right')">
<i class="fa fa-arrow-right" aria-hidden="true"></i>
</button>
</body>
</html>