Skip to content

Instantly share code, notes, and snippets.

@claytical

claytical/index.html

Created October 13, 2015 00:37
Show Gist options
  • Save claytical/74a7aedf0459b36d94f5 to your computer and use it in GitHub Desktop.
Save claytical/74a7aedf0459b36d94f5 to your computer and use it in GitHub Desktop.
Download ZIP
Canvas Parent and Position Example
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: 60%;
float: left;
}
#right_panel {
width: 20%;
float: left;
}
</style>
</head>
<body>
<div id="left_panel">
I'm on the left!
</div>
<div id="middle_panel"></div>
<div id="right_panel">
I'm on the right!
</div>
</body>
</html>
Raw
sketch.js
var canvas;
var canvasY = 0;
function setup() {
canvas = createCanvas(500, 500);
canvas.parent('middle_panel');
}
function draw() {
background(0);
fill(255);
ellipse(width/2, height/2, 50, 50);
}
function mousePressed() {
canvasY++;
canvas.position(canvas.x, canvasY);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment