I need to embed processing code in my Wordpress

Hi there! I need to insert a processing code in wordpress, but I’m going crazy and I can’t do it. Does anyone know how I can do it?

Thanks

1 Like

Hi,

Welcome to forums.

The way I have solved it was to circumvent Wordpress. If anybody knows how to solve it better I’m interested to know too.

  • So I’ve created a folder for for HTML-files and subfolder for Javascript files under the root of HTTP-server. Java based processing should work in similar manner. I wanted to try p5xjs and to make things a bit easier.
  • On my website I have created a redirection to the folder above. So on my website meditations.harrikemppainen.com is directed to https://harrikemppainen.com/meditations/.
  • for each script there is a HTML-file and related processing javascript file. NOTE! html file needs to have .shtml filename extension.




HTML itself is very basic

`<?xml version="1.0" encoding="UTF-8?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Homage to HC Berg</title>
<script src="[https://cdn.jsdelivr.net/npm/p5@1.0.0/lib/p5.js](view-source:https://cdn.jsdelivr.net/npm/p5@1.0.0/lib/p5.js)"></script>
<script language="javascript" type="text/javascript" src="[js/homage_to_hcberg.js](view-source:http://harrikemppainen.com/meditations/js/homage_to_hcberg.js)"></script>
<style> body { padding: 0; margin: 0; } </style>
</head>
<body> </body>
</html>`
1 Like

Some related resources (for putting p5.js sketches in wordpress, not Processing):

The wiki entry on embedding using iframes and/or widgets:

Wordpress plugins / blocks:

Past related discussions:

https://discourse.processing.org/search?q=%22%20wordpress%22

1 Like

Thanks for all, but I couldn’t resolve it. I’m a graphic designer, and I’m not a java expert. When I introduce the code in codepen, it says that there is a SyntaxError: Unexpected token ‘{’. Parse error. When I try the code in Processing source code editor everything is ok.

Kind regards

1 Like

Ah. You are trying to put processing on your website, not p5.js, Your processing code won’t work in codepen or the p5.js editor, because it is a Java dialect, not JavaScript. Your browser has no way to run it.

If you are trying to create new web-native sketches, use p5.js instead.

If your Processing sketches are simple and you want to run their code as-is, the best way is to use processing.js, which translates them into JavaScript behind-the-scenes.

OpenProcessing.org let’s you create portfolio of embeddable sketches as part of membership – that is definitely the easiest option. https://www.openprocessing.org/. Otherwise you can add processing.js yourself to your Wordpress site to make each sketch run.

1 Like

Thanks again! but I don’t want any frame, and I need a free option. Do you know where I can found it?

One free option is the last one that I mentioned:

http://processingjs.org/

sorry, I do not understand. How do I embed it by my own?

Click on Quick Start, and read the instructions. For example,

http://processingjs.org/articles/p5QuickStart.html#creatingpjswebpage

If you have read and attempted to follow the instructions and still get stuck, describe the error or problem and ask for help here!

1 Like

@jeremydouglass @GoToLoop
Sorry, I couldn’t answer earlier. But the truth is that I am not being able to integrate it into the wordpress. This is the web: http://cndae.com.ar. Now the last code you sent is at the end. I uploaded the files: .pde and minified processing.min.js.
Thanks for all

On your HTML I could only spot 2 places w/ “.pde” references:

  1. <div class="et_pb_code_inner"><iframe src="http://cndae.com.ar/wp-content/uploads/2020/04/dibuja.pde"
  2. <canvas data-processing-sources=dibuja.pde></canvas> </div>

The URL http://cndae.com.ar/wp-content/uploads/2020/04/dibuja.pde seems inaccessible.

But inside my browser’s source tab that “.pde” showed up w/ HTML content!

If you prefer hosting the “.pde” sketch inside an <iframe> tag you should take a look at here:

And here:

The 4 <iframe> result:
GoSubRoutine.GitHub.io/Ball-in-the-Chamber

1 Like

Thanks! but I don’t have the same result. I tried with it too:

<!DOCTYPE html>
<meta charset=utf-8>
<meta name=viewport content=width=device-width,initial-scale=1>
<script defer src=http://cndae.com.ar/wp-content/uploads/2020/04/processing.min.js></script>
<iframe src=http://cndae.com.ar/wp-content/uploads/2020/04/processing.min.jsl></iframe>

I don’t understand, in the element: script I need to add the processing.min.js and in iframe my .pde file? because it render like this:

Thanks!

An <iframe> tag is a way to embed a child HTML file into the main 1:
Developer.Mozilla.org/en-US/docs/Web/HTML/Element/iframe

B/c that creates a separate context, all dependencies like libraries, and assets like images, need to be loaded from within the <iframe>'s HTML file.

That’s why I’ve posted those links to “index.html” files, so you could see how they’re used for <iframe> tags, both as parent & nested HTML roles.

1 Like
<!DOCTYPE html>
<meta charset=utf-8>
<meta name=viewport content=width=device-width,initial-scale=1>
<script defer src=http://cndae.com.ar/wp-content/uploads/2020/04/processing.min.js></script>
<iframe src=http://cndae.com.ar/wp-content/uploads/2020/04/processing.min.js></iframe>

I tried it, but it doesn’t work. I know, I’m not a programming engineer. I can’t believe it is so difficult.

I’ve already showed & told you that an <iframe> tag is for HTML files:

But again you’re instead trying to load a JS file inside an <iframe> tag:
http://cndae.com.ar/wp-content/uploads/2020/04/processing.min.js

I think I am understanding. But I need help. I have to create a complete html file, do I upload it to media? or directly embed it on the wordpress page. But later, how do I embed the .pde and .js files?