I need to embed processing code in my Wordpress

cndae · May 16, 2020, 4:16pm

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

SomeOne · May 16, 2020, 5:34pm

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>`

jeremydouglass · May 16, 2020, 8:20pm

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

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

https://github.com/processing/p5.js/wiki/Embedding-p5.js

Wordpress plugins / blocks:

Past related discussions:

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

cndae · May 16, 2020, 9:37pm

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

jeremydouglass · May 16, 2020, 11:15pm

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.

cndae · May 17, 2020, 2:00am

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

jeremydouglass · May 17, 2020, 2:02am

One free option is the last one that I mentioned:

cndae · May 17, 2020, 2:19am

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

jeremydouglass · May 17, 2020, 2:35am

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!

GoToLoop · May 17, 2020, 2:56am

cndae · May 31, 2020, 11:50pm

@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

GoToLoop · June 1, 2020, 7:40pm

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

<div class="et_pb_code_inner"><iframe src="http://cndae.com.ar/wp-content/uploads/2020/04/dibuja.pde"
<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:

github.com

GoSubRoutine/Ball-in-the-Chamber/blob/master/index.html

<!DOCTYPE html>

<meta charset=utf-8>
<meta name=viewport content=width=device-width,initial-scale=1>

<iframe src=p5js_global/index.html></iframe>
<iframe src=pjs_java/index.html></iframe>
<iframe src=p5js_instance/index.html></iframe>
<iframe src=pjs_cs/index.html></iframe>

And here:

github.com

GoSubRoutine/Ball-in-the-Chamber/blob/master/pjs_java/index.html

<script defer src=frameResize.js></script>
<script defer src=https://Unpkg.com/processing-js></script>

<h3>Ball in the Chamber (Pjs/Java Multi PDE Global Quirk Mode):</h3>

<canvas data-processing-sources="pjs-java.pde Ball.pde Chamber.pde"></canvas>

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

cndae · June 4, 2020, 2:18am

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!

GoToLoop · June 4, 2020, 9:23am

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.

cndae · June 5, 2020, 5:52pm

<!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.

GoToLoop · June 5, 2020, 6:06pm

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

cndae · June 13, 2020, 1:46am

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?

Topic		Replies	Views
Displaying code on website Processing	5	1010	May 23, 2018
Https://processing.org/examples/hue.html Coding Questions	4	919	April 16, 2020
How to embed a Processing sketch onto an HTML Coding Questions	6	3369	January 28, 2019
How to embed processing sketch onto GoDaddy Website Coding Questions	1	372	August 30, 2020
Translating Processing to P5js Coding Questions	6	800	January 25, 2021

I need to embed processing code in my Wordpress

Related topics