Rendering p5.js sketch on my Jekyll website

Question

Rendering p5.js sketch on my Jekyll website

92 views Asked by Young Kindaichi At 29 February 2024 at 17:07

I'm very new to CSS and HTML. Recently, I created a webpage using Jekyll with default theme called 'minima'. What I'm trying is to render some of the sketch that I wrote using p5.js. In particular, I want that the canvas of my sketch should be the page content area using full width of device (excluding the header and footer). Furthermore, it should be in the background of main content of website and should not conflict with it. For example,

This is a webpage and I want my p5.js sketch to use all the space betwen the two lines (header and footer). When I'm doing this by creating a div .sketch-container like

<main class="page-content" aria-label="Content">
      <div class="sketch-container">
        <script defer src="/Manoline-git.github.io/p5/Game of Life.js"></script>
      </div>
      <div class="wrapper">
          {{ content }}
      </div>
</main>

The sketch is coming after the main content of the page like this :

I tried several thing like putting z-index or moving the code around, but it just not working.

.sketch-container {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1; /* Ensure the sketch is on top of other content */
}

There might be a conflict in CSS, but I'm not sure. Can you please help me with this?

How to reproduce the above?

First setup the Jekyll (see documentation)

gem install bundler jekyll
jekyll new my-awesome-site
cd my-awesome-site
bundle exec jekyll serve

You can include the p5.js (can be downloaded from here) in your head.html

<script src="/assets/js/p5.js"></script>

Include the p5.js sketch file Game of Life.js given here. Use it on the page, such as on index.md

<script defer src="Game of Life.js"></script>

Please make sure the correct file location is given everywhere.

Original Q&A

There are 1 answers

**Danielle** · Answer 1 · 2024-03-08T13:40:40+00:00

There are a number of variables that affect this issue:

The size of your p5js sketch. If you createCanvas(400,400) then the size of your sketch will not be more than 400x400 regardless of your css.
The positioning of your sketch-holder and its parent. In order to use z-index property, both the sketch-holder and its parent must have the position property (parent position can be relative, but must be defined)
As I assume you don't know the size of the content in advance, the sketch-holder parent must have its overflow:hidden. Otherwise the sketch also covers the footer (or header).

My ruby is fragile so could not install new site, but you can check out the results on my own site. Full site code here.

in _layouts/so-demo-page.html:

<html lang="{{ page.lang | default: site.lang | default: 'en-US' }}" class="no-js">
{% include head.html %}

<body
    class="layout--{{ page.layout | default: layout.layout }}{% if page.classes or layout.classes %}{{ page.classes | default: layout.classes | join: ' ' | prepend: ' ' }}{% endif %} {% if page.entries_layout == 'grid' %}page--wide{% endif %} {{ page.title | slugify }}">
    {% include skip-links.html %}
    {% include navigation.html %}
    {% include masthead.html %}
    <main class="page-content" aria-label="Content">
        
        <!--p5JS-->
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/p5.js"></script>
        <script type="text/javascript" src="/processing/vines/vine.js"></script>
        <script type="text/javascript" src="/processing/vines/flower.js"></script>
        <script type="text/javascript" src="/processing/vines/leaf.js"></script>

        <!--wrapper for sketch-holder and content: note position and overflow -->
        <div class="wrapper" style="position:relative;overflow:hidden;">

            <!--sketch-holder: note position and z-index -->
            <!-- as my sketch starts from the bottom I used bottom:0 -->
            <div id="sketch-holder" style="position:absolute;top:0;left:0;z-index:-1">
                <script type="text/javascript" src="/processing/vines/growing-vines.js?fullscreen=true"></script>
            </div>

            <!-- page content -->
            {{ content }}
        </div>
    </main>
    {% include footer.html %}
    {% include scripts.html %}
</body>

</html>

and the actual page in so-demo.md:

---
layout: so-demo-page
---

# Welcome!

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
 incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
 nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore 
eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
 in culpa qui officia deserunt mollit anim id est laborum...

And in your p5.js sketch:

var w = window.innerWidth;
//I used a smaller height for the demo, otherwise my sketch
//just looks blank for a long time
//var h = window.innerHeight/2;
var h = window.innerHeight;

function setup() {
  const canvas = createCanvas(w, h);
  canvas.parent("sketch-holder");
//etc...
}

If you know the maximum height of your web page, then you can use that instead of the maximum height. You can also play with the positioning if you want to focus on the center of the sketch more than the bottom or top.

Good luck!

TechQA.

Rendering p5.js sketch on my Jekyll website

There are 1 answers

Related Questions in HTML

Related Questions in CSS

Related Questions in JEKYLL

Related Questions in P5.JS

Popular Questions

Popular Tags

Trending Questions