xxxxxxxxxx674
let cellSize = 100;let patterns = [];let colors;let currentCol = 0;let currentRow = 0;let modes = ["regular", "colorful", "randomSize", "alternating"];let currentMode = 0;let song; let fft; let playing = false; let spectrum; function preload() { // Load the music file song = loadSound("kanayo.mp3", loaded); }function loaded() { console.log("Sound loaded successfully"); playing = true; // Set playing to true when the sound is loaded song.loop(); // Play the sound after loading}function setup() { createCanvas(900, 900, SVG); cols = width / cellSize; rows = height / cellSize; initializePatterns(); // Initialize your patterns array initializeColors(); // Initialize default colors (assuming you have this function) fft = new p5.FFT(); // Initialize the FFT object fft.setInput(song); // Set the input of FFT to analyze the song song.loop(); // Start looping the song frameRate(10); // Set a slower frame rate for smoother visualization}function draw() { // Set up the background for the current mode if needed if (frameCount === 1 || (currentCol === 0 && currentRow === 0)) { setupBackground(); // Set up the background for the current mode } // Analyze the frequency spectrum spectrum = fft.analyze(); // Average the bass frequencies for a stronger response let bass = (spectrum[0] + spectrum[1] + spectrum[2]) / 3; // Log bass to check its values console.log(bass); // Map bass amplitude for size variation and oscillation let sizeVariation = map(bass, 0, 255, 0.8, 1.2); let amplitude = map(bass, 0, 255, 0, 1); // Normalize to [0, 1] // Use sine wave for oscillation based on time let time = millis() * 0.005; // Control the speed of oscillation let oscillation = sin(time * TWO_PI) * amplitude * 50; // Scale the oscillation // Calculate position in the grid let x = currentCol * cellSize; let y = currentRow * cellSize; // Apply the logic depending on currentMode if (currentMode === 0) { // Regular mode if (currentRow % 3 === 0) { drawZigZagPattern( x + cellSize / 2, y + cellSize / 2 + oscillation, cellSize ); // Draw zigzag on 3rd row with oscillation } else { let patternIndex = (currentCol + currentRow * cols) % patterns.length; drawPattern(x, y + oscillation, patternIndex); // Default pattern with oscillation } } else if (currentMode === 1) { // Colorful mode - only use colors from colorfulPalette let patternIndex = (currentCol + currentRow * cols) % patterns.length; drawColorfulPattern(x, y + oscillation, patternIndex); // Apply oscillation } else if (currentMode === 2) { // Random Size mode let patternIndex = (currentCol + currentRow * cols) % patterns.length; let randomSize = random(0.5, 1.5) * cellSize; // Random size drawPattern(x, y + oscillation, patternIndex, randomSize); // Apply oscillation } else if (currentMode === 3) { // Alternating Patterns drawAlternatingPatterns(x, y + oscillation, currentCol); // Apply oscillation } // Move to the next cell currentCol++; if (currentCol >= cols) { currentCol = 0; currentRow++; } if (currentRow >= rows) { noLoop(); // Stop the loop when all rows are drawn }}function setupBackground() { let colorModeChoice = int(random(3)); // Randomize the choice for background color if (currentMode === 0 || currentMode === 1 || currentMode === 2) { // Regular, Colorful, and Random Size Modes if (colorModeChoice === 0) { background(255); // White background stroke(0); // Black stroke } else if (colorModeChoice === 1) { background(0); // Black background stroke(255); // White stroke } else { background(50, 25, 0); // Dark brown background stroke(255, 165, 0); // Orange lines } } else if (currentMode === 3) { // Alternating Patterns Mode if (colorModeChoice === 0) { background(255); // White background stroke(0); // Black stroke } else if (colorModeChoice === 1) { background(0); // Black background stroke(255); // White stroke } }}// Regular draw pattern functionfunction drawPattern(x, y, patternIndex, size = cellSize) { if (patterns[patternIndex]) { push(); translate(x + size / 2, y + size / 2); // Center the pattern patterns[patternIndex](0, 0, size); // Draw the pattern using the provided size pop(); }}// Draw patterns in colorful mode using only colors from colorfulPalettefunction drawColorfulPattern(x, y, patternIndex) { let chosenColor = random(colorfulPalette); // Choose a color from colorfulPalette stroke(chosenColor); // Set stroke color fill(chosenColor); // Set fill color for the colorful patterns drawPattern(x, y, patternIndex); // Call the default drawPattern to handle the drawing}function drawAlternatingPatterns(x, y, col) { let patternIndex = col % patterns.length; // Alternate patterns based on column drawPattern(x, y, patternIndex);}function initializePatterns() { patterns = [ drawThickVerticalLines, drawNestedTriangles, drawSymbols, drawZebraPrint, drawDiamondsInDiamond, drawCurves, drawThickHorizontalLines, drawSquareSpiral, drawSpiralTriangles, thinLines, verticalLines, drawXWithDots, ];}let colorfulPalette = [ "#fcf3cf", // Light cream "#DAF7A6", // Light green "#FFC300", // Bright yellow "#FF5733", // Bright red "#C70039", // Dark red "#900C3F", // Dark magenta];function initializeColors() { colors = [ color(255, 132, 0), // Vibrant Orange color(230, 115, 0), // Darker Orange color(191, 87, 0), // Earthy Brownish Orange color(140, 70, 20), // Dark Brown color(87, 53, 19), // Rich Brown color(255, 183, 77), // Light Golden Orange ];}function drawSpiralTriangles(x, y, size) { strokeWeight(2); // Check the mode to set the stroke accordingly if (currentMode === 0) { // Regular mode: Use random colors from the regular palette stroke(random(colors)); } else if (currentMode === 1) { // Colorful mode: Use colors from the colorfulPalette stroke(random(colorfulPalette)); } else if (currentMode === 2) { // Random Size Mode: Use random colors from the regular palette stroke(random(colors)); } noFill(); // Adjust the initial size to ensure the triangle fits inside the cell let adjustedSize = size * 0.9; // Reduce size slightly for padding // Draw the recursive triangles centered in the cell recursiveTriangle( x - adjustedSize / 2, y - adjustedSize / 2, adjustedSize, 5 );}function recursiveTriangle(x, y, size, depth) { if (depth == 0) return; // Draw the outer triangle let half = size / 2; triangle(x, y, x + size, y, x + half, y + size); // Recursively draw smaller triangles inside recursiveTriangle(x, y, size / 2, depth - 1); // Top-left recursiveTriangle(x + half / 2, y + size / 2, size / 2, depth - 1); // Center recursiveTriangle(x + half, y, size / 2, depth - 1); // Top-right}function drawZigZagPattern(x, y, size) { if (currentMode === 0) { // Regular mode: Use random colors from the regular palette stroke(random(colors)); } else if (currentMode === 1) { // Colorful mode: Use colors from the colorfulPalette stroke(random(colorfulPalette)); } else if (currentMode === 2) { // Random Size Mode: Use random colors from the regular palette stroke(random(colors)); } noFill(); let amplitude = size / 4; let frequency = size / 5; // Draw zigzag shape and add dots beginShape(); for (let i = 0; i <= size; i += frequency) { let yOffset = (i / frequency) % 2 == 0 ? -amplitude : amplitude; // Create zigzag pattern let currentX = x - size / 2 + i; // Current X position let currentY = y + yOffset; // Current Y position vertex(currentX, currentY); // Calculate the vertices of the triangle if (i > 0) { // The triangle's vertices are: // Previous vertex let previousY = y + ((i / frequency) % 2 == 0 ? amplitude : -amplitude); let triangleVertices = [ createVector(currentX, currentY), // Current peak createVector(currentX - frequency / 2, previousY), // Left point createVector(currentX + frequency / 2, previousY), // Right point ]; // Calculate the centroid of the triangle let centroidX = (triangleVertices[0].x + triangleVertices[1].x + triangleVertices[2].x) / 3; let centroidY = (triangleVertices[0].y + triangleVertices[1].y + triangleVertices[2].y) / 3; // Draw a dot at the centroid strokeWeight(5); // Set stroke weight for dots point(centroidX, centroidY); // Draw the dot } } endShape();}function drawXWithDots(x, y, size) { noFill(); if (currentMode === 0) { // Regular mode: Use random colors from the regular palette stroke(random(colors)); } else if (currentMode === 1) { // Colorful mode: Use colors from the colorfulPalette stroke(random(colorfulPalette)); } else if (currentMode === 2) { // Random Size Mode: Use random colors from the regular palette stroke(random(colors)); } // Draw the two diagonal lines to form the "X" line(x - size / 2, y - size / 2, x + size / 2, y + size / 2); // Line from top-left to bottom-right line(x - size / 2, y + size / 2, x + size / 2, y - size / 2); // Line from bottom-left to top-right // Set fill for the dots if (currentMode === 0) { // Regular mode: Use random colors from the regular palette stroke(random(colors)); } else if (currentMode === 1) { // Colorful mode: Use colors from the colorfulPalette stroke(random(colorfulPalette)); } else if (currentMode === 2) { // Random Size Mode: Use random colors from the regular palette stroke(random(colors)); } let dotSize = 10; // Size of the dots // Calculate positions for the dots in each triangle formed by the "X" // Top-left triangle ellipse(x - size / 4, y - size / 4, dotSize, dotSize); // Top-right triangle ellipse(x + size / 4, y - size / 4, dotSize, dotSize); // Bottom-left triangle ellipse(x - size / 4, y + size / 4, dotSize, dotSize); // Bottom-right triangle ellipse(x + size / 4, y + size / 4, dotSize, dotSize);}//thin linesfunction verticalLines(x, y, size) { if (currentMode === 0) { // Regular mode: Use random colors from the regular palette stroke(random(colors)); } else if (currentMode === 1) { // Colorful mode: Use colors from the colorfulPalette stroke(random(colorfulPalette)); } else if (currentMode === 2) { // Random Size Mode: Use random colors from the regular palette stroke(random(colors)); } strokeWeight(2); let gap = size / 5; for (let i = 0; i < 6; i++) { line(-size / 2 + gap * i, -size / 2, -size / 2 + gap * i, size / 2); }}// Thick Vertical Linesfunction drawThickVerticalLines(x, y, size) { if (currentMode === 0) { // Regular mode: Use random colors from the regular palette stroke(random(colors)); } else if (currentMode === 1) { // Colorful mode: Use colors from the colorfulPalette stroke(random(colorfulPalette)); } else if (currentMode === 2) { // Random Size Mode: Use random colors from the regular palette stroke(random(colors)); } strokeWeight(10); // Thick line weight let gap = size / 5; // 5 lines with gaps for (let i = 0; i < 6; i++) { line(-size / 2 + gap * i, -size / 2, -size / 2 + gap * i, size / 2); }}// Thick Horizontal Linesfunction drawThickHorizontalLines(x, y, size) { if (currentMode === 0) { // Regular mode: Use random colors from the regular palette stroke(random(colors)); } else if (currentMode === 1) { // Colorful mode: Use colors from the colorfulPalette stroke(random(colorfulPalette)); } else if (currentMode === 2) { // Random Size Mode: Use random colors from the regular palette stroke(random(colors)); } strokeWeight(10); // Thick line weight let gap = size / 6; // 5 lines with gaps for (let i = 0; i < 6; i++) { line( -size / 2, -size / 2 + gap * (i + 1), size / 2, -size / 2 + gap * (i + 1) ); }}// Thin Horizontal Linesfunction thinLines(x, y, size) { if (currentMode === 0) { // Regular mode: Use random colors from the regular palette stroke(random(colors)); } else if (currentMode === 1) { // Colorful mode: Use colors from the colorfulPalette stroke(random(colorfulPalette)); } else if (currentMode === 2) { // Random Size Mode: Use random colors from the regular palette stroke(random(colors)); } strokeWeight(2); // Thick line weight let gap = size / 6; // 5 lines with gaps for (let i = 0; i < 6; i++) { line( -size / 2, -size / 2 + gap * (i + 1), size / 2, -size / 2 + gap * (i + 1) ); }}// Nested Trianglesfunction drawNestedTriangles(x, y, size) { let triangleSize = size; noFill(); if (currentMode === 0) { // Regular mode: Use random colors from the regular palette stroke(random(colors)); } else if (currentMode === 1) { // Colorful mode: Use colors from the colorfulPalette stroke(random(colorfulPalette)); } else if (currentMode === 2) { // Random Size Mode: Use random colors from the regular palette stroke(random(colors)); } strokeWeight(2); for (let i = 0; i < 4; i++) { triangle( -triangleSize / 2, triangleSize / 2, triangleSize / 2, triangleSize / 2, 0, -triangleSize / 2 ); triangleSize *= 0.7; }}// West African Symbols/Geometric Shapesfunction drawSymbols(x, y, size) { noFill(); let symbolSize = size * 0.6; strokeWeight(2); if (currentMode === 0) { // Regular mode: Use random colors from the regular palette stroke(random(colors)); } else if (currentMode === 1) { // Colorful mode: Use colors from the colorfulPalette stroke(random(colorfulPalette)); } else if (currentMode === 2) { // Random Size Mode: Use random colors from the regular palette stroke(random(colors)); } // Circle with horizontal/vertical line cross ellipse(0, 0, symbolSize, symbolSize); line(-symbolSize / 2, 0, symbolSize / 2, 0); line(0, -symbolSize / 2, 0, symbolSize / 2); // Small triangles within for (let i = 0; i < 3; i++) { let triSize = symbolSize * (0.3 - i * 0.1); triangle( 0, -triSize / 2, triSize / 2, triSize / 2, -triSize / 2, triSize / 2 ); }}// Zebra Printfunction drawZebraPrint(x, y, size) { if (currentMode === 0) { // Regular mode: Use random colors from the regular palette stroke(random(colors)); } else if (currentMode === 1) { // Colorful mode: Use colors from the colorfulPalette stroke(random(colorfulPalette)); } else if (currentMode === 2) { // Random Size Mode: Use random colors from the regular palette stroke(random(colors)); } strokeWeight(2); let stripes = 10; for (let i = 0; i < stripes; i++) { let step = i * (size / stripes); line(-size / 2 + step, -size / 2, size / 2 - step, size / 2); line(size / 2 - step, -size / 2, -size / 2 + step, size / 2); }}function drawSquareSpiral(x, y, size) { if (currentMode === 0) { // Regular mode: Use random colors from the regular palette stroke(random(colors)); } else if (currentMode === 1) { // Colorful mode: Use colors from the colorfulPalette stroke(random(colorfulPalette)); } else if (currentMode === 2) { // Random Size Mode: Use random colors from the regular palette stroke(random(colors)); } strokeWeight(4); // Set the stroke weight for the spiral noFill(); // No fill for the square spiral let step = size / 10; // Define the step size for each movement inward let currentSize = size; // Start with the full square size let startX = -currentSize / 2; // Initial X position (top-left corner) let startY = -currentSize / 2; // Initial Y position (top-left corner) beginShape(); // Start drawing the shape // Draw the spiral by progressively making the square smaller and moving inward while (currentSize > step) { // Top edge vertex(startX, startY); vertex(startX + currentSize, startY); // Right edge vertex(startX + currentSize, startY + currentSize); // Bottom edge vertex(startX, startY + currentSize); // Move inward for the next iteration currentSize -= step * 2; startX += step; startY += step; } endShape();}// Diamonds within Diamondsfunction drawDiamondsInDiamond(x, y, size) { let dSize = size; strokeWeight(2); if (currentMode === 0) { // Regular mode: Use random colors from the regular palette stroke(random(colors)); } else if (currentMode === 1) { // Colorful mode: Use colors from the colorfulPalette stroke(random(colorfulPalette)); } else if (currentMode === 2) { // Random Size Mode: Use random colors from the regular palette stroke(random(colors)); } noFill(); for (let i = 0; i < 5; i++) { beginShape(); vertex(0, -dSize / 2); vertex(dSize / 2, 0); vertex(0, dSize / 2); vertex(-dSize / 2, 0); endShape(CLOSE); dSize *= 0.7; }}// Bezier Curvesfunction drawCurves(x, y, size) { noFill(); if (currentMode === 0) { // Regular mode: Use random colors from the regular palette stroke(random(colors)); } else if (currentMode === 1) { // Colorful mode: Use colors from the colorfulPalette stroke(random(colorfulPalette)); } else if (currentMode === 2) { // Random Size Mode: Use random colors from the regular palette stroke(random(colors)); } strokeWeight(3); for (let i = 0; i < 6; i++) { bezier( -size / 2, -size / 2, random(-size, size), random(-size, size), random(-size, size), random(-size, size), size / 2, size / 2 ); }}// Reset and redraw the sketch with new randomized patterns when mouse is pressedfunction mousePressed() { // Reset the column and row counters currentCol = 0; currentRow = 0; // Shuffle the pattern array and pick new random colors patterns = shuffle(patterns); initializeColors(); // Clear the canvas and set background for the current mode clear(); setupBackground(); // Set background before starting the draw loop loop(); // Restart the draw loop}function keyPressed() { if (key === "p" || key === "P") { if (playing) { song.stop(); playing = false; } else { song.play(); playing = true; } } if (key === "s") { save("midterm.svg"); } // Cycle through modes when the RIGHT arrow key is pressed if (keyCode === RIGHT_ARROW) { currentMode = (currentMode + 1) % modes.length; // Cycle through modes currentCol = 0; // Reset columns to start drawing again currentRow = 0; redraw(); // Redraw the canvas with the new mode }}