如何从javaskript访问processing.js变量并更改它

Question

in the processing sketch i got 在我得到的处理草图中

int posX = 10; 
int posY = 10;
int s = 12;
int vx,vy;
int red,gr,bl, =0;

void setup(){
    size(200,200);
    vx = random(6);
    vy = random(6);
}

void draw(){
    if(mousePressed){
    red = r;
    gr = g;
    bl = b;
    }
    background(red,gr,bl);
    fill(255);
    posX += vx ;
    posY += vy ;

    if (posX > width || posX<0){
        vx *= -1;
    }
    if(posY > height || posY < 0){
        vy *= -1;
    }
    ellipse (posX,posY,s,s);
}

HTML: HTML：

<!DOCTYPE html>
 <html>
 <head>
     <script src="processing-1.4.1.js"></script>
 </head>
 <body>
     <div id="msg">
     </div>
     <canvas id = "canvas" data-processing-sources="mixing.pde"></canvas>
     <button onclick = "startSketch();">Start</button>
     <button onclick = "stopSketch();">Stop</button>
     <script type="application/javascript">
         var processingInstance;
         sp = 1;

         function startSketch(){
            switchSketchState(true);
         }

         function stopSketch(){
            switchSketchState(false);
         }


         function switchSketchState(on){
            if(!processingInstance){
                processingInstance = Processing.getInstanceById('canvas');
            }

            if (on){
                processingInstance.loop();
            }
            else{
                processingInstance.noLoop();
            }
            alert(processingInstance.posX);// this return undefined i have to see 10
         }
     </script>
 </body>
 </html>

and when i am trying to access posX variable via javascript and alert it on the screen like that the browser tell me that it is undefined. 当我试图通过javascript访问posX变量并在屏幕上提醒它，就像浏览器告诉我它是未定义的。 Is there any way to access variables and change their values. 有没有办法访问变量并更改其值。

Answer 1

Your sketch has a couple logic problems: you're switching between int and float types, and you're using undefined variables r g and b . 您的草图有几个逻辑问题：您在int和float类型之间切换，并且您正在使用未定义的变量r g和b 。

I highly recommend programming in Java mode so that these errors are more obvious, then switching to JavaScript mode when you're ready to deploy. 我强烈建议在Java模式下编程，以便这些错误更加明显，然后在准备部署时切换到JavaScript模式。

But your real problem is this: Processing.js only gives you access to a sketch's functions, not its variables. 但是你真正的问题是： Processing.js只允许你访问草图的函数，而不是它的变量。

If you want to get posX in JavaScript, you're going to have to write a getPosX() function and then call that from JavaScript. 如果你想在JavaScript中获得posX ，你将不得不编写一个getPosX()函数，然后从JavaScript调用它。

Same thing if you want to set it: create a setPosX() function and then call that. 如果你想设置它同样的事情：创建一个setPosX()函数，然后调用它。

Answer 2

try this, it logs a processing variable in js on line 67 试试这个，它在第67行的js中记录一个处理变量

  <!-- from: http://processingjs.org/articles/jsQuickStart.html with added function getX(); to demonstrate how to pass variables from a processing sketch to javascript --> <html> <head> <title>Hello Web - Controlling Processing from JavaScript</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/processing.js/1.6.6/processing.min.js"></script> </head> <body> <script type="application/processing" data-processing-target="pjs"> int x=y=1; int xVel=yVel=3; int t = 300; void setup() { size(310, 200); background(100); stroke(255); println('hello web!'); } int getX() { return t; } void draw(){ ellipse(x, y,10,10); x = x + xVel; y = y + yVel; if ((x > width)||(x < 0)){ xVel = xVel * -1; } if ((y > height)||(y < 0)){ yVel = yVel * -1; } } </script> <button onclick="startSketch();"> Start</button> <button onclick="stopSketch();"> Stop</button> <canvas id="pjs" data-processing-sources="pjs"</canvas> <script type="application/javascript"> var processingInstance; function startSketch() { switchSketchState(true); } function stopSketch() { switchSketchState(false); } function switchSketchState(on) { if (!processingInstance) { processingInstance = Processing.getInstanceById('pjs'); } if (on) { processingInstance.loop(); console.log(processingInstance.getX()); } else { processingInstance.noLoop(); // stop animation, call noLoop() } } </script> </body> </html>

working example: 工作实例：

https://codepen.io/madmaker/pen/QZddLR https://codepen.io/madmaker/pen/QZddLR

如何从javaskript访问processing.js变量并更改它

问题描述

2 个解决方案

解决方案1
0 已采纳 2016-07-13 00:41:39

解决方案2
0 2018-10-09 01:59:06

如何从javaskript访问processing.js变量并更改它

问题描述

2 个解决方案

解决方案1 0 已采纳 2016-07-13 00:41:39

解决方案2 0 2018-10-09 01:59:06

解决方案1
0 已采纳 2016-07-13 00:41:39

解决方案2
0 2018-10-09 01:59:06