我正在使用来自processing.js.com网站的开源代码,该网站有frame rate()方法,
当我改变帧速率时,它显示了Java中的移动形状的变化。 Javascript模式但不是Android模式, 为什么会这样? 我应该如何提高帧率以加快我的可视化效果?
// Set number of circles
int count = 25;
// Set maximum and minimum circle size
int maxSize = 100;
int minSize = 20;
// Build float array to store circle properties
float[][] e = new float[count][5];
// Set size of dot in circle center
float ds=2;
// Selected mode switch
int sel = 0;
// Set drag switch to false
boolean dragging=false;
// If use drags mouse...
void mouseDragged(){
// Set drag switch to true
dragging=true;
}
// If user releases mouse...
void mouseReleased(){
// ..user is no-longer dragging
dragging=false;
}
// Set up canvas
void setup(){
// Frame rate
frameRate(130);
// Size of canvas (width,height)
size(600,475);
// Stroke/line/border thickness
strokeWeight(1);
// Initiate array with random values for circles
for(int j=0;j< count;j++){
e[j][0]=random(width); // X
e[j][1]=random(height); // Y
e[j][2]=random(minSize,maxSize); // Radius
e[j][3]=random(-.5,.5); // X Speed
e[j][4]=random(-.5,.5); // Y Speed
}
}
// Begin main draw loop (called 25 times per second)
void draw(){
// Fill background black
background(0);
// Begin looping through circle array
for (int j=0;j< count;j++){
// Disable shape stroke/border
noStroke();
// Cache diameter and radius of current circle
float radi=e[j][2];
float diam=radi/2;
// If the cursor is within 2x the radius of current circle...
if( dist(e[j][0],e[j][1],mouseX,mouseY) < radi ){
// Change fill color to green.
fill(64,187,128,100);
// Remember user has circle "selected"
sel=1;
// If user has mouse down and is moving...
if (dragging){
// Move circle to circle position
e[j][0]=mouseX;
e[j][1]=mouseY;
}
} else {
// Keep fill color blue
fill(64,128,187,100);
// User has nothing "selected"
sel=0;
}
// Draw circle
ellipse(e[j][0],e[j][1],radi,radi);
// Move circle
e[j][0]+=e[j][3];
e[j][1]+=e[j][4];
/* Wrap edges of canvas so circles leave the top
and re-enter the bottom, etc... */
if( e[j][0] < -diam ){ e[j][0] = width+diam; }
if( e[j][0] > width+diam ){ e[j][0] = -diam; }
if( e[j][1] < 0-diam ){ e[j][1] = height+diam; }
if( e[j][1] > height+diam){ e[j][1] = -diam; }
// If current circle is selected...
if (sel==1) {
// Set fill color of center dot to white..
fill(255,255,255,255);
// ..and set stroke color of line to green.
stroke(128,255,0,100);
} else {
// otherwise set center dot color to black..
fill(0,0,0,255);
// and set line color to turquoise.
stroke(64,128,128,255);
}
// Loop through all circles
for(int k=0;k< count;k++){
// If the circles are close...
if( dist(e[j][0],e[j][1],e[k][0],e[k][1]) < radi){
// Stroke a line from current circle to adjacent circle
line(e[j][0],e[j][1],e[k][0],e[k][1]);
}
}
// Turn off stroke/border
noStroke();
// Draw dot in center of circle
rect(e[j][0]-ds,e[j][1]-ds,ds*2,ds*2);
}
}
答案 0 :(得分:1)
要更改草图中圆圈的速度,只需更改速度值即可。
在setup()函数中,设置以下内容:
e[j][3] = random(-.5, .5); // X Speed
e[j][4] = random(-.5, .5); // Y Speed
稍后使用这些值来移动draw()函数中的圆圈:
// Move circle
e[j][0] += e[j][3];
e[j][1] += e[j][4];
您可以简单地更改setup()函数中设置的e[j][3]
和e[j][4]
值,也可以将其替换为代码开头的全局范围中指定的变量。以下是我要做的快速修改。记下代码开头附近设置的变量float speed = 0.5;
。如果您将该值设置得更大,则圆圈的移动速度会更快。
// Set number of circles
int count = 25;
// Set maximum and minimum circle size
int maxSize = 100;
int minSize = 20;
// Set speed
float speed = 0.5;
// Build float array to store circle properties
float[][] e = new float[count][5];
// Set size of dot in circle center
float ds = 2;
// Selected mode switch
int sel = 0;
// Set drag switch to false
boolean dragging = false;
// If use drags mouse...
void mouseDragged() {
// Set drag switch to true
dragging = true;
}
// If user releases mouse...
void mouseReleased() {
// ..user is no-longer dragging
dragging = false;
}
// Set up canvas
void setup() {
// Size of canvas (width,height)
size(600, 475);
// Stroke/line/border thickness
strokeWeight(1);
// Initiate array with random values for circles
for (int j = 0; j < count; j++) {
e[j][0] = random(width); // X
e[j][1] = random(height); // Y
e[j][2] = random(minSize, maxSize); // Radius
e[j][3] = random(-speed, speed); // X Speed
e[j][4] = random(-speed, speed); // Y Speed
}
}
// Begin main draw loop (called 25 times per second)
void draw() {
// Fill background black
background(0);
// Begin looping through circle array
for (int j = 0; j < count; j++) {
// Disable shape stroke/border
noStroke();
// Cache diameter and radius of current circle
float radi = e[j][2];
float diam = radi / 2;
// If the cursor is within 2x the radius of current circle...
if (dist(e[j][0], e[j][1], mouseX, mouseY) < radi) {
// Change fill color to green.
fill(64, 187, 128, 100);
// Remember user has circle "selected"
sel = 1;
// If user has mouse down and is moving...
if (dragging) {
// Move circle to circle position
e[j][0] = mouseX;
e[j][1] = mouseY;
}
} else {
// Keep fill color blue
fill(64, 128, 187, 100);
// User has nothing "selected"
sel = 0;
}
// Draw circle
ellipse(e[j][0], e[j][1], radi, radi);
// Move circle
e[j][0] += e[j][3];
e[j][1] += e[j][4];
/* Wrap edges of canvas so circles leave the top
and re-enter the bottom, etc... */
if (e[j][0] < -diam) {
e[j][0] = width + diam;
}
if (e[j][0] > width + diam) {
e[j][0] = -diam;
}
if (e[j][1] < 0 - diam) {
e[j][1] = height + diam;
}
if (e[j][1] > height + diam) {
e[j][1] = -diam;
}
// If current circle is selected...
if (sel == 1) {
// Set fill color of center dot to white..
fill(255, 255, 255, 255);
// ..and set stroke color of line to green.
stroke(128, 255, 0, 100);
} else {
// otherwise set center dot color to black..
fill(0, 0, 0, 255);
// and set line color to turquoise.
stroke(64, 128, 128, 255);
}
// Loop through all circles
for (int k = 0; k < count; k++) {
// If the circles are close...
if (dist(e[j][0], e[j][1], e[k][0], e[k][1]) < radi) {
// Stroke a line from current circle to adjacent circle
line(e[j][0], e[j][1], e[k][0], e[k][1]);
}
}
// Turn off stroke/border
noStroke();
// Draw dot in center of circle
rect(e[j][0] - ds, e[j][1] - ds, ds * 2, ds * 2);
}
}