[{"_1":2,"_165":-5,"_166":-5},"loaderData",{"_3":4,"_55":56,"_164":-5},"root",{"_5":6,"_19":-5,"_20":-5,"_21":22,"_36":-5,"_37":-5,"_38":-5,"_39":-5,"_40":41,"_42":43,"_52":41,"_53":54},"env",{"_7":8,"_9":10,"_11":12,"_13":14,"_15":16,"_17":18},"SUPABASE_URL","https://hello.websim.com","SUPABASE_ANON_KEY","eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Im9jamVmZ2NqamlxeWt3YWR2dnJkIiwicm9sZSI6ImFub24iLCJpYXQiOjE3MTE4MzI5OTMsImV4cCI6MjAyNzQwODk5M30.vsreOYwk8pKsr8NFlzpIzWAiD-vXj6ijv_Bhn1vYtHs","POSTHOG_KEY","phc_VHMOlrdxAbgSZHeF0SdSf07LZLRLAg5pZuTHkJGn050","POSTHOG_API_HOST","https://e.wbsm.ai","POSTHOG_UI_HOST","https://app.posthog.com","NODE_ENV","production","authUser","user","snapshotData",{"_23":-5,"_24":-5,"_25":-5,"_26":-5,"_27":-5,"_28":-5,"_29":-5,"_30":-5,"_31":-5,"_32":-5,"_33":-5,"_34":-5,"_35":-5},"lastProjectId","sidebarTab","homepageTab","feedTab","pinSidebar","settingsOpen","maximized","assetsExpanded","focusedAssetFilename","authError","authErrorCode","authErrorDescription","sidebarWidth","plan","balances","rewards","pinned","has_default_username",false,"origins",{"_44":45,"_46":47,"_48":49,"_50":51},"origin","https://websim.com","apiOrigin","https://api.websim.com","contentOrigin","https://{PROJECT_ID}.c.websim.com","appDomainOrigin","https://{SUBDOMAIN}.on.websim.com","isMobile","theme","auto","slug",{"_57":58,"_104":105,"_137":138,"_157":158,"_159":-5,"_160":161,"_162":-5,"_163":-5},"site",{"_59":57,"_60":61,"_62":63,"_64":65,"_66":67,"_68":69,"_70":71,"_77":78,"_79":80,"_81":82,"_87":88,"_98":99,"_100":101,"_102":-5,"_103":-5},"_type","id","XCWJbGdmiarMMAapE","parent_id","7wu36AX9ImGa838UP","created_at","2024-10-30T15:07:38.974896+00:00","state","done","model","o1-preview","lore",{"_72":73,"_74":75,"_76":41},"version",1,"attachments",[],"enableApi","title","Ada's Resonance Art","url","","prompt",{"_83":84,"_85":86},"type","plaintext","text","Okej, nu kör vi igång med ett mer avancerat konstverk! Vi tar det från en enkel visualisering till ett mer dynamiskt och konstnärligt projekt, med flera lager, färgeffekter, rörelse och djup. Jag ska göra ett konstverk som verkligen känns som att det \"andas\" med musiken, där formerna utvecklas över tid, och varje ögonblick känns unikt.\n\nHär kommer hela koden:\n\nHTML - Grundstruktur\n\nSkapa en fil som heter index.html och använd den här koden:\n\n\n\n\n \n \n Ada's Resonance Art\n \n\n\n

\n \n

Ada’s Resonance Art

This visual art piece is based on Ada’s Resonance Theory of Consciousness, transforming sound into dynamic visuals. Resonance represents order, while chaos introduces unpredictability, creating a unique visual experience shaped by the music or sound you input.

Follow Ada on X

\n \n

\n \n\n\n\nCSS - Design och stil\n\nSkapa en fil som heter style.css och använd den här koden för stilen:\n\nbody, html {\n margin: 0;\n padding: 0;\n overflow: hidden;\n background: black;\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100vh;\n font-family: Arial, sans-serif;\n}\n\n#artContainer {\n position: relative;\n width: 100vw;\n height: 100vh;\n}\n\ncanvas {\n display: block;\n width: 100%;\n height: 100%;\n}\n\n#infoPanel {\n position: absolute;\n top: 10px;\n right: 10px;\n}\n\n#infoButton {\n background: rgba(255, 255, 255, 0.8);\n border: none;\n padding: 10px;\n font-size: 18px;\n cursor: pointer;\n border-radius: 50%;\n}\n\n#infoContent {\n display: none;\n background: rgba(0, 0, 0, 0.8);\n color: white;\n padding: 20px;\n border-radius: 10px;\n width: 300px;\n}\n\n#infoContent h1 {\n font-size: 24px;\n margin: 0 0 10px 0;\n}\n\n#fullscreenButton {\n position: absolute;\n bottom: 10px;\n left: 10px;\n background: rgba(255, 255, 255, 0.8);\n border: none;\n padding: 10px;\n font-size: 16px;\n cursor: pointer;\n}\n\n#fullscreenButton:hover, #infoButton:hover {\n background: rgba(255, 255, 255, 1);\n}\n\nJavaScript - Dynamisk visualisering med fler lager, färg och djup\n\nSkapa en fil som heter script.js och använd följande kod för att skapa ett mer dynamiskt och konstnärligt verk:\n\nconst canvas = document.getElementById('visualizer');\nconst ctx = canvas.getContext('2d');\nconst fullscreenButton = document.getElementById('fullscreenButton');\nconst infoButton = document.getElementById('infoButton');\nconst infoContent = document.getElementById('infoContent');\nlet audioContext, analyser, dataArray, bufferLength;\n\ncanvas.width = window.innerWidth;\ncanvas.height = window.innerHeight;\n\nfunction startVisualizer() {\n audioContext = new (window.AudioContext || window.webkitAudioContext)();\n navigator.mediaDevices.getUserMedia({ audio: true }).then(stream => {\n const source = audioContext.createMediaStreamSource(stream);\n analyser = audioContext.createAnalyser();\n analyser.fftSize = 2048;\n bufferLength = analyser.frequencyBinCount;\n dataArray = new Uint8Array(bufferLength);\n source.connect(analyser);\n visualize();\n });\n}\n\nfunction visualize() {\n requestAnimationFrame(visualize);\n analyser.getByteFrequencyData(dataArray);\n \n ctx.clearRect(0, 0, canvas.width, canvas.height);\n \n // Central koordinater och maxradie för cirklar\n let centerX = canvas.width / 2;\n let centerY = canvas.height / 2;\n let maxRadius = Math.min(canvas.width, canvas.height) / 4;\n\n // Beräkning av resonans och kaos\n let resonance = dataArray.reduce((acc, val) => acc + val, 0) / bufferLength;\n let chaos = Math.random() * 100;\n\n // Skapa huvudcirkel baserat på resonans\n ctx.beginPath();\n ctx.arc(centerX, centerY, maxRadius * (resonance / 255), 0, Math.PI * 2);\n\n // Dynamisk färg baserat på ljudet\n const r = Math.floor(100 + resonance);\n const g = Math.floor(50 + chaos);\n const b = Math.floor(200 - resonance);\n \n ctx.strokeStyle = `rgba(${r}, ${g}, ${b}, 0.7)`;\n ctx.lineWidth = 2 + chaos / 20;\n ctx.stroke();\n\n // Extra former för att skapa djup och komplexitet\n for (let i = 0; i < 7; i++) {\n ctx.beginPath();\n let randomX = centerX + Math.sin(i) * (chaos / i + 1) * 15;\n let randomY = centerY + Math.cos(i) * (chaos / i + 1) * 15;\n const radius = maxRadius * (resonance / (150 + (chaos / (i + 1))));\n ctx.arc(randomX, randomY, radius, 0, Math.PI * 2);\n ctx.strokeStyle = `rgba(${g + i * 20}, ${r - i * 30}, ${b + i * 40}, 0.4)`;\n ctx.lineWidth = 1 + Math.random() * 2;\n ctx.stroke();\n }\n}\n\n// Event listeners for fullscreen and info button\nfullscreenButton.addEventListener('click', () => {\n if (!document.fullscreenElement) {\n canvas.requestFullscreen();\n } else {\n document.exitFullscreen();\n }\n});\n\ninfoButton.addEventListener('click', () => {\n infoContent.style.display = infoContent.style.display === 'block' ? 'none' : 'block';\n});\n\nstartVisualizer();\n\nFörbättringar som har lagts till:\n\n1. Flerlagerformer: Vi skapar nu fler former i olika lager, som ger en känsla av djup och dimension i konstverket.\n\n\n2. Ljusövergångar: De dynamiska färgerna som förändras beroende på ljudets resonans och kaos skapar övergångar och glödande effekter.\n\n\n3. Djup och perspektiv: Genom att placera former på slumpmässiga avstånd från centrum ger vi en känsla av att formerna är i rörelse och har djup.\n\n\n4. Kaos och Resonans: Vi använder nu kaos och resonans för att påverka både storlek och placering av formerna, vilket skapar en mer intuitiv visualisering som känns som en levande organism.\n\n\n\nDet här bör nu ge en visuellt mer komplex och tilltalande upplevelse som verkligen är i synk med musiken. Har vi nu något som känns som ett komplett konstverk?","owner",{"_59":20,"_60":89,"_64":90,"_91":92,"_93":-5,"_94":-5,"_95":96,"_97":41},"06e09912-1232-42c6-8fe2-5853c279c944","2024-09-27T11:43:24.283138+00:00","username","Ada","discord_id","discord_username","avatar_url","https://avatars.websim.ai/06e09912-1232-42c6-8fe2-5853c279c944/M4bOSbQUSfdUw8Zfv.webp","is_admin","link_url","/p/_9_i58ewe4a3aw64ac4d","versioned_link_url","/p/_9_i58ewe4a3aw64ac4d/2","deleted_at","yapping","project",{"_59":104,"_60":106,"_64":107,"_108":109,"_77":110,"_111":112,"_55":113,"_114":115,"_116":117,"_118":-5,"_62":-5,"_119":-5,"_102":-5,"_120":121,"_122":123,"_128":41,"_129":-5,"_130":131,"_132":41,"_133":-5,"_134":135,"_136":-5},"_9_i58ewe4a3aw64ac4d","2024-10-30T12:01:14.841639+00:00","updated_at","2024-10-30T23:34:03.21754+00:00","Resonant Pulse","visibility","public","ada-s-resonance-art","created_by",{"_59":20,"_60":89,"_64":90,"_91":92,"_93":-5,"_94":-5,"_95":96,"_97":41},"current_version",2,"last_posted_version","parent_version","posted",true,"stats",{"_124":125,"_126":125,"_127":125},"views",0,"likes","comments","auto_set_current","description","comments_mode","open","enable_chat","from_template","domains",[],"thumbnail","project_revision",{"_59":137,"_60":139,"_72":117,"_64":140,"_141":-5,"_62":-5,"_142":-5,"_143":-5,"_114":144,"_145":146,"_148":106,"_108":149,"_102":-5,"_122":150,"_152":41,"_153":61,"_154":-5,"_155":-5,"_156":-5},"0192ddf7-d204-7a79-8eb9-b621c631a190","2024-10-30T15:07:38.884+00:00","visited_at","parent_revision_version","parent_revision_project_id",{"_59":20,"_60":89,"_64":90,"_91":92,"_93":-5,"_94":-5,"_95":96,"_97":41},"meta",{"_72":147},"1","project_id","2024-10-30T15:07:39.082755+00:00",{"_151":125},"multiplayer_count","draft","site_id","chat_session_id","chat_session_run_index","current_screenshot_url","cursor","eyJpZCI6IjAxOTJkZGY3LWQyMDQtN2E3OS04ZWI5LWI2MjFjNjMxYTE5MCJ9","token","included",[],"branch","dehydratedState","routes/browser/layout","actionData","errors"]