Question

我在处理中编写了此代码，该处理允许图像根据鼠标位置在垂直方向上移动。现在，我想将其发布在网站上，并了解为什么需要将代码转换为javascript。


float xpos1;
int one = 0;
PImage alpha;


void setup()
{
  alpha = loadImage("Alpha.png");
  size (800, 300);
  smooth();
  xpos1 = width/2;
  }

  void draw() {
    fill(0, 55);
    rect(0, 0, width, height);
    noStroke();
    fill(255, 200);
    float mx = mouseX * 0.4 - width/5.0;

  xpos1 += mx/8;

  if(xpos1 < -700) { xpos1 = width;}
  if(xpos1 > width) { xpos1= -700;}

 image(alpha, xpos1, 90); 

}

是最好还是什至可以转换，还是最好以其他方式从头开始？

Answer 1

Processing基于Java。如果要编写可在浏览器中运行的类似代码，则必须使用基于p5.js并与JavaScript相关的Processing。
Java不是JavaScript

请参见示例：

var alpha, xpos1, one = 0;

function setup()
{
    alpha = loadImage("https://raw.githubusercontent.com/Rabbid76/graphics-snippets/master/resource/texture/ball64.png");
    createCanvas(800, 300);
    smooth();
    xpos1 = width/2;
}

function draw() {
    fill(0, 55);
    rect(0, 0, width, height);
    noStroke();
    fill(255, 200);
    mx = mouseX * 0.4 - width/5.0;

    xpos1 += mx/8;

    if(xpos1 < -700) { xpos1 = width;}
    if(xpos1 > width) { xpos1= -700;}

    image(alpha, xpos1, 90); 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.js"></script>

请注意， p5.js 提供的功能和接口在很大程度上与 Processing 之一相同，但是在许多细节上有所不同。但是，两个API（分别是库）都有很好的文档说明。分别参见p5.js reference Processing reference

将处理转换为javascript

1 个答案: