CODEWITHSUNDEEP
javascriptcsscanvasp5.js
Lidor Eliyahu Shelef
Lidor Eliyahu Shelef

Reputation: 1332

p5.js: Render canvas on top of a specific div and make it not block anything ( whisps following cursor )

I'm trying to use this codepen for my project:

https://codepen.io/scorch/pen/QQxEdr

( in order to make it follow the cursor go to line 108 and change this if(mouseIsPressed){ to this if(!mouseIsPressed){ )

but when I edit this codes into my project it puts it below everything, all the existing website stays the same and when you scroll to the bottom there's an area with that result. I want to make it appear on top of one of my sections. that's 1.

second I want after it will appear on top of the specific section that it will not block the existing background and wont block mouse interactions with the section, just make the whisps appear and follow the mouse ( when the mouse hover on that specific section only ).

if you need any additional information, comment and I'll add it.

Upvotes: 1

Views: 969

Answers (1)

Lidor Eliyahu Shelef
Lidor Eliyahu Shelef

Reputation: 1332

The solution I got that works perfect for me:

as @Kevin Workman suggested, I did needed the parent() function and more:

I created a container (div) with and id="container" and than in the script part I edited the setup function to this:

function setup() {
  (1) var canvas = createCanvas(window.innerWidth, window.innerHeight);
  (2) canvas.parent('container');
  frameRate(conf.FRAME_RATE)
  pos = {x: Math.random() * window.innerWidth + 1, y:Math.random() * window.innerHeight + 1}
}

The edited lines are (1) and (2). this will make the whisps from the code be inside a div or any container inside your existing html.

I wanted that will be on top of an existing elements without interrupting with the mouse events, so I also added this code to my CSS file:

.container{
    width: 100%;
    height: 100%;
    pointer-events: none;
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
}

And I added z-index: 2; to all the rest of the elements in the section in order to make them look above the whisps when the mouse hover them.

for me I Wanted it to be in the first section of my website, you may want it in a different situation, just most the container position with the CSS code and the whisps will "follow".

Upvotes: 0

Related Questions