We are about to switch to a new forum software. Until then we have removed the registration on this forum.
I've been looking at examples online on how to embed a PDE file in a website, however, I cannot seem to re-create the tutorials. Uploading my code to openprocessing forums seems to indicate my code is alright. I believe it has something rto do with file placements.
I've attached a zip file with my source file inside: https://drive.google.com/file/d/0B1EkhiMA92ATUXN1S2QxN3JweTQ/view?usp=sharing
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html>
<head>
<title>Putting Processing on the web</title>
<script type="text/javascript" src="processing.js"></script>
<style type="text/css">
#mySketch {
width: 800px;
height: 600px;
margin: auto;
border: 2px;
border-style: solid;
display: block;
}
</style>
</head>
<body>
<p>Trying to put a .PDE down here...</p>
<canvas id="mySketch" data-processing-sources="myProgram.pde"></canvas>
</body>
</html>
Processing
float btnW=300,
btnH=100,
btnX=0,
btnY=0;
int r=0, g=0, b=255;
boolean btnState=false;
void setup(){
size(800, 600);
btnX=(width/2)-(btnW/2);
btnY=(height/2)-(btnH/2);
}
void draw(){
background(0);
fill(r,g,b);
noStroke();
rect(btnX, btnY, btnW, btnH);
}
void mouseClicked(){
println(mouseX+", "+mouseY);
if(isClicked(btnX, btnY, btnW, btnH)){
switchRect();
}
}
void mouseDragged(){
if(isClicked(btnX, btnY, btnW, btnH) && btnState){
moveRect();
}
}
boolean isClicked(float x, float y, float w, float h){
if(mouseX > x && mouseX < (x+w) && mouseY > y && mouseY< y+h){
return true;
}
else { return false; }
}
void switchRect(){
btnState=!btnState;
if (btnState==true){ r=255; g=0; b=0; }
else { r=0; g=0; b=255; }
}
void moveRect(){
btnX=mouseX-btnW/2;
btnY=mouseY-btnH/2;
}
Answers
I've downloaded your "myProgram.zip", uncompressed it in folder "myProgram/", and double-clicked file "index.html".
It worked alright in my browser! B-)
However it is configured to load scripts when executed locally:
http://Chrome-Allow-File-Access-From-File.com/
I bet you'll get effortlessly luck if you run it via some Firefox-based browser: O:-)
https://www.Mozilla.org/en-US/firefox/developer/
So it is a browser issue, I shall try on some other browser and see how it goes. Thanks!
Tried with the provided fix for Chrome, worked. So I assume if I upload it to some web server, it will work on vanilla Chrome since it does not read the files from my local disk?
More likely offline navigation issues. Browsers for a long time expect to connect to a server rather than directly run something from local files. Well, except Firefox family browsers. ;;)
For more approaches to tackle the offline issue, read the wiki below: >-)
https://GitHub.com/processing/p5.js/wiki/Local-server
But in case you need to, look up
@pjs
directives: :-\"http://ProcessingJS.org/reference/pjs directive/
And for a more complete article about Pjs, read this 1: #:-S
http://ProcessingJS.org/articles/p5QuickStart.html
Or you can learn p5.js. It's almost same as Processing, only based on JavaScript instead of Java. It will reduce your dependence on processing.js.
That's another nice alternative. But b/c JS is the target language for both Pjs & p5.js, the same offline issues affect them equally. =P~
But there are some features in p5.js which do not exist in pjs. That's why I recommended that. And yeah, the same issues will affect both.