Example input
EXAMPLE 1
Processing
animation that incorporates shapes resembling organic forms
pastel hues of pink, purple, and green
800 x 800 pixels
-----------------
EXAMPLE 2
p5.js
abstract landscape
800x600
warm and cool colors
different shapes
Example output
EXAMPLE 1
float xOff = 0.0;
float yOff = 0.0;
float zOff = 0.0;
float t = 0.0;
void setup() {
size(800, 800);
colorMode(HSB, 360, 100, 100, 100);
noStroke();
}
void draw() {
background(255);
for (int x = 0; x < width; x += 20) {
for (int y = 0; y < height; y += 20) {
float noiseValue = noise(xOff + x * 0.01, yOff + y * 0.01, zOff + t);
float angle = map(noiseValue, 0, 1, 0, TWO_PI * 2);
float size = map(noiseValue, 0, 1, 5, 20);
float hue = map(noiseValue, 0, 1, 300, 320);
fill(hue, 50, 90, 10);
pushMatrix();
translate(x, y);
rotate(angle);
ellipse(0, 0, size, size / 2);
popMatrix();
}
}
xOff += 0.01;
yOff += 0.01;
zOff += 0.01;
t += 0.01;
}
------------------------------------
EXAMPLE 2
let shapes = [];
let numOfShapes = 10;
let colorPalette = ["#FF0000", "#FF7F00", "#FFFF00", "#00FF00", "#00FFFF", "#0000FF", "#8B00FF"];
function setup() {
createCanvas(800, 600);
for (let i = 0; i < numOfShapes; i++) {
let shape = {
x: random(width),
y: random(height),
size: random(50, 200),
color: colorPalette[floor(random(colorPalette.length))]
};
shapes.push(shape);
}
}
function draw() {
background("#F5F5F5");
// update the position of the shapes
for (let i = 0; i < shapes.length; i++) {
shapes[i].x += sin(frameCount / 50) * 5;
shapes[i].y += cos(frameCount / 50) * 5;
}
// draw the shapes
for (let i = 0; i < shapes.length; i++) {
let shape = shapes[i];
noStroke();
fill(shape.color);
ellipse(shape.x, shape.y, shape.size, shape.size);
}
// fade out the colors and shapes
fill(255, 20);
rect(0, 0, width, height);
}