› ›

Running p5.js in google sites

kfrajerkfrajer
edited April 2018 in p5.js Programming Questions

Hey

I am working on loading a p5.js code into a website. I am using googles sites and I have the option to write html code. In general, how would I go to run some javascript code in the website? I was using the suggested iframe from the p5.js website: https://github.com/processing/p5.js/wiki/Embedding-p5.js

So what I do is that I create a File cabinet where I can store my files within the website. I load my index.html and sketch.js files there. Then in an html box element I add the following line:

<iframe src="/home/example-page/my_p5-js/index.html" width="600px" height="400px"></iframe>

Then I realized I need to also make available p5.min.js. There are some suggestions I could use https://cdnjs.com/libraries/p5.js but not sure if I am doing any of this properly. What would be the right way to do this?

By the way, the sketch.js is just drawing an ellipse. Nothing fancy... yet.

This is my index.html:

<html>
<head>
  <meta charset="UTF-8">
  <script language="javascript" type="text/javascript" src="home/example-page/my_p5-js/libraries/p5.js"></script>
  <!-- uncomment lines below to include extra p5 libraries -->
  <!--<script language="javascript" src="libraries/p5.dom.js"></script>-->
  <!--<script language="javascript" src="libraries/p5.sound.js"></script>-->
  <script language="javascript" type="text/javascript" src="home/example-page/my_p5-js/sketch.js"></script>
  <!-- this line removes any default padding and style. you might only need one of these values set. -->
  <style> body {padding: 0; margin: 0;} </style>
</head>

<body>
</body>
</html>

The folder libraries is a subfolder of my_p5.js folder. It is in this folder where I store my .html and .js files.

Kf

Keywords: kf_keyword iframe p5js_demo p5.js_demo iframe_demo

Tagged:

Best Answers

Answers

  • GoToLoopGoToLoop
    edited October 2019 Answer ✓

    Still very noob about <iframe>. Just dabbled in it once just to check how it was! X_X

    I've based that experiment on the sketch I've made here:
    https://forum.Processing.org/two/discussion/18026/text-array-in-p5js#Item_13

    Gonna post all of those test files here. Maybe it's some help for ya: :-\"

    "index.html":

    <iframe src=iframe.html scrolling=no frameborder=0></iframe>
<iframe src=iframe.html scrolling=no frameborder=0></iframe>

    "iframe.html":

    <script async src=https://p5js.org/assets/js/p5.min.js></script>
<script defer src=NoisyCharGrid.js></script>

    "NoisyCharGrid.js":

    /**
 * Noisy Char Grid (v2.4)
 * by  AlexDontSurf (2016-Aug-31)
 * mod GoToLoop
 *
 * Forum.Processing.org/two/discussion/18026/text-array-in-p5js#Item_13
 * p5js.SketchPad.cc/sp/pad/view/DKC1XpwnFl/latest
 *
 * Forum.Processing.org/two/discussion/18859/running-p5-js-in-google-sites#Item_1
 * Glitch.com/~preload-image-masks
 */

"use strict";

const CHARS = [ '+', '—', 'I', 'O', '+', 'C' ],
      LEN_L1 = CHARS.length - 1, LEN_P1 = CHARS.length + 1,
      OFFSET = 18, OFFSET3 = OFFSET*3, FPS = 60, INC = .006;

let bg, xwOff, yhOff, z = 0;

function setup() {
  pixelDensity(displayDensity());
  createCanvas(500, 700);

  frameElement && (frameElement.width = width, frameElement.height = height);

  frameRate(FPS).noStroke().fill(0);
  textAlign(CENTER, CENTER).textStyle(BOLD);

  bg = color(255), xwOff = width - OFFSET*2, yhOff = height - OFFSET*2;
}

function draw() {
  background(bg);
  z += INC;

  for (let y = OFFSET3, ny = y/yhOff; y < yhOff; ny = (y += OFFSET)/yhOff)
    for (let x = OFFSET3; x < xwOff; x += OFFSET) {
      const nz = noise(z, x/xwOff, ny), idx = min(nz*LEN_P1 | 0, LEN_L1);
      text(CHARS[idx], x, y);
    }
}
  • kfrajerkfrajer

    Thanks @GoToLoop. I am still learning how to execute this script, or more like how to properly embed code in the website. I think one of the things I need to figure out is how to load files to the server. The file cabinet does indeed store the files, but when I try to access them through the script, it download the file instead of running it. I will keep trying and reading for now.

    Kf

  • GoToLoopGoToLoop
    edited November 2016 Answer ✓

    Those 3 files above can be run offline by any Firefox-based browser.
    And for Chrome-based 1s, just follow the instructions at the site below:
    http://Chrome-allow-file-access-from-file.com/

  • kfrajerkfrajer

    I see. It works with Firefox running it from my local computer. It is indeed a noisy chart =D> @-) Now I want to do it inside google sites where I am hosting a new fresh empty webpage so far. For example, I know that to load p5.js code in WordPress one would use a plugin:

    https://forum.processing.org/two/discussion/comment/77169/

    I read iframes is the way to go in google sites. Mind tht my eperience in web development and HTML and js is close to null :-??

    Thxs for your comments @GoToLoop.

    Kf

  • GoToLoopGoToLoop
    edited October 2019 Answer ✓

    Dunno anything about Google Sites. But for furthering my <iframe> test case, I've hosted those 3 files @ https://ThimbleProjects.org/gotoloop/127477/

    New link: https://Glitch.com/~noisy-char-grid

    Hit CTRL+U in order to see the ".html" source code.
    And check out "NoisyCharGrid.js" source at the link below:
    https://ThimbleProjects.org/gotoloop/127477/NoisyCharGrid.js

  • kfrajerkfrajer

    I see what you did. Thank you. I am suspicious that my files are not readily accessible in Google Sites. I have read in other websites that yo need to use gadgets or code wrappers (a type of gadget) to introduce javascript. However I am able to access your sketch if I do the following:

    <iframe src=https://thimbleprojects.org/gotoloop/127477/iframe.html scrolling=no frameborder=0></iframe>

    Loading the above line in Google Sites on a page (set to webpage type)... Voila! I got your code running. I will add this next link as a future reference:

    http://web.michaelchughes.com/how-to/embed-java-applets-in-google-sites

    Trying to access loading files is not trivial in google sites. The problem is that running the iframe will prompt to download the file instead of executing it. I am missing something when loading files in their site. I will keep digging...

    Kf

Sign In or Register to comment.