hello

i have got this code
ther is a glowing blob whith random movement.
so i want to move the blob with mouseX and mouseY.

but the code is so complicated and not commented.
can anyone help me?

Code:

/**
some digital fireflies by
<a href="http://www.local-guru.net/blog">Guru</a>
*/

PGraphics pg1;

void setup() {
  size(400,400);
  pg1 = makeTexture( 40 );
  frameRate(25);
}

float alph = 0.0;

void draw() {
  alph += 0.1;
  background(0);
  
  drawStar( pg1, width/2 + 50 * sin(alph), height/2 + 50 * cos( alph ));
}

void drawStar( PImage img, float x, float y ) {
   blend( img, 0, 0, img.width, img.height, int(x) - img.width/2, int(y) - img.height/2, img.width, img.height, ADD);
}

PGraphics makeTexture( int r ) {
  PGraphics res = createGraphics( r * 6, r * 6, P2D);
  res.beginDraw();
  res.loadPixels();
    for ( int x = 0; x < res.width; x++) {   
	for( int y = 0; y < res.height; y++ ) {
	  float d = min( 512, 50*  sq( r / sqrt( sq( x - 3 * r) + sq( y - 3 * r))));
	  //if ( d < 10 ) d = 0;
	  res.pixels[y * res.width + x] = color( min(255,d), min(255, d*0.8), d* 0.5 );
	}
    }
  res.updatePixels();
  res.endDraw();
  
  return res;  
}
 

I see someone has answered with one simple approach, but you might want to see  the comments added to the code below to get a better idea of what's going on, and for a better solution to the one offered.

___________________________________
/**
some digital fireflies by
<a href="http://www.local-guru.net/blog">Guru</a>
*/

PGraphics pg1;

void setup() {
 size(400,400);
 pg1 = makeTexture( 40 );
 frameRate(25);
}

float alph = 0.0;

// This is the main loop
void draw() {
 alph += 0.1;
 background(0);

 // This function gets repeated each frame
 // The parameters between parentheses are passed to the function
 // To figure out what they do look at the function declaration (below the main loop)
 drawStar( pg1, width/2 + 50 * sin(alph), height/2 + 50 * cos( alph ));
}
// end of the main loop

// The function takes 3 parameters (separated by commas):
// An image then x and y coordinates - I think it's safe to assume these control the position...
void drawStar( PImage img, float x, float y ) {
  blend( img, 0, 0, img.width, img.height, int(x) - img.width/2, int(y) - img.height/2, img.width, img.height, ADD);
}

// This is another function which only gets called once during setup to create 'pg1' the image passed to the 'drawStar' function
PGraphics makeTexture( int r ) {
 PGraphics res = createGraphics( r * 6, r * 6, P2D);
 res.beginDraw();
 res.loadPixels();
   for ( int x = 0; x < res.width; x++) {  
     for( int y = 0; y < res.height; y++ ) {
       float d = min( 512, 50*  sq( r / sqrt( sq( x - 3 * r) + sq( y - 3 * r))));
       //if ( d < 10 ) d = 0;
       res.pixels[y * res.width + x] = color( min(255,d), min(255, d*0.8), d* 0.5 );
     }
   }
 res.updatePixels();
 res.endDraw();
 
 return res;  
}
___________________________________

So you need to concentrate on:

Code:

drawStar( pg1, width/2 + 50 * sin(alph), height/2 + 50 * cos( alph )); 

the parameters being passed are:

PImage = pg1
x = width/2 + 50 * sin(alph)
y = height/2 + 50 * cos( alph)

I'd suggest you try replacing the width/2 and height/2 with the mouse position.  The 50 * sin(alph) and 50 * cos(alph) creates a wobbling motion (edit: not the best description: it makes the ball spin around the coordinates passed to it, with 50 being the radius, reduce it to a smaller number and you get a nice effect (I'd also suggest playing around with these formulae  - very useful they are... )) so you probably don't want to remove that.