Skip to content

Instantly share code, notes, and snippets.

@claytical

claytical/index.html

Last active October 13, 2015 03:19
Show Gist options
  • Save claytical/a9b7e8b94fb372958af6 to your computer and use it in GitHub Desktop.
Save claytical/a9b7e8b94fb372958af6 to your computer and use it in GitHub Desktop.
Download ZIP
Clicking Example, Existing Inputs
Raw
index.html
<html>
<head>
<meta charset="UTF-8">
<script language="javascript" type="text/javascript" src="../p5.js"></script>
<!-- uncomment lines below to include extra p5 libraries -->
<script language="javascript" src="../addons/p5.dom.js"></script> <!--<script language="javascript" src="../addons/p5.sound.js"></script>-->
<script language="javascript" type="text/javascript" src="sketch.js"></script>
<!-- this line removes any default padding and style. you might only need one of these values set. -->
<style>
#left_panel {
width: 20%;
float: left;
}
#middle_panel {
width: 80%;
float: left;
}
</style>
</head>
<body>
<div id="left_panel">
<div>
<input type="button" onClick="getUp()" id="upButton" value="BOOST!"/>
</div>
<div>
<input type="button" onClick="getDown()" id="downButton" value="GET DOWN!"/>
</div>
</div>
<div id="middle_panel"></div>
</body>
</html>
Raw
sketch.js
var canvas;
var x;
var y;
var ySpeed;
function setup() {
canvas = createCanvas(500, 500);
canvas.parent('middle_panel');
x = width/2;
y = height/2;
ySpeed = 0;
}
function draw() {
background(0);
fill(255);
ellipse(x,y,50,50);
y = y + ySpeed;
}
function getUp() {
ySpeed = -1;
alert("Gettin up!");
}
function getDown() {
ySpeed = 1;
alert("Gettin down!");
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment