Getting a sketch to load between two images on a web page

p5.js Beginners
1

I’d like the script with the sketch.js to load between the two images, but it keeps loading at the end of the two images. Just learning HTML so any help would be great! Thanks!

Web page:
http://www.abunchoffailures.com/

Here is the HTML:

<!DOCTYPE html>
<html>
<head>
	<script src="p5.min.js"></script>
    <script src="p5.dom.min.js"></script>
    <script src="p5.sound.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
   	<meta charset="utf-8">
	<title>A bunch of failures</title>
</head>

<body>
	<p><h1>1. Creativity means not being afraid <strike>to fail</strike>
	<br>2. The ideas here now are not as good as the ideas I'm going to put here later
	<br>3. Be excellent to each other</br></h1></p>
	<p></p>

    <img src="gifs/CatchIt.gif" width ="400">
	<p></p>
	<script src ="sketch.js"></script>
	<p></p>
	<img src="gifs/beexcellenttoeachother.jpg" width ="400">

</body>
</html>
1 Like
2

A <script> tag isn’t displayable. It’s for embedding code inside an “.html” file:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script

The JS library “p5.js” indeed creates a <canvas> tag once it runs our “sketch.js” code:

But that happens much later. Those 2 <img> tags are created much earlier than the p5js’ <canvas> tag.

Instead, you should create an empty container tag, such as <p> or <div>, and name an id attribute to it:

For example: <p id=between></p> creates an element which is uniquely identified as “between”.

Then, inside “sketch.js”, call method p5.Element::parent() over the p5.Renderer returned by p5::createCanvas():

createCanvas(400, 400).parent('between');

The statement above makes the <canvas> element that is wrapped inside the p5.Renderer object created by the p5::createCanvas() method to be a child element of another element whose id is “between”.

I’ve refactored & hosted your whole code at the link below. Take a look: :sunglasses:

Bl.ocks.org/GoSubRoutine/raw/56bc62553a754febacfe61e6f9239c69/

index.html:

<!DOCTYPE html>

<title>A bunch of failures</title>

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

<link rel=stylesheet href=style.css>

<script defer src=https://cdn.JsDelivr.net/npm/p5></script>
<!--<script defer src=https://cdn.JsDelivr.net/npm/p5/lib/addons/p5.dom.min.js></script>-->
<!--<script defer src=https://cdn.JsDelivr.net/npm/p5/lib/addons/p5.sound.min.js></script>-->

<script defer src=sketch.js></script>

<h1><ol>
  <li>Creativity means not being afraid <s>to fail</s>
  <li>The ideas here now are not as good as the ideas I'm going to put here later
  <li>Be excellent to each other
</ol></h1>

<img width=400 src=http://www.ABunchOfFailures.com/gifs/CatchIt.gif>

<p id=between></p>

<img width=400 src=http://www.ABunchOfFailures.com/gifs/beexcellenttoeachother.jpg>

style.css:

@import url('https://Fonts.GoogleAPIs.com/css?family=Permanent+Marker');

h1 {
  font-family: 'Permanent Marker', cursive;
} 

canvas {
  display: block;
}

sketch.js:

/**
 * Place Canvas Between 2 Images (v1.0)
 * by AkaTheWb (Aaron Smith)
 * mod GoToLoop (2019-Jan-22)
 *
 * https://Discourse.Processing.org/t/
 * getting-a-sketch-to-load-between-two-images-on-a-web-page/7734/2
 *
 * http://Bl.ocks.org/GoSubRoutine/56bc62553a754febacfe61e6f9239c69
 */

"use strict";

function setup() {
  createCanvas(400, 400).parent('between');
  fill('red').noStroke();
}

function draw() {
  background(220);
  ellipse(noise(frameCount * .01) * width, height>>1, width>>2, height>>2);
}
2 Likes
3

Thank you so much for the detailed reply with sources and refactoring my code…really helps with learning this new material! :muscle::metal::+1::mage:

1 Like