Can't embed processing code into HTML blog

abulgako · September 2016

I've been trying to export my code from Processing 3 into Processing 2 for quite a while now. I think I finally managed to make it work and all. I can't embed it into an HTML blog page. I've tried several methods. I tried to simply pull it in through

<script type="text/javascript" src=""></script>

And the page accepts the code but nothing happens. Perhaps I don't understand how to correctly reference it. The code has a dropbox URL that I'm trying to plug in.

I've tried directly inputting js code inbetween the

<script>

tags. Didn't work either. Here is the code. It works fine by itself.

<script>
static final int NUM_X = 15, NUM_Y = 15, NUM_Z = 15;

int x, z, y;
float xPos, yPos, zPos;
float r_x, r_y;
float hh;

void setup() {
size(400, 400, P3D);
colorMode(HSB, 360, 100, 100);
background(0);
}

void draw() {
  camera(-200, -200, 200, 0, 0, 0, 0, 1, 0);

float h = hh += .8;
 for (x = 0; x < NUM_X; x++)
   for (z = 0; z < NUM_Z; z++)
     for (y = 0; y < NUM_Y; y++) {
       xPos = x * 20;
       yPos = y * 20;
       zPos = z * -20;
       fill(h = (h + .361) % 360, 100, 100);
       pushMatrix();
       translate(xPos, yPos, zPos);
       rotateY(r_y += 2e-5);
       rotateX(r_x += 2e-5);
       box(10);
       popMatrix();
     }
 }
<script>

Thanks

GoToLoop · September 2016

Before deploying, you should 1st checks whether the transpilation from Java to JS was successful:
http://www.OpenProcessing.org/sketch/create

Afterwards, you can find some instructions about web deploying here:
http://ProcessingJS.org/articles/p5QuickStart.html

If you got JavaScript Mode installed, just follow the generated ".html" file. *-:)

abulgako · September 2016

It all works separately. The HTML files that was generated works by itself. The js code works fine in both processing and the online version that you linked as well as the HTML generated page. However once I try to copy that HTML code and put it on my blog page it stops displaying the animation. The page with all the written stuff like: "created with processing" appears. But not the animation itself. My assumption is that in this line

</script>

</head>
<body>
    <div id="content">
        <div>
            <canvas id="Cubeofcubes20mode" data-processing-sources="Cube_of_cubes_2_0_mode.pde" 
                    width="400" height="400">
            </canvas>
</body>
</html>

it tries to pull the .pde file from my computer. When I replace the source "" with a URL nothing changes. What am I doing wrong.

KevinWorkman · September 2016

For errors like this, your first stop should be the JavaScript console. Navigate to your page (the one that's not working correctly) and then press F12, then go to the JavaScript console tab. You might have to refresh.

Here you'll see any errors you're encountering. My guess is that there's an error with loading JavaScript from different domains, or that you aren't actually running a server. (Does the url start with file:? If so you aren't running a server.)

GoToLoop · September 2016

Is "Cube_of_cubes_2_0_mode.pde" in the same folder as your posted ".html" file?
Are you closing your 2 <div> tags as well? Sorry dunno what else could be wrong there. :-<

abulgako · September 2016

To answer everything. My .pde file is located on a dropbox server so it's not local. The URL is that of a dropbox.

https://www.dropbox.com/home?preview=Cube_of_cubes_2_0_mode.pde

I don't have an HTML in the same folder because I just opened that generated HTML file with a script reader and pulled the code out and pasted it into my page. Then I referenced the URL.

Here's the code

<!DOCTYPE html>
<head>
    </style>
    <script src="https://drive.google.com/file/d/0B2YsYDOIQ0W6VDFBeTNyR0c2ZFU/view?usp=sharing" type="text/javascript"></script>
    <script type="text/javascript">
function getProcessingSketchId () { return 'Cubeofcubes20mode'; }
</script>

</head>
<body>
    <div id="content">
        <div>
            <canvas id="Cubeofcubes20mode" data-processing-sources="https://drive.google.com/file/d/0B2YsYDOIQ0W6MG1COV9WSERNSXM/view?usp=sharing" 
                    width="400" height="400">
            </canvas>
<div>
</body>
</html>

abulgako · September 2016

This is the other way I tried solving the problem. Instead of referencing it I tired to input the code in. Doesn't work either. This one almost works. The page recognizes processing code and sets the size of the window. However it just leaves it black. But I feel like this is a closer shot.

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Processing...</title>
<script type="text/javascript" src="http://yourjavascript.com/1126194431/processing.js">    </script>
</head>

<body bgcolor=black>
<font color=white>
<center>
<br/>
<br/>

 <! -- ----------------------------------------------------- -->

<script type="text/processing">

static final int NUM_X = 10, NUM_Y = 10, NUM_Z = 10;

int x, z, y;
float xPos, yPos, zPos;
float r_x, r_y;
float h;
float hstart;

void setup() {
size(400, 400, P3D);
colorMode(HSB, 360, 100, 100);
background(0);
}

void draw() {
hstart +=1;
for (x = 0; x < NUM_X; x++)
for (z = 0; z < NUM_Z; z++)
  for (y = 0; y < NUM_Y; y++) {
    h = (h + 0.36) % 360;
    c[x][z][y] = color(h, 100, 100);
    xPos = x * 20;
    yPos = y * 20;
    zPos = z * -20;
    fill(c[x][z][y]);
    pushMatrix();
    translate(xPos, yPos, zPos);
    rotateY(r_y += 2e-5);
    rotateX(r_x += 2e-5);
    box(10);
    popMatrix();
  }
}

</script>


<canvas id="Cube_of_Cubes_2_0_mode" style="border: 0px solid black;">        </canvas>

<! -- ----------------------------------------------------- -->

<br/>
<p><emphasis>Cube code</emphasis></p>
</center>
</font>
</body>

</html>

GoToLoop · September 2016

That sketch doesn't even compile in Processing's IDE (PDE)!
Why don't you paste my version from your other post instead or some other compilable version?

abulgako · September 2016

I currently feel like a complete retard which saddens me a lot but everything works. There was indeed a problem with my code. I created an extra variable that I haven't referenced. Everything is embedded and works! Thank you very much for all the extensive help! The direct embedding of the js code worked once I fixed the issue with the code.

GoToLoop · September 2016

Glad you've made it. Don't forget we can see the execution logs by hitting F12 in our browsers! ~O)

KevinWorkman · September 2016

Like I said in a previous post:

For errors like this, your first stop should be the JavaScript console. Navigate to your page (the one that's not working correctly) and then press F12, then go to the JavaScript console tab. You might have to refresh.

Glad you got it figured out though.

Howdy, Stranger!

Categories

In this Discussion

Can't embed processing code into HTML blog

Best Answers

Answers