CODEWITHSUNDEEP
javascriptcsscanvasprocessingprocessing.js
biscuit_
biscuit_

Reputation: 187

Processing JS over the top of a HTML element?

I am currently using Processing JS with the HTML canvas element on a website. The intention is to have the Processing JS run over the top of the HTML elements on the page. The site is [usandthings.com][1] (it should be pretty obvious what I'm trying to do by looking at the site - rub away black to reveal a white background, showing the html text). HOWEVER as you can see it is very slow - it works smoothly when it is not over any html, however when you drag it over the text, it is very slow and doesn't really work. Is there anyway I can get around this?

Edited - this is the most simple way of showing what I mean:

<html>
<head>
    <meta charset="UTF-8">
    <title>Us and Things</title>
    <script src="processing.js"></script>
    <script type="text/javascript" src="jquery.js"></script>

<body>

<style> 
body {
height: 100%;
width: 100%;
overflow: hidden;
background: white;
}
p {
text-align: center;
position: absolute;
color: black;
width: auto;
font-size: 4em;
vertical-align: middle;
left: 0;
right: 0;
bottom: 0;
top: 10%;
}
</style>

<div class = "thecanvas">
<canvas id = "mycanvas"></canvas>
</div>

<p class = text>
TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE 
TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE
TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE 
TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE 
TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE
TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE 
TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE
</p>


<script type="text/processing" data-processing-target="mycanvas">


void setup() {
size(2000, 2000);
background(0);
frameRate(250);
}

void draw() {
stroke(255);
strokeWeight(130);
strokeCap(ROUND);
line(mouseX, mouseY, pmouseX, pmouseY);
}

void mousePressed() {
background(0);
}

</script>

</body>
</html>

Upvotes: 0

Views: 224

Answers (1)

Kevin Workman
Kevin Workman

Reputation: 42174

This is happening because your html <p> block is actually on top (in front) of your Processing sketch.

This causes the <p> block to "absorb" the mouse events, so your Processing sketch does not receive them when you're over top the html text. In other words, your Processing sketch is not running slowly, it's just not getting the events.

You could set the z-index of your <p> block and/or your Processing sketch using CSS so that the Processing sketch is on top of the html text, but then you'd also have to set your Processing sketch to transparent, and then use something like a PGraphics as a mask. It's doable, but it would require an overhaul of your Processing code.

Another option is to just set your <p> block to not receive mouse events. You do this by adding this line to your <p> block's CSS:

pointer-events:none;

With that in place, mouse events will properly "fall through" to your Processing sketch.

Upvotes: 3

Related Questions