How can i publish a processing skecth in wordpress page?

talha · May 2016

Hello there. How can i publish a processing skecth in wordpress page? I saw a plug-in wordpress.org/plugins/processing4wp/ but there is no tutorial how to load plug-in.

kfrajer · May 2016

I am also interested in doing stuff like this.

Thxs,

Kf

CharlesDesign · July 2016

Have you tried this? https://wordpress.org/support/plugin/processing4wp

quark · July 2016

With regard to the plugin - there are two parts

1) Installing it

2) Using it.

For (1) go to the admin section of your wordpress site and click Plugins and select Add New. In the search box type "Processing" and it will appear as the first plugin in the list then click INSTALL. Before you do that you should be warned that the plugin has not been updated for 2 years and not tested with the latest version of WordPress so you install it at your own risk.

As to (2) I have no idea how yo use this plugin.

The following solution assumes you have a publicly accessible web server or a web hosting account somewhere.

Another way that works for posts (should work with Pages), at least it did for me, is to Use Processing V2.2.1 and create the sketch using ProcessingJS mode. Once the sketch is working correctly export the sketch so it creates a working index.html page that you can view.

Edit the index file and remove all html that is not needed to display the sketch. The html below shows the minimum needed and is based on a sketch I created.

Upload the contents of the export folder for your sketch to your web server/host and make note of the URL to the index file.

In WordPress go to the page/post edit mode and select Text view. In this view add the following HTML

<iframe src="http://yoursite.com/exportedfolder/index.html" width="626" height="626">    
</iframe>

Replacing the src with your URL. Note the width and height should be at least 26pixels bigger that the size specified in the sketch.

<!DOCTYPE html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <meta name="Generator" content="Processing" />
        <style type="text/css">
    body {
      background-color: #333; color: #bbb; line-height: normal;
      }
    canvas { 
        display: block; 
        outline: 0px; 

    }
    #content { 
        margin: 0px auto 0px auto; padding: 0px 0px 0px 0px; 
        width: 600px; min-width: 300px; overflow: auto;
        border-left: 1px solid #444; border-top: 1px solid #444; 
        border-right: 1px solid #333; border-bottom: 1px solid #333;
        background-color: #3d3d3d;
    }
        </style>
        <!--[if lt IE 9]>
            <script type="text/javascript">alert("Your browser does not support the canvas tag.");</script>
        <![endif]-->
        <script src="processing.js" type="text/javascript"></script>
        <script type="text/javascript">
// convenience function to get the id attribute of generated sketch html element
function getProcessingSketchId () { return 'CircleRouter'; }
</script>

    </head>
    <body>
        <div id="content">
            <div>
                <canvas id="CircleRouter" data-processing-sources="CircleRouter.pde" 
                        width="600" height="600">
                    <p>Your browser does not support the canvas tag.</p>
                    <!-- Note: you can put any alternative content here. -->
                </canvas>
                <noscript>
                    <p>JavaScript is required to view the contents of this page.</p>
                </noscript>
            </div>
        </div>
    </body>
</html>

GoToLoop · July 2016

I have had to put a space between the http: and the // so it appears correctly in this forum.

Same way you've replaced < w/ <, you can do the same for :, replacing it w/ :. *-:)

<iframe src=http://YourSite.com/exportedfolder/index.html width=626 height=626></iframe>

I've been doing those workarounds for a while. Mostly at my p5.js' examples. :P

quark · July 2016

Thanks @GoToLoop have amended my post to suit.

Stanlepunk · September 2016

When I try to put the sentence in the text part of wordpress <iframe src=https://www.dropbox.com/s/nda8saw898xisaa/index.html?dl=0 width=626 height=626></iframe> that's don't work, when I update the page the text became a simple link and wordpress change the text to <a href="https://www.dropbox.com/s/nda8saw898xisaa/index.html?dl=0">https://www.dropbox.com/s/nda8saw898xisaa/index.html?dl=0</a>; weird or normal ? and obvioulsy that's don't work :(

Howdy, Stranger!

Categories

In this Discussion

How can i publish a processing skecth in wordpress page?

Answers