我对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>
有人有想法吗？
祝你好运
答案 0 :(得分：0)
据我所知，Processing.js有自己的草图级x和y变量。我不知道他们在哪里定义 - 也许在画布上？ （我不是一个JavaScript人。）
您可以通过在Processing helper中运行这个小草图来证明这一点：
void draw() {
background(0);
ellipse(x, y, 25, 25);
}
这会给您带来麻烦，因为当您在x课程中使用y和Node时，Processing.js会认为您正在谈论草图级x和y变量，而不是x类中定义的y和PVector变量。
然后，当您尝试使用它们进行绘制时， 引用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;
}
}
同样，您可以直接调用超级构造函数：
class Node extends PVector{
public Node(float theX, float theY){
super(theX, theY);
}
}
您也可以停止让Node班级延长PVector。然后，您可以在x类或y变量中定义Node和PVector position个变量。
老实说，无论如何，这可能是一个更好的设计。 Node 有一个 PVector，而不是Node 是-a PVector。 Favor composition over inheritance和all that。