I've got a problem using the web version of an interactive graphics app (created via JavaScript mode and run via processingjs).
The code below gives a minimal example. The rendered line can be moved up or down with the mouse.
When compiled in Java mode, both the transformed and untransformed versions of the sketch work perfectly (the variable 'transformMode' allows switching between versions).
When 'compiled' in JavaScript mode, however, only the untransformed version works (the line's motion in the transformed version is jerky and sometimes fails altogether).
I have run other interactive graphics sketches in a browser that use affine transforms (push/pop-Matrix), so my instinct is that the transformation variables themselves are causing the problem (xtranslate, ytranslate, xscale, yscale).
Any ideas?
(I'm using processing 2.0.1 and processing.js-1.4.1 on a Windows 7 machine. The web version has been tested using most types of html5-compliant browsers.)
- //////////////////////////////////////////////////////////////////////////////////////
- ////////////////////////////// attributions /////////////////////////////////////////
- //////////////////////////////////////////////////////////////////////////////////////
- // This program is an offshoot of Danial Shiffman's draggable shape example:
- // http://www.learningprocessing.com/examples/chapter-5/draggable-shape
- //////////////////////////////////////////////////////////////////////////////////////
- ///////////////////////////// initialisations ///////////////////////////////////////
- //////////////////////////////////////////////////////////////////////////////////////
- // When transformMode is true, the draggable line is black; when it is false, the line is red.
- boolean transformMode = true;
- int w = 650;
- int h = 650;
- float xboxLower, xboxUpper, yboxLower, yboxUpper;
- float xpadLower, xpadUpper, ypadLower, ypadUpper;
- float xaxisLower, xaxisUpper, yaxisLower, yaxisUpper;
- float xaxisLength, yaxisLength;
- float xscale, yscale;
- float xtranslate, ytranslate;
- float yinc;
- float txmouseX, tymouseY;
- DraggableLine draggableLine;
- //////////////////////////////////////////////////////////////////////////////////////
- ////////////////////////////////////// setup ////////////////////////////////////////
- //////////////////////////////////////////////////////////////////////////////////////
- void setup() {
- size(650, 650);
- background(255);
- smooth();
- xboxLower = -2.0;
- xboxUpper = 7.25;
- yboxLower = -1.75;
- yboxUpper = 9.5;
- xaxisLower = -1.0;
- xaxisUpper = 6.0;
- yaxisLower = -1.25;
- yaxisUpper = 9.0;
- xpadLower = xaxisLower - xboxLower;
- xpadUpper = xboxUpper - xaxisUpper;
- ypadLower = yaxisLower - yboxLower;
- ypadUpper = yboxUpper - yaxisUpper;
- xaxisLength = xaxisUpper - xaxisLower;
- yaxisLength = yaxisUpper - yaxisLower;
- xscale = w/(xpadLower + xaxisLength + xpadUpper);
- yscale = h/(ypadLower + yaxisLength + ypadUpper);
- xtranslate = -xboxLower*xscale;
- ytranslate = -yboxLower*yscale;
- if (transformMode) {
- yinc = 0.1;
- }
- else {
- yinc = 10.0;
- }
- if (transformMode) {
- draggableLine = new DraggableLine(xaxisLower, xaxisUpper, xaxisLength);
- }
- else {
- draggableLine = new DraggableLine(20.0, 20.0, 610.0);
- }
- }
- //////////////////////////////////////////////////////////////////////////////////////
- /////////////////////////////////////// draw /////////////////////////////////////////
- //////////////////////////////////////////////////////////////////////////////////////
- void draw() {
- background(255);
- if (transformMode) {
- stroke(0);
- strokeWeight(0.05);
- pushMatrix();
- translate(xtranslate, h-ytranslate);
- scale(xscale, -yscale);
- draggableLine.display();
- popMatrix();
- }
- else {
- stroke(255, 0, 0);
- strokeWeight(3.0);
- draggableLine.display();
- }
- if (transformMode) {
- txmouseX = tx(mouseX);
- tymouseY = ty(mouseY);
- draggableLine.drag(txmouseX, tymouseY);
- }
- else {
- txmouseX = mouseX;
- tymouseY = mouseY;
- draggableLine.drag(mouseX, mouseY);
- }
- }
- //////////////////////////////////////////////////////////////////////////////////////
- /////////////////////////////// 'global' methods /////////////////////////////////////
- //////////////////////////////////////////////////////////////////////////////////////
- // transform x
- float tx(float x) {
- return (x-xtranslate)/xscale;
- }
- // transform y
- float ty(float y) {
- return (h-y-ytranslate)/yscale;
- }
- //////////////////////////////////////////////////////////////////////////////////////
- ///////////////////////////////////// classes ////////////////////////////////////////
- //////////////////////////////////////////////////////////////////////////////////////
- public class DraggableLine {
- float x;
- float y;
- float offsetX = 0;
- float offsetY = 0;
- float intW;
- boolean dragging = false;
- float incY = yinc;
- DraggableLine(float xValue, float yValue, float wValue) {
- x = xValue;
- y = yValue;
- intW = wValue;
- }
- void drag(float mx, float my) {
- if (dragging) {
- y = my + offsetY;
- }
- }
- void clicked(float mx, float my) {
- if (mx > x && mx < x + intW && my > y - incY && my < y + incY) {
- dragging = true;
- offsetY = y - my;
- }
- }
- void stopDragging() {
- dragging = false;
- }
- void display() {
- line(x, y, x + intW, y);
- }
- }
- //////////////////////////////////////////////////////////////////////////////////////
- /////////////////////////////// mouse and key events /////////////////////////////////
- //////////////////////////////////////////////////////////////////////////////////////
- void mousePressed() {
- if (transformMode) {
- draggableLine.clicked(tx(mouseX), ty(mouseY));
- }
- else {
- draggableLine.clicked(mouseX, mouseY);
- }
- }
- void mouseReleased() {
- draggableLine.stopDragging();
- }
1
