Skip to content

Instantly share code, notes, and snippets.

@claytical

claytical/index.html

Created October 13, 2015 03:20
Show Gist options
  • Save claytical/7a298cc1ebf67fba6459 to your computer and use it in GitHub Desktop.
Save claytical/7a298cc1ebf67fba6459 to your computer and use it in GitHub Desktop.
Download ZIP
Clicking Example within p5js
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>
<div id="middle_panel"></div>
</body>
</html>
Raw
sketch.js
var canvas;
var upButton;
var downButton;
var x;
var y;
var ySpeed;
function setup() {
canvas = createCanvas(500, 500);
upButton = createButton('Boost!');
downButton = createButton('Down!');
canvas.parent('middle_panel');
upButton.mousePressed(getUp);
downButton.mousePressed(getDown);
upButton.parent('left_panel');
downButton.parent('left_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