javascript - 处理js无法正常工作-6ren

javascript - 处理js无法正常工作

转载作者：行者123 更新时间：2023-11-28 06:24:58

我对processing.js非常陌生，我正在尝试将pr-sketch移植到js。我不能只加载 pde，因为之后我必须插入一些 js-socket.io 事件。

所以问题是草图正在加载，但只是其中的一部分。该草图是一种粒子系统(Node 类)、一个吸引节点的吸引器(Attractor 类)和主草图(FLIP_IDLE)。

看起来主双桅船正在加载，但没有加载类，但我不确定:((移植是通过processing.helper.html完成的)

这是原始的 pde 代码:

//Particles count
int nodeCount = 4000;

boolean attOut = false;
boolean rainbow = false;

//Moving path for attractor
float angle = 0.0;
int freqX = 8;
int freqY = 8;
int phi = 90;
int modFreqX = 15;
int modFreqY = 15;

float offsetX;
float offsetY;

float scalar = 450;
float speed = 0.0008;

float myC = 0;

//Radius (1920 x 1080)
int myRadius2 = 541; //

float myColor;
float myColor2;

Node[] myNodes = new Node[nodeCount];
Attractor myAttractor;

void setup(){

  //Center of moving path
  offsetX = width/2;
  offsetY = height/2;


  size(1920,1080); 
  colorMode(HSB,100);
  background(255); 

  //Create particles
  for(int i = 0; i < nodeCount; i++){
    myNodes[i] = new Node(width/2, height/2);
    myNodes[i].velocity.x = random(-8,8);
    myNodes[i].velocity.y = random(-8,8);
    myNodes[i].damping = 0.01;
  }

  //Create attractor
   myAttractor = new Attractor(0, 0);
}

void draw(){


  //Moving path
  float x = offsetX + sin(angle*freqX + radians(phi)) * cos(angle * modFreqX) * 500;
  float y = offsetY + sin(angle*freqY) * cos(angle * modFreqY) * 500;

  //float x = offsetX + sin(angle*freqX + radians(phi)) * 500;
  //float y = offsetY + sin(angle*freqY) * 500;
  angle += speed;

  fill(0,10);
  rect(0,0,width,height);

  //Attractor position
  myAttractor.x = x;
  myAttractor.y = y;

  for(int i = 0; i < myNodes.length; i++){

    myAttractor.attract(myNodes[i]);
    myNodes[i].damping = 0.01;

    if(attOut == true){

      myAttractor.ramp = 0.7;
      myAttractor.x = width/2;
      myAttractor.y = height/2;       

       if(myNodes[i].myD >= myRadius2){  

         myNodes[i].velocity.x = 0;
         myNodes[i].velocity.y = 0;     
       }

    }else{
      myAttractor.ramp = 0.99;    
    }

    if(myC > 100)
      myC = 0;

    myC = myC + 0.000002;

    myColor = map(sin(myC),-0.98,0.98,0,82);  
    myColor2 = map(sin(myC),-0.98,0.98,20,30);

    //Update and draw particles
    myNodes[i].Update();
    noStroke();

    if(rainbow == true){
      fill(myColor,100,100);
    }else{
      fill(myColor2,100,100);
    }
    ellipse(myNodes[i].x, myNodes[i].y, 2.5, 2.5);
  }

  //Round screen border
  noFill();
  stroke(40,200,100);
  ellipse(width/2,height/2,1080,1080);
  noStroke(); 
}

/*
  --------UI---------
  1 = IDLE
  2 = ACTIVE
  3 = EVALUATION
*/
void keyPressed(){
  if(key=='1'){
    attOut=false;
    rainbow = false;
    myAttractor.radius = 350;
    myAttractor.strength = 0.4;
    speed = 0.001;

  }else if(key == '2'){
    attOut=false;
    rainbow = true;
    myAttractor.radius = 350;
    myAttractor.strength = 0.7;
    speed = 0.0008;    

  }else if(key == '3'){

    if(myAttractor.strength >= 0)
      myAttractor.strength *= -1;
    attOut=true;
    myAttractor.radius = 600;
  }
}

class Attractor {
  // position
  float x=0, y=0; 

  // radius of impact
  float radius = 400;
  float strength = 0.4;  
  float ramp = 0.99;


  Attractor(float theX, float theY) {
    x = theX;
    y = theY;
  }


  void attract(Node theNode) {
    // calculate distance
    float dx = x - theNode.x;
    float dy = y - theNode.y;
    float d = mag(dx, dy);



    if (d > 0 && d < radius) {
      // calculate force
      float s = d/radius;
      float f = (1 / pow(s, 0.5*ramp) - 1);
      f = strength * f/radius;

      // apply force to node velocity
      theNode.velocity.x += dx * f;
      theNode.velocity.y += dy * f;
    }
  }
}


class Node extends PVector{
  PVector velocity = new PVector();
  float minX = 5, minY = 5, maxX = width-5, maxY = height-5;
  float damping = 0.9;
  PVector v1 = new PVector(width/2, height/2,0);
  float myD;
  int myRadius = 541;


  Node(float theX, float theY){
    x = theX;
    y = theY;

  }

  void Update(){
     x += velocity.x;
     y += velocity.y;

     /*
     PVector baseDelta = velocity.normalize();
     PVector normal = new PVector(-baseDelta.y, baseDelta.x);

     PVector incidence = PVector.mult(velocity, -1);
     incidence.normalize();
     */
      myD = dist(v1,this);

      if(myD >= myRadius){  
         velocity.x = -velocity.x;
         velocity.y = -velocity.y;
      }

      velocity.x *= (1-damping);
      velocity.y *= (1-damping);

    }
}

这是带有 js 的 html 文件:

    <!DOCTYPE html>
<html>
<head>
    <title>Arturs JS</title>
    <script src="processing.js"></script>
    <script src="jquery.js"></script>
    <script>
        function whenImGoodAndReady() 
        {
            var mySketch = (function($p) 
            {   
                var Attractor = (function() 
                {
                    function Attractor() 
                    {
                        var $this_1 = this;

                        function $superCstr() {
                            $p.extendClassChain($this_1)
                        }
                        $this_1.x = 0;
                        $this_1.y = 0;
                        $this_1.radius = 400;
                        $this_1.strength = 0.4;
                        $this_1.ramp = 0.99;

                        function attract$1(theNode) {
                            var dx = $this_1.x - theNode.x;
                            var dy = $this_1.y - theNode.y;
                            var d = $p.mag(dx, dy);

                            if (d > 0 && d < $this_1.radius) {
                                var s = d / $this_1.radius;
                                var f = (1 / $p.pow(s, 0.5 * $this_1.ramp) - 1);
                                f = $this_1.strength * f / $this_1.radius;

                                theNode.velocity.x += dx * f;
                                theNode.velocity.y += dy * f;
                            }
                        }
                        $p.addMethod($this_1, 'attract', attract$1, false);

                        function $constr_2(theX, theY) {
                            $superCstr();

                            $this_1.x = theX;
                            $this_1.y = theY;
                        }

                        function $constr() {
                            if (arguments.length === 2) {
                                $constr_2.apply($this_1, arguments);
                            } else $superCstr();
                        }
                        $constr.apply(null, arguments);
                    }
                    return Attractor;
                })();

                $p.Attractor = Attractor;

                var Node = (function() {
                    function Node() {
                        var $this_1 = this;
                        var $super = {
                            $upcast: $this_1
                        };

                        function $superCstr() {
                            $p.PVector.apply($super, arguments);
                            if (! ('$self' in $super)) $p.extendClassChain($super)
                        }
                        $this_1.velocity = new $p.PVector();
                        $this_1.minX = 5;
                        $this_1.minY = 5;
                        $this_1.maxX = $p.width - 5;
                        $this_1.maxY = $p.height - 5;
                        $this_1.damping = 0.9;
                        $this_1.v1 = new $p.PVector($p.width / 2, $p.height / 2, 0);
                        $this_1.myD = 0;
                        $this_1.myRadius = 541;

                        function Update$0() {
                            x += $this_1.velocity.x;
                            y += $this_1.velocity.y;

                            $this_1.myD = $p.dist($this_1.v1, $this_1.$self);

                            if ($this_1.myD >= $this_1.myRadius) {
                                $this_1.velocity.x = -$this_1.velocity.x;
                                $this_1.velocity.y = -$this_1.velocity.y;
                            }

                            $this_1.velocity.x *= (1 - $this_1.damping);
                            $this_1.velocity.y *= (1 - $this_1.damping);
                        }
                        $p.addMethod($this_1, 'Update', Update$0, false);

                        function $constr_2(theX, theY) {
                            $superCstr();

                            x = theX;
                            y = theY;
                        }

                        function $constr() {
                            if (arguments.length === 2) {
                                $constr_2.apply($this_1, arguments);
                            } else $superCstr();
                        }
                        $constr.apply(null, arguments);
                    }
                    Node.$base = $p.PVector;
                    return Node;
                })();


                $p.Node = Node;

                var nodeCount = 4000;

                var attOut = false;
                var rainbow = false;

                var angle = 0.0;
                var freqX = 8;
                var freqY = 8;
                var phi = 90;
                var modFreqX = 15;
                var modFreqY = 15;

                var offsetX = 0;
                var offsetY = 0;

                var scalar = 450;
                var speed = 0.0008;

                var myC = 0;

                var myRadius2 = 541;
                var myColor = 0;
                var myColor2 = 0;

                var myNodes = $p.createJavaArray('Node', [nodeCount]);
                var myAttractor = null;



                function setup() {
                    offsetX = $p.width / 2;
                    offsetY = $p.height / 2;

                    $p.size(1920, 1080);
                    $p.colorMode($p.HSB, 100);
                    $p.background(255);

                    for (var i = 0; i < nodeCount; i++) {
                        myNodes[i] = new Node($p.width / 2, $p.height / 2);
                        myNodes[i].velocity.x = $p.random(-8, 8);
                        myNodes[i].velocity.y = $p.random(-8, 8);
                        myNodes[i].damping = 0.01;
                    }

                    myAttractor = new Attractor(0, 0);
                }
                $p.setup = setup;
                setup = setup.bind($p);



                function draw() {
                    var x = offsetX + $p.sin(angle * freqX + $p.radians(phi)) * $p.cos(angle * modFreqX) * 500;
                    var y = offsetY + $p.sin(angle * freqY) * $p.cos(angle * modFreqY) * 500;

                    angle += speed;

                    $p.fill(0, 10);
                    $p.rect(0, 0, $p.width, $p.height);

                    myAttractor.x = x;
                    myAttractor.y = y;

                    for (var i = 0; i < myNodes.length; i++) {
                        myAttractor.attract(myNodes[i]);
                        myNodes[i].damping = 0.01;

                        if (attOut == true) {
                            myAttractor.ramp = 0.7;
                            myAttractor.x = $p.width / 2;
                            myAttractor.y = $p.height / 2;

                            if (myNodes[i].myD >= myRadius2) {
                                myNodes[i].velocity.x = 0;
                                myNodes[i].velocity.y = 0;
                            }
                        } else {
                            myAttractor.ramp = 0.99;
                        }

                        if (myC > 100) myC = 0;

                        myC = myC + 0.000002;

                        myColor = $p.map($p.sin(myC), -0.98, 0.98, 0, 82);
                        myColor2 = $p.map($p.sin(myC), -0.98, 0.98, 20, 30);

                        myNodes[i].Update();
                        $p.noStroke();

                        if (rainbow == true) {
                            $p.fill(myColor, 100, 100);
                        } else {
                            $p.fill(myColor2, 100, 100);
                        }
                        $p.ellipse(myNodes[i].x, myNodes[i].y, 2.5, 2.5);
                    }

                    $p.noFill();
                    $p.stroke(40, 200, 100);
                    $p.ellipse($p.width / 2, $p.height / 2, 1080, 1080);
                    $p.noStroke();
                }
                $p.draw = draw;
                draw = draw.bind($p);


                function keyPressed() {
                    if ($p.key == (new $p.Character('1'))) {
                        attOut = false;
                        rainbow = false;
                        myAttractor.radius = 350;
                        myAttractor.strength = 0.4;
                        speed = 0.001;
                        console.log ('Pressed 1');
                    } else if ($p.key == (new $p.Character('2'))) {
                        attOut = false;
                        rainbow = true;
                        myAttractor.radius = 350;
                        myAttractor.strength = 0.7;
                        speed = 0.0008;
                        console.log ('Pressed 2');
                    } else if ($p.key == (new $p.Character('3'))) {
                        if (myAttractor.strength >= 0) myAttractor.strength *= -1;
                        attOut = true;
                        myAttractor.radius = 600;
                        console.log ('Pressed 3');
                    }
                }

                $p.keyPressed = keyPressed;
                keyPressed = keyPressed.bind($p);

            })

            var myCanvas = document.getElementById('mycanvas');

            new Processing(myCanvas, mySketch);1
        }
    </script>
</head>
<body>
    <canvas id="mycanvas">

    </canvas>


    <script type="text/javascript">
    $(document).ready(function ()
        {
            console.log ('ready to go');
            whenImGoodAndReady ();
        });

    </script>
</body>
</html>

有人有想法吗？

致以诚挚的问候

最佳答案

据我所知，Processing.js 有自己的草图级 x 和 y 变量。我不确定它们是在哪里定义的 - 也许在 Canvas 中？ (我不是 JavaScript 专家。)

您可以通过在处理助手中运行这个小草图来证明这一点:

void draw() {
  background(0);
  ellipse(x, y, 25, 25);
}

这会给您带来麻烦，因为当您在 Node 类中使用 x 和 y 时，Processing.js 认为您正在谈论草图级别的 x 和 y 变量，而不是 PVector 中定义的 x 和 y 变量 类。

稍后，当您尝试使用它们进行绘图时，您引用了 PVector x 和 y。但由于您从未设置过它们(您设置了草图级别 x 和 y)，因此它们仍然为零。您可以通过绘制更大的椭圆来证明这一点 - 它们都位于左上角。

要解决此问题，您必须确保Processing.js 知道您正在讨论的是哪个x 和y 变量。一种方法是使用 super 关键字:

class Node extends PVector{
   public Node(float theX, float theY){
      super.x = theX
      super.y = theY;
   }
}

同样，你可以直接调用 super 构造函数:

class Node extends PVector{
   public Node(float theX, float theY){
      super(theX, theY);
   }
}

您也可以停止让 Node 类扩展 PVector。然后，您可以在 Node 类中定义 x 和 y 变量，或 PVector 位置 变量。

老实说，这可能是一个更好的设计。 节点 有一个 PVector，而不是节点 是一个 PVector。 Favor composition over inheritance ，和 all that .

关于javascript - 处理js无法正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35205900/

文章推荐： c++ - opencv:如何填充区域外的区域/边缘

文章推荐： html - 添加背景时悬停和事件不起作用

文章推荐： c++ - 如何将字母字符转换为相应的转义特殊字符

ios - 如果对主纹理进行 mipmap 处理，是否还需要对多重采样纹理进行 mipmap 处理？
对于 Metal ，如果对主纹理进行 mipmap 处理，是否还需要对多采样纹理进行 mipmap 处理？我阅读了苹果文档，但没有得到任何相关信息。最佳答案 Mipmapping 适用于您将从中
javascript - 让一些路由由 Groovy 处理，另一些由 React-router v4 处理
我正在使用的代码在后端 Groovy 代码中具有呈现 GSP(Groovy 服务器页面)的 Controller 。对于前端，我们使用 React-router v4 来处理路由。我遇到的问题是，通过
jquery - 让客户端 (Javascript) 处理 HTML 比用 C# 处理 HTML 更好吗？
我们正在 build 一个巨大的网站。我们正在考虑是在服务器端(ASP .Net)还是在客户端进行 HTML 处理。例如，我们有 HTML 文件，其作用类似于用于生成选项卡的模板。服务器端获取 HT
java - 处理 - 图像数组错误 - "Type mismatch, ' 处理 .core.PImage' 不匹配.."
我正在尝试将图像加载到 void setup() 中的数组中，但是当我这样做时出现此错误:“类型不匹配，'processing .core.PImage' does not匹配“processing.
javascript - 客户更新请求可通过 POSTMAN 处理，但无法使用 Shopify 私有(private)应用程序通过 AJAX 处理
我正在尝试使用其私有(private)应用程序更新 Shopify 上的客户标签。我用 postman 尝试过，一切正常，但通过 AJAX，它带我成功回调而不是错误，但成功后我得到了身份验证链接，而不
处理 - 更改默认应用程序图标
如何更改我的 Processing appIconTest.exe 导出的默认图标在窗口中的应用程序？默认一个: 最佳答案经过一些研究，我能找到的最简单的解决方案是: 进入 ...\process
处理:如何添加背景音乐
我在 Processing 中做了一个简单的小游戏，但需要一些帮助。我有一个 mp3，想将它添加到我的应用程序中，以便在后台循环运行。这可能吗？非常感谢。最佳答案您可以使用声音库。处理已经自带
处理 - 将一起形成一个圆的多个图像按钮
我有几个这样创建的按钮: 在 setup() PImage[] imgs1 = {loadImage("AREA1_1.png"),loadImage("AREA1_2.png"),loadImage
处理:如何分屏？
我正在尝试使用 Processing 创建一个多人游戏，但无法弄清楚如何将屏幕分成两个以显示玩家的不同情况？就像在 c# 中一样，我们有Viewport leftViewport,rightView
处理如何根据草图中的位置改变颜色？
我一直在尝试使用 Moore 邻域在处理过程中创建元胞自动机，到目前为止非常成功。我已经设法使基本系统正常工作，现在我希望通过添加不同的功能来使用它。现在，我检查细胞是否存活。如果是，我使用 fill
JavaScript 处理
有没有办法用 JavaScript 代码检查资源使用情况？我可以检查脚本的 RAM 使用情况和 CPU 使用情况吗？由于做某事有多种方法，我可能会使用不同的方法编写代码，并将其保存为两个不同的文件，
list - 处理 list
我想弄清楚如何处理这样的列表: [ [[4,6,7], [1,2,4,6]] , [[10,4,2,4], [1]] ] 这是一个整数列表的列表我希望我的函数将此列表作为输入并返回列表中没有重复的整
Flutter 处理 MethodChannel
有没有办法在不需要时处理 MethodChannel/EventChannel ？我问是因为我想为对象创建多个方法/事件 channel 。例子: class Call { ... fields
python - 处理 ConnectionResetError
我有一个关于在 Python3 中处理 ConnectionResetError 的问题。这通常发生在我使用 urllib.request.Request 函数时。我想知道如果我们遇到这样的错误是否可
处理 float 的奇怪问题
我一直在努力解决这个问题几个小时，但无济于事。代码很简单，一个弹跳球(粒子)。将粒子的速度初始化为 (0, 0) 将使其保持上下弹跳。将粒子的初始化速度更改为 (0, 0.01) 或任何十进制浮点数都
python - 处理 : 时遇到错误
我把自己弄得一团糟。我想在我的系统中添加 python3.6 所以我决定在我的 Ubuntu 19.10 中卸载现有的。但是现在每次我想安装一些东西我都会得到这样的错误: dpkg: error w
Rpart - NA 处理
我正在努力解决 Rpart 包中的 NA 功能。我得到了以下数据框(下面的代码) Outcome VarA VarB 1 1 1 0 2 1 1 1
java - 处理/访问磁盘上的文件
我将 Java 与 JSF 一起使用，这是 Glassfish 3 容器。在我的 Web 应用程序中，我试图实现一个文件(图像)管理系统。我有一个 config.properties我从中读取上传
optimization - 处理:如何提高程序的帧率？
所以我一直在Processing工作几个星期以来，虽然我没有编程经验，但我已经转向更复杂的项目。我正在编写一个进化模拟器，它会产生具有随机属性的生物。最终，我将添加复制，但现在这些生物只是在屏幕上漂
Delphi 2009 处理 with
有人知道 Delphi 2009 对“with”的处理有什么不同吗？我昨天解决了一个问题，只是将“with”解构为完整引用，如“with Datamodule、Dataset、MainForm”。

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 处理js无法正常工作