I have currently integrated Processing JS with the HTML canvas element on a website. The goal is to have the Processing JS animation run smoothly over the existing HTML elements on the page. You can check out the site at [usandthings.com][1] to get an idea of what I am trying to achieve (rubbing away black to reveal a white background and display the html text). However, there seems to be a problem as the performance is very slow - it works fine when not overlapping with any HTML elements, but when dragged over text, it becomes sluggish and unresponsive. Is there a solution to this issue?
Edited - presenting a simplified example:
<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>