We are about to switch to a new forum software. Until then we have removed the registration on this forum.
Hello... I found a way in which I could avoid including the data-processing-sources in the canvas tag. I am having trouble understanding why, when I click the button, the canvas that is wrapped in the function does not appear.
<!DOCTYPE HTML>
<html>
<head>
<script src="/js/processing.js"></script>
</head>
<body>
<input type="button" value="imagen" id="clear" onclick="canvas()">
<canvas id="mycanvas"></canvas>
<script type="text/processing" data-processing-target="mycanvas">
function canvas() {
void setup()
{
size(200,200);
background(0);
fill(200);
noLoop();
PFont fontA = loadFont("courier");
textFont(fontA, 14);
}
void draw(){
text("Hello!",20,20);
}
}
</script>
</body>
</html>
On the other hand, this code works well:
<!DOCTYPE HTML>
<html>
<head>
<script src="/js/processing.js"></script>
</head>
<body>
<canvas id="mycanvas"></canvas>
<script type="text/processing" data-processing-target="mycanvas">
void setup()
{
size(300,300);
background(0);
fill(255);
noLoop();
PFont fontA = loadFont("courier");
textFont(fontA, 14);
}
void draw(){
text("Hello!",20,20);
}
</script>
</body>
</html>
Thanks in advance
Answers
In p5.js this would fall under the instance mode topic: https://forum.processing.org/two/discussion/comment/75133/#Comment_75133
However, I don't think this applies to the Processing.js case. I believe during the transpilation process from java to js, I bet P.js engine is expecting to find setup and draw. But if it encounters js code, would it leave it alone? Even in the case that the engine is able to handle js code in the original java code, then you will be working in instance mode... or at least you should.
If you want your processing code to execute based on a button event for example, you could attach it to a
<div>
element and then show and hide it? Or are you looking to execute multiple instances of the same sketch?Kf
Yes, my idea was to execute the processing event, based on a button, and changing from an image/empy div to an animation. Or the second option: execute two different sketches, based on a button aswell. I don't know what is easier!
Using processing.js to trigger an animation via a button has been very difficult to understand, but I am still trying. Maybe I will get it working... but I will have a look at p5.js.