Responsive size and mouse

jeffthompson

I'm working on a project with lots of Processing examples in Javascript mode. I'd like them to be embedded in a responsive-width site, but I get issues with the mouse input.

For example, if I have this sketch:

<canvas id="HelloWorld" data-processing-sources=HelloWorld.pde" width="600" height="400">

I can delete the width/height in the HTML tag and make the width of canvas 50%:

HTML:
<canvas id="HelloWorld" data-processing-sources=HelloWorld.pde">

CSS:
canvas {
  width: 50%;
}

I get a 1/2-sized canvas but the mouse coordinates are not right: the lower-right corner is read as the center of the canvas.

GoToLoop

• AFAIK, mouseX & mouseY are bound to width & height defined in size().
• In other words, a PJS sketch has its own internal width & height dimensions, no matter the actual size of the DOM's <canvas> I'm afraid.
• There was a recent discussion here about canvas too:

https://github.com/fjenett/javascript-mode-processing/issues/23
https://github.com/fjenett/javascript-mode-processing/issues/26

jeffthompson

I was afraid that was the case, but was hoping for a hack :)

I wonder if there's a wish-list for this summer's P5.js workathon – this would be a great addition.

GoToLoop

• What I said was about "JavaScript Mode" (PJS) not p5*js! ^#(^
• AFAIK, p5*js framework is more flexible about <canvas> properties.
• That is, we could change them both programmatically inside our sketches.
• And directly into ".html" & ".css". If I'm not wrong that is! :-@

jeffthompson

JS mode and p5.js aren't the same thing? I thought JS mode was an integration of the origintal p5.js project.

Easy to change on the CSS side. Someone who has been working on the JS mode could probably make the change much more easily (knowing where to look without a ton of digging).

GoToLoop

• No wonder folks are gonna mix those 2 frameworks up!
• Not so many months ago in http://Processing.org page, we had http://ProcessingJS.org (a.K.a. PJS) as an official "brother/sister" project.
• Which's also the very framework used by both "JavaScript & CoffeeScript Modes" as their base btW.
• All of a sudden w/o any warning, that was replaced by http://p5js.org.
• It's got no "Mode" yet. And currently it's still about to start working to provide 3D canvas.
• In short, PJS isn't an "official" Processing project anymore as p5*js just replaced it!
• Not much diff. than the demise of "Minim" library replaced by its newest and Processing 3 compatible-only "Sound" library.
• Of course, nothing wrong introducing new & exciting stuff. $-)
• But that shouldn't be accompanied by sudden suppression of "deprecated" technologies by wiping off their existence from the official site so soon! :-@
• There are already posts of confused folks asking where is the "Minim" library when they install Processing 3 alpha.
• While folks still in Processing 2 ask why the "Sound" library doesn't work for them! %-(