› › ›

Unable to run .PDE files on website

cygigcygig
edited February 2017 in JavaScript Mode

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;
}
Tagged:

Best Answer

Answers

Sign In or Register to comment.