color skyBlue = color(0x87, 0xCE, 0xEB); // Equivalent of the CSS color #87CEEB color lightSkyBlue = color(0x87, 0xCE, 0xFA); color deepSkyBlue = color(0x00, 0xBF, 0xFF); color white = color(255, 255, 255); void setup() { size(600, 300); smooth(); frameRate(12); } void draw() { setGradient(0, 0, width, height*.333, deepSkyBlue, skyBlue); setGradient(0, height*.333, width, height*.333, skyBlue, lightSkyBlue); setGradient(0, height*.666, width, height*.333, lightSkyBlue, white); float cx = width/2; float cy = height; float rainbowThick = width / 6.0; float bandDistance = rainbowThick*2; float outerDiam = width * .64; colorMode(HSB, 1); noFill(); for (int band = 0; band < 2; ++band) { for (int i = 0; i < rainbowThick; ++i) { float ratio = i/rainbowThick; float ratio2 = (i+band*rainbowThick)/(rainbowThick*2); if (band > 0) ratio = 1-ratio; float hue = ratio*ratio; float sat = 0.85 + sq( sin(ratio2 - frameCount*.2))*.35; float bri = .9 + sq( sin(ratio2 - frameCount*.2))*.10; float alpha = sin( PI*ratio ) * 1.5 * (band > 0? .2 : .5); stroke( hue, sat, bri, alpha ); float rad = band * bandDistance + outerDiam-i; arc(cx, cy, rad, rad, PI, PI*2); } } int fogHeight = round(height * 0.3 + cos(frameCount * .02)*height*0.2); int topFog = height-fogHeight; for (var i = 0; i <= fogHeight; ++i) { float fogRatio = sq(i/fogHeight); stroke(0,0,1,fogRatio); line(0, topFog+i, width, topFog+i); } colorMode(RGB, 256); } // END void setGradient(int x, int y, float w, float h, color c1, color c2 ){ // calculate differences between color components float deltaR = red(c2)-red(c1); float deltaG = green(c2)-green(c1); float deltaB = blue(c2)-blue(c1); for (int j = y; j<=(y+h); j++){ color c = color( (red(c1)+(j-y)*(deltaR/h)), (green(c1)+(j-y)*(deltaG/h)), (blue(c1)+(j-y)*(deltaB/h)) ); stroke(c); line(x, j, x+w, j ); } }