1

framerate（）メソッドを持つprocessing.js.comサイトのオープンソースコードを使用していますが、

フレームレートを変更すると、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);
    }
  }
4

1 に答える 1

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];

e[j][3]setup() 関数に設定されているとの値を単純に変更する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);
  }
}
于 2012-12-19T18:07:13.520 に答える