如何从 javascript 访问 processing.js 变量并更改它答案

【问题标题】：how to access processing.js variable from javaskript and change it如何从 javascript 访问 processing.js 变量并更改它
【发布时间】：2016-07-11 18:00:10
【问题描述】：

在我得到的处理草图中

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：

<!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>

当我试图通过 javascript 访问 posX 变量并在屏幕上提醒它时，浏览器告诉我它是未定义的。有什么方法可以访问变量并更改它们的值。

【问题讨论】：

你能发一个minimal reproducible example 或小提琴吗？你什么时候执行你的JavaScript？你确定它是在你的处理代码加载之后发生的吗？
这是一个普通的 HTML 文档，在我的画布之后我有两个按钮，一个是启动 loop()，另一个是用 Noloop() 停止动画，在它们之后我得到了我的 JavaScript 代码，我非常支持我的代码已加载，因为我让球在画布上移动并通过按钮开始和停止动画
如果没有看到我们可以运行的 minimal reproducible example 或我们可以玩的 JSFiddle，将很难为您提供帮助。
在那个特定的示例中并不需要我只需要一种方法来访问从 javascript 到处理的变量，并且如果可能的话能够读取和写入该变量。
您发布的代码看起来不错，但还不足以真正回答您。我们需要查看更多可以运行的代码，具体代码可以是 minimal reproducible example 或 JSFiddle。

标签： javascript processing processing.js

【解决方案1】：

您的草图有几个逻辑问题：您在 int 和 float 类型之间切换，并且您正在使用未定义的变量 r g 和 b。

我强烈建议在 Java 模式下进行编程，以便这些错误更加明显，然后在准备好部署时切换到 JavaScript 模式。

但你真正的问题是：Processing.js 只允许你访问草图的函数，而不是它的变量。

如果您想在 JavaScript 中获取 posX，则必须编写一个 getPosX() 函数，然后从 JavaScript 中调用它。

如果你想设置它，同样的事情：创建一个setPosX() 函数，然后调用它。

【讨论】：

我在我的测试“东西”中使用了 r,g,b 变量，我只是在发布示例时忘记删除它们，它的工作方式是我为 positionX 制作了一个函数并调用它
@Mimi Nice。很高兴你把它整理好了。

【解决方案2】：

试试这个，它在第 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>

工作示例：

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

【讨论】：