Hi, Terri: have you downloaded the Exibition source (motionLines_Class.pde) The gradient effect is done line by line. That's why I think about "fill pixel by pixel"... But don't pay me attention. Better take a glance to Search processing.org and Discourse(specifying "gradient").

One Saludo.
Nach.

nah, just copy the code over into a new sketch and press run. then alter as you like.

PImage (Processings builtin class for images) reference is here.

some other inspiration might be here:
http://builtwithprocessing.org/browse.php?s=gradient

F

actually it (currently) only works with sketch-names ..

F

nah, you just got the colors wrong:

it's either:
gradient = new Gradient ( 100, 100, #00be12, #00870d );
or
gradient = new Gradient ( 100, 100, 0xFF00be12, 0xFF00870d );

F

ok. in simple mode (without setup(), draw()) you need to specify the class before you use it. so the class definition for Gradient goes before your code.

then you need to tell processing what kind of variable you are trying to initialize when you do:
gradient = new Gradient( ... )
it should be:
Gradient gradient = new Gradient( ... );
( note that Processing is case-sensitive, so the lowercase "gradient" is just a name. don't confuse with the class Gradient itself. )

another thing: texture only works with beginShape(), vertex() and
endShape(). line does not work in there.

here's the full working example:

Code:

class Gradient
extends PImage
{
    int color1, color2;
    
    Gradient ( int _w, int _h )
    {
	  super(_w, _h);
	  
	  color1 = 0xFF000000;
	  color2 = 0xFFFFFFFF;
    }
    
    Gradient ( int _w, int _h, int _c1, int _c2 )
    {
	  super(_w, _h);
	  
	  color1 = _c1;
	  color2 = _c2;
    }
    
    void vertical ()
    {
	  float as = (((color2 >> 24) & 0xFF) - ((color1 >> 24) & 0xFF)) / this.height;
	  float rs = (((color2 >> 16) & 0xFF) - ((color1 >> 16) & 0xFF)) / this.height;
	  float gs = (((color2 >>  8) & 0xFF) - ((color1 >>  8) & 0xFF)) / this.height;
	  float bs = (((color2 >>  0) & 0xFF) - ((color1 >>  0) & 0xFF)) / this.height;
	  
	  for ( int ih=0; ih < this.height; ih++ )
	  {
		int c = color( ((color1 >> 16) & 0xFF) + round(rs * ih),
				   ((color1 >>  8) & 0xFF) + round(gs * ih),
				   ((color1 >>  0) & 0xFF) + round(bs * ih),
				   ((color1 >> 24) & 0xFF) + round(as * ih)
				  );
		for ( int iw=0; iw < this.width; iw++ )
		{
		    this.pixels[iw+(ih*this.width)] = c;
		}
	  }   
    }
    
    
    void horizontal ()
    {
	  float as = (((color2 >> 24) & 0xFF) - ((color1 >> 24) & 0xFF)) / this.width;
	  float rs = (((color2 >> 16) & 0xFF) - ((color1 >> 16) & 0xFF)) / this.width;
	  float gs = (((color2 >>  8) & 0xFF) - ((color1 >>  8) & 0xFF)) / this.width;
	  float bs = (((color2 >>  0) & 0xFF) - ((color1 >>  0) & 0xFF)) / this.width;
	  
	  for ( int iw=0; iw < this.width; iw++ )
	  {
		int c = color( ((color1 >> 16) & 0xFF) + round(rs * iw),
				   ((color1 >>  8) & 0xFF) + round(gs * iw),
				   ((color1 >>  0) & 0xFF) + round(bs * iw),
				   ((color1 >> 24) & 0xFF) + round(as * iw)
				  );
		for ( int ih=0; ih < this.height; ih++ )
		{
		    this.pixels[iw+(ih*this.width)] = c;
		}
	  }   
    }
}

size (600, 400, P3D); 
background(255); 
Gradient gradient = new Gradient ( 100, 100, #00be12, #00070d ); 
gradient.horizontal();

noStroke();
beginShape();
texture(gradient);
    vertex(575, 0, 0, 0);
    vertex(600, 0, 0, 100);
    vertex(0, 400, 100, 0);
    vertex(0, 380, 100, 100);
endShape();
 

best,
F

hi terri,

sure, i see. i don't think that it's that important for you as a beginner to fully understand how to write classes, rather how to use them. so i suggest you concentrate on the part below the class definition (from size(..) on). explanations of the syntax used there is here in the reference.

F