How do I embed a processing sketch on my webpage using HTML?
Question
I have a processing sketch called test.pde which is in the same folder as my index.html web document. I also have a file called processing.min.js in that folder. I am trying to make it so that my processing sketch appears on my website.
Here is my code right now, but it just makes the resulting website blank:
<!DOCTYPE html>
<html>
<head>
<title>Yaxlat</title>
<link rel="stylesheet" type="text/css" href="websitestyle.css">
<script src="processing.min.js"></script>
</head>
<body>
<canvas data-processing-sources="test.pde"></canvas>
</body>
</html>
2 answers
solution1
0 2014-09-14 22:07:53
Wild guess, but maybe because youre not specifying the size of the canvas?
try something like
<canvas width="640" height="360"></canvas>
solution2
0 2014-09-14 22:14:22
Im also trying to put a Processing sketch onto a webpage.
I've found a way to put the code straight into a HTML-file. And it even works when I open the local file from my computer in a browser.
Try replacing your code in here:
<html>
<head>
<title>Mouse2D \ Examples \ Processing.org</title>
<!-- script type="text/javascript" src="/_ah/channel/jsapi"></script -->
<script src="processing.js" type="text/javascript"></script>
<!-- script src="http://processing.org/javascript/modernizr-2.6.2.touch.js" type ="!text/javascript"></script -->
</head>
<body>
<label>once</label>
<br>
<div class="proc">
<script type="application/processing">
void setup()
{
size(640, 360);
noStroke();
rectMode(CENTER);
}
void draw()
{
background(51);
fill(255, 204);
rect(mouseX, height/2, mouseY/2+10, mouseY/2+10);
fill(255, 204);
int inverseX = width-mouseX;
int inverseY = height-mouseY;
rect(inverseX, height/2, (inverseY/2)+10, (inverseY/2)+10);
}
</script>
<canvas width="640" height="360"></canvas>
<div>this is below the canvas</div>
</body>
My problem is, that although this works locally, it jsut gives me a blank canvas on my Google App Engine. Hope this helps you!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.