This sketch is relatively simple considering the compositions it ends up creating. There are a number of rectangles slowly floating upward. When the rectangles reach the top of the screen, they get repositioned at the bottom of the screen and given a new size and color. The hue is determined by a global hue value that is constantly cycling. The brightness, saturation, and size of the rectangles are selected randomly. To get the overlaid effects, each rectangle is drawn at a very low opacity and the underlying canvas (aka ‘graphics buffer’) is allowed to accumulate pixel colors instead of reseting each frame.
The end result is a lovely fish tank effect that I could just stare at for hours. The animation is done in processing and exported to processing.js. The source is available for download at the bottom of the page.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 |
Box[] allBoxes; int numBoxes = 100; float currentHue; float hueStep = 0.5; float xOffset; void setup() { size(940, 540); colorMode(HSB, 360, 1.0, 1.0, 1.0); background(360); currentHue = random(360.0); allBoxes = new Box[numBoxes]; createBoxes(); noStroke(); xOffset = 0.0; } void draw() { // background(360); // xOffset = (mouseX - width/2) * 0.002; xOffset = 0; for (int i=0; i<allBoxes.length; i++) { allBoxes[i].update(); } } void createBoxes() { for (int i=0; i<numBoxes; i++) { Box box = new Box(); allBoxes[i] = box; } } float getNewHue() { currentHue += hueStep; if (currentHue >= 360.0) currentHue = 0.0; return currentHue; } boolean sketchFullScreen() { return false; } class Box { float x, y, ww, hh; float h, s, v; float speed; float size = 400; Box() { reset(); y = random(height); } void update() { y -= speed; x -= (xOffset*v); fill(h, s, v, 0.05); rect(x, y, ww, hh); wrap(); } void wrap() { if (y+hh < 0) { reset(); } if (x > width) { x = 0-ww; } if (x < 0-ww) { x = width; } } void reset() { x = random(width+size)-size/2; y = height; ww = random(size); hh = random(size); h = getNewHue(); s = random(1.0); v = random(1.0); speed = random(0.2, 1.0); } } |