let imgOriginal; let imgRoseMask; let bitcoinPrice = 109446; // Initialize with the requested price let lastFetchTime = 0; const FETCH_INTERVAL = 5 * 60 * 1000; // 5 minutes in milliseconds let roseColorHue = 0; let roseColorSaturation = 100; let roseColorBrightness = 100; let roseColorContrast = 100; let sunBrightness = 0; let bloodDrops = []; let bloodSplatter = []; let glitchEffect = false; let glitchState = false; let rainbowColors = []; let rainbowIndex = 0; let orangeColors = []; let orangeIndex = 0; let greenOrangeYellowColors = []; let greenOrangeYellowIndex = 0; let allGreens = []; let allGreensIndex = 0; let auraOffset = 0; let roseLayer; // Declare roseLayer globally function preload() { imgOriginal = loadImage("https://dae.transientusercontent.xyz/uploads/420c95ee-b770-46df-bf4f-8d759a30cfe5"); } function setup() { createCanvas(windowWidth, windowHeight); imageMode(CENTER); window.isMobile = ('ontouchstart' in window) || navigator.maxTouchPoints > 0; let cnv = createCanvas(windowWidth, windowHeight); cnv.elt.style.touchAction = 'none'; cnv.elt.addEventListener('touchmove', e => { e.preventDefault(); }, { passive: false }); textFont('monospace'); // For typewriter font textSize(14); // Made smaller textAlign(RIGHT, BOTTOM); colorMode(HSB, 360, 100, 100, 1); roseLayer = createGraphics(imgOriginal.width, imgOriginal.height); // Initialize roseLayer once in setup roseLayer.imageMode(CENTER); roseLayer.colorMode(HSB, 360, 100, 100, 1); // Pre-define some colors for cycling rainbowColors = [ color(0, 100, 100), // Red color(30, 100, 100), // Orange color(60, 100, 100), // Yellow color(120, 100, 100), // Green color(240, 100, 100), // Blue color(270, 100, 100) // Violet ]; orangeColors = [ color(30, 100, 100), // Bright Orange color(45, 100, 90), // Deeper Orange color(15, 100, 100) // Reddish Orange ]; greenOrangeYellowColors = [ color(150, 100, 50), // Deep Dark Green color(30, 100, 100), // Neon Orange color(60, 100, 100) // Neon Yellow ]; allGreens = []; for (let i = 90; i <= 180; i += 10) { // Range of green hues allGreens.push(color(i, random(70, 100), random(50, 100))); } fetchBitcoinPrice(); updateArtworkBasedOnPrice(); // Call initially to set up based on default price } function draw() { if (millis() - lastFetchTime > FETCH_INTERVAL) { fetchBitcoinPrice(); } // Calculate image dimensions and position for text placement let imgScale = min(width / imgOriginal.width, height / imgOriginal.height, 1); let scaledImgWidth = imgOriginal.width * imgScale; let scaledImgHeight = imgOriginal.height * imgScale; let imgDrawX = width / 2; // Center X of the image let imgDrawY = height / 2; // Center Y of the image // Calculate the bottom-right corner of the drawn image on the canvas let imgRightEdge = imgDrawX + scaledImgWidth / 2; let imgBottomEdge = imgDrawY + scaledImgHeight / 2; // Padding for the text from the image edge let textPadding = 10; if (glitchEffect) { glitchState = !glitchState; if (glitchState) { background(255); } else { // Draw the original image with a green tint tint(120, 100, 50, 1); // Bright green image( imgOriginal, imgDrawX, imgDrawY, scaledImgWidth, scaledImgHeight ); noTint(); } } else { // Draw the original image first, with only sun brightness applied as a filter push(); drawingContext.filter = `brightness(${100 + sunBrightness * 100}%)`; // Apply brightness filter image( imgOriginal, imgDrawX, imgDrawY, scaledImgWidth, scaledImgHeight ); drawingContext.filter = 'none'; // Reset filter immediately after drawing background pop(); // Clear the roseLayer each frame before redrawing on it roseLayer.clear(); roseLayer.push(); // Apply the rose color filters to the rose layer roseLayer.drawingContext.filter = `hue-rotate(${roseColorHue}deg) saturate(${roseColorSaturation}%) brightness(${roseColorBrightness}%) contrast(${roseColorContrast}%)`; // Draw the original image onto this layer, it will be affected by the filters roseLayer.image(imgOriginal, roseLayer.width / 2, roseLayer.height / 2); roseLayer.drawingContext.filter = 'none'; // Reset filter on the layer roseLayer.pop(); // Draw the processed rose layer onto the main canvas, using a blend mode to target the rose petals push(); blendMode(MULTIPLY); // MULTIPLY works well for darkening/tinting lighter areas image( roseLayer, imgDrawX, imgDrawY, scaledImgWidth, scaledImgHeight ); pop(); // Draw blood effects drawBloodEffects(); // Draw aura if applicable if (bitcoinPrice >= 1000000 && bitcoinPrice < 5000000) { drawAura(); } } // Display Bitcoin Price noStroke(); fill(255); // Position text relative to the bottom-right corner of the *image* text(`BTC: $${nf(bitcoinPrice, 0, 2)}`, imgRightEdge - textPadding, imgBottomEdge - textPadding); } async function fetchBitcoinPrice() { const url = 'https://api.coindesk.com/v1/bpi/currentprice/USD.json'; try { const response = await fetch(url); const data = await response.json(); bitcoinPrice = data.bpi.USD.rate_float; console.log('Fetched Bitcoin Price:', bitcoinPrice); lastFetchTime = millis(); updateArtworkBasedOnPrice(); } catch (error) { console.error('Error fetching Bitcoin price:', error); bitcoinPrice = bitcoinPrice || 109446; // Default to 109446 if no price yet updateArtworkBasedOnPrice(); } } function updateArtworkBasedOnPrice() { // Reset effects roseColorHue = 0; roseColorSaturation = 100; roseColorBrightness = 100; roseColorContrast = 100; // p5.js filter contrast is 0-1000% sunBrightness = 0; bloodDrops = []; bloodSplatter = []; glitchEffect = false; auraOffset = 0; // Update every 5 minutes means we need to ensure the color state changes let timeSegment = floor(millis() / FETCH_INTERVAL); if (bitcoinPrice < 50000) { roseColorHue = 0; // Red base roseColorSaturation = 0; // Desaturated roseColorBrightness = 0; // Dark roseColorContrast = 500; // More contrast for black } else if (bitcoinPrice >= 50000 && bitcoinPrice < 60000) { roseColorHue = 0; // Red base roseColorSaturation = 0; // Desaturated roseColorBrightness = 50; // Grey roseColorContrast = 100; createBloodDrops(100); // Large amount } else if (bitcoinPrice >= 60000 && bitcoinPrice < 75000) { roseColorHue = 0; // Dark Red roseColorSaturation = 100; roseColorBrightness = 50; roseColorContrast = 100; createBloodDrops(10); // Small amount } else if (bitcoinPrice >= 75000 && bitcoinPrice < 90000) { roseColorHue = 350; // Bright almost neon red roseColorSaturation = 100; roseColorBrightness = 100; roseColorContrast = 150; createBloodSplatter(200); // Hundreds of speckles } else if (bitcoinPrice >= 90000 && bitcoinPrice < 100000) { roseColorHue = 320; // Bright neon pink roseColorSaturation = 100; roseColorBrightness = 100; roseColorContrast = 150; createBloodSplatter(50); // Dozens of speckles } else if (bitcoinPrice >= 100000 && bitcoinPrice < 110000) { roseColorHue = (timeSegment % 2 === 0) ? 180 : 270; // Aqua blue and purple roseColorSaturation = 100; roseColorBrightness = 100; roseColorContrast = 150; sunBrightness = 0.1; // 10% brighter } else if (bitcoinPrice >= 110000 && bitcoinPrice < 140000) { // Note: This range is duplicated in the prompt, I'll combine the effects // Green colors, then lime green/orange swap, sun brightness if (timeSegment % 2 === 0) { roseColorHue = 120; // Green } else { roseColorHue = (timeSegment % 2 === 0) ? 90 : 30; // Lime green and orange } roseColorSaturation = 100; roseColorBrightness = 100; roseColorContrast = 100; sunBrightness = 0.2; // 20% brighter } else if (bitcoinPrice >= 140000 && bitcoinPrice < 250000) { let currentPalette = greenOrangeYellowColors[greenOrangeYellowIndex % greenOrangeYellowColors.length]; roseColorHue = hue(currentPalette); roseColorSaturation = saturation(currentPalette); roseColorBrightness = brightness(currentPalette); roseColorContrast = 100; greenOrangeYellowIndex++; sunBrightness = 0.35; // 35% brighter } else if (bitcoinPrice >= 250000 && bitcoinPrice < 500000) { let currentGreen = allGreens[allGreensIndex % allGreens.length]; roseColorHue = hue(currentGreen); roseColorSaturation = saturation(currentGreen); roseColorBrightness = brightness(currentGreen); roseColorContrast = 100; allGreensIndex++; sunBrightness = 0.55; // 55% brighter } else if (bitcoinPrice >= 500000 && bitcoinPrice < 1000000) { let currentRainbow = rainbowColors[rainbowIndex % rainbowColors.length]; roseColorHue = hue(currentRainbow); roseColorSaturation = saturation(currentRainbow); roseColorBrightness = brightness(currentRainbow); roseColorContrast = 100; rainbowIndex++; sunBrightness = 0.67; // 67% brighter } else if (bitcoinPrice >= 1000000 && bitcoinPrice < 5000000) { let currentOrange = orangeColors[orangeIndex % orangeColors.length]; roseColorHue = hue(currentOrange); roseColorSaturation = saturation(currentOrange); roseColorBrightness = brightness(currentOrange); roseColorContrast = 200; orangeIndex++; sunBrightness = 0.75; // 75% brighter } else if (bitcoinPrice >= 5000000 && bitcoinPrice < 10000000) { glitchEffect = true; } else { // Default or fallback if price is outside defined ranges roseColorHue = 0; roseColorSaturation = 100; roseColorBrightness = 100; roseColorContrast = 100; } } function createBloodDrops(count) { bloodDrops = []; for (let i = 0; i < count; i++) { bloodDrops.push({ x: random(width), y: random(-height / 2, 0), // Start above screen speed: random(2, 5), size: random(5, 15) }); } } function createBloodSplatter(count) { bloodSplatter = []; for (let i = 0; i < count; i++) { bloodSplatter.push({ x: random(width), y: random(0, height / 2), // Top half of image size: random(2, 8), opacity: random(150, 255) // Varying opacity }); } } function drawBloodEffects() { noStroke(); fill(255, 0, 0, 200); // Red color for blood for (let i = bloodDrops.length - 1; i >= 0; i--) { let drop = bloodDrops[i]; ellipse(drop.x, drop.y, drop.size, drop.size * 2); drop.y += drop.speed; if (drop.y > height) { bloodDrops.splice(i, 1); // Remove if off screen } } for (let splatter of bloodSplatter) { fill(255, 0, 0, splatter.opacity); ellipse(splatter.x, splatter.y, splatter.size); } } function drawAura() { push(); translate(width / 2, height / 2); // Center on the rose let scaleFactor = min(width / imgOriginal.width, height / imgOriginal.height, 1); let roseWidth = imgOriginal.width * scaleFactor; let roseHeight = imgOriginal.height * scaleFactor; // Adjust aura position to be around the rose petals. This is an approximation. let auraX = 0; // Relative to center let auraY = -roseHeight * 0.15; // Slightly above center for petals let auraBaseSize = roseWidth * 0.4; let auraFluctuation = sin(frameCount * 0.05) * 10; for (let i = 0; i < 5; i++) { let alpha = map(i, 0, 4, 0, 100); let currentSize = auraBaseSize + i * 15 + auraFluctuation; fill(255, 255, 0, alpha); // Yellowish sparkling color ellipse(auraX, auraY, currentSize, currentSize * 1.2); // Ellipse to fit rose shape } pop(); } function windowResized() { resizeCanvas(windowWidth, windowHeight); }

Roses

Bitcoin Rose

Bitcoin Rose