Day 15 - Art 1
Design a rug
Floral Rug Medallion
This generative art piece creates a detailed, symmetrical rug design with a central medallion surrounded by intricate floral and geometric patterns. The design incorporates various elements such as repeating floral motifs, decorative corner patterns, layered medallions, and a border with X shapes and golden dots. The color palette features deep reds, blues, browns, and golds, giving the artwork a rich, elegant feel reminiscent of a traditional oriental rug. The composition is carefully balanced, with a focus on symmetry and radial design.
let canvas;
function setup() {
// Create the canvas and attach it to a DOM element with the ID 'canvas-container'
canvas = createCanvas(400, 400);
canvas.parent('canvas-container');
// Set angle mode to degrees for easier rotation
angleMode(DEGREES);
// Disable continuous drawing (we only need to draw once)
noLoop();
}
function draw() {
// Set a neutral beige background color for the rug design
background(220, 200, 180);
// Define the main colors used in the rug design
let mainBlue = color(50, 100, 150); // Deep blue
let lightBeige = color(240, 230, 200); // Light beige
let darkBrown = color(80, 50, 20); // Dark brown
let deepRed = color(180, 50, 50); // Deep red
let gold = color(200, 150, 50); // Gold
let white = color(255); // White
// Define the center of the canvas for easier positioning
let centerX = width / 2;
let centerY = height / 2;
// Scaling factor for the rug design (adjusts size of elements)
let scaleFactor = 1.5;
// Function to draw a repeating floral element at given position with specified size and rotation
function drawFloral(x, y, size, rotation) {
push(); // Start a new drawing state
translate(x, y); // Move to the specified position
rotate(rotation); // Rotate the floral element
scale(size); // Scale the floral element
// Draw floral petals
fill(deepRed);
for (let i = 0; i < 6; i++) {
ellipse(0, 10, 15, 30); // Petal shape
rotate(60); // Rotate to create the next petal
}
// Draw the center of the floral element
fill(gold);
ellipse(0, 0, 15, 15); // Center circle
pop(); // Restore the previous drawing state
}
// Function to draw decorative corner patterns at a given position with size scaling
function drawCornerPattern(x, y, size) {
push(); // Start a new drawing state
translate(x, y); // Move to the specified position
scale(size); // Scale the corner pattern
// Draw the main blue triangle shapes
fill(mainBlue);
noStroke();
for (let i = 0; i < 4; i++) {
triangle(0, 0, -20, -40, 20, -40); // Triangle shape
rotate(90); // Rotate to create a square pattern
}
// Draw the light beige circular element in the center
fill(lightBeige);
ellipse(0, 0, 30, 30); // Center circle
pop(); // Restore the previous drawing state
}
// Function to draw the central medallion in the middle of the canvas
function drawCentralMedallion() {
push(); // Start a new drawing state
translate(centerX, centerY); // Move to the center of the canvas
scale(0.8); // Scale the medallion to fit within the canvas
// Draw the base medallion shape (blue ellipse)
fill(mainBlue);
ellipse(0, 0, 200, 250); // Ellipse shape for the medallion
// Draw detailed design with lighter beige and dark brown layers
for (let i = 0; i < 16; i++) {
push();
rotate(i * 360 / 16); // Rotate to create a radial pattern
fill(lightBeige);
ellipse(80, 50, 20); // Lighter beige ellipse
fill(darkBrown);
ellipse(110, 0, 10, 10); // Dark brown circle
pop();
}
// Draw central layered circles for depth
fill(lightBeige);
ellipse(0, 0, 60, 60); // Light beige circle
fill(darkBrown);
ellipse(0, 0, 25, 25); // Dark brown circle
fill(lightBeige);
ellipse(0, 0, 10, 10); // Smallest light beige circle
// Add a second layer with intricate petal-like shapes
fill(darkBrown); // Dark brown color for petals
for (let i = 0; i < 8; i++) {
rotate(45); // Rotate for petal-like shapes
ellipse(70, 0, 40, 80); // Petal shape
}
// Add a small golden circle at the center of the medallion
fill(gold);
ellipse(0, 0, 15, 15); // Gold circle at the center
pop(); // Restore the previous drawing state
}
// Function to draw the borders around the rug
function drawBorder(offset, borderColor, weight) {
push(); // Start a new drawing state
translate(centerX, centerY); // Move to the center of the canvas
scale(scaleFactor); // Scale the border to fit the design
strokeWeight(weight); // Set the stroke weight for the border
stroke(borderColor); // Set the border color
noFill(); // Do not fill the border
rectMode(CENTER); // Draw the rectangle from the center
rect(0, 0, 260 - offset, 260 - offset); // Draw the border rectangle
pop(); // Restore the previous drawing state
}
// Draw three borders with different colors and thicknesses
drawBorder(0, deepRed, 6); // Outer border in deep red
drawBorder(15, mainBlue, 4); // Mid border in main blue
drawBorder(30, darkBrown, 3); // Inner border in dark brown
// Draw corner patterns in all four corners of the canvas
drawCornerPattern(60, 60, 0.6); // Top-left corner
drawCornerPattern(width - 60, 60, 0.6); // Top-right corner
drawCornerPattern(60, height - 60, 0.6); // Bottom-left corner
drawCornerPattern(width - 60, height - 60, 0.6); // Bottom-right corner
// Add a grid of small floral patterns for the background, avoiding the central medallion area
for (let x = 40; x < width; x += 80) {
for (let y = 40; y < height; y += 80) {
// Avoid placing flowers too close to the center
if (dist(x, y, centerX, centerY) > 100) {
drawFloral(x, y, 0.3, random(360)); // Draw floral elements at random rotations
}
}
}
// Function to draw symmetrical X shapes at a given position with size scaling
function drawXShapes(x, y, size) {
push(); // Start a new drawing state
translate(x, y); // Move to the specified position
scale(size); // Scale the X shape
stroke(darkBrown); // Set stroke color to dark brown
strokeWeight(2); // Set stroke weight for the X shape
noFill(); // Do not fill the X shape
// Draw the two diagonal lines for the X shape
line(-10, -10, 10, 10); // First diagonal line
line(10, -10, -10, 10); // Second diagonal line
pop(); // Restore the previous drawing state
}
// Draw X shapes in the middle area, avoiding the central area and outer border
for (let x = 20; x < width; x += 60) {
for (let y = 20; y < height; y += 60) {
// Ensure X shapes are placed in the middle area, avoiding the central medallion
if (dist(x, y, centerX, centerY) > 120 && dist(x, y, centerX, centerY) < 140) {
drawXShapes(x, y, 0.6); // Draw X shapes in the middle area
}
}
}
// Add small golden dots around the brown outer border
let brownBorderRadius = 130; // Radius for the brown border
let brownBorderWidth = 30; // Width of the brown border area
let dotCount = 12; // Number of dots to draw
// Calculate the angular spacing between dots
let angleStep = 360 / dotCount;
for (let i = 0; i < dotCount; i++) {
// Calculate the angle for each dot
let angle = i * angleStep;
// Calculate the position of the dot using polar coordinates
let x = centerX + brownBorderRadius * cos(angle);
let y = centerY + brownBorderRadius * sin(angle);
// Ensure the dot is within the brown border width range
let distance = dist(x, y, centerX, centerY);
if (distance >= brownBorderRadius - brownBorderWidth && distance <= brownBorderRadius + brownBorderWidth) {
fill(gold); // Set dot color to gold
noStroke(); // No stroke for the dots
ellipse(x, y, 5, 5); // Draw the dot
}
}
// Draw the central medallion in the middle of the canvas
drawCentralMedallion();
// Draw the floral border around the central medallion
function drawFloralBorder() {
let floralRadius = 115; // Distance from center to floral border
let floralSpacing = 30; // Spacing between floral elements
// Draw flowers around the medallion in a circular pattern
for (let i = 0; i < 360; i += floralSpacing) {
let x = centerX + floralRadius * cos(i); // Calculate x position
let y = centerY + floralRadius * sin(i); // Calculate y position
drawFloral(x, y, 0.6, i); // Draw floral element at calculated position
}
}
// Call the function to draw the floral border
drawFloralBorder();
}