🔯 Sacred Geometry Viewer
Flower of Life
The fundamental pattern of creation, containing all geometric forms and representing the interconnectedness of all life.
🌸 Mandala Creation Studio
👁️ Visual Meditation Aids
🫁
Breathing Circle
Visual breathing guide with expanding circle
🕯️
Candle Flame
Flickering flame for concentration
🌀
Sacred Fractals
Infinite geometric patterns
🌈
Color Therapy
Healing color transitions
function openSacredSound() {
showSessionModal('Sacred Sound Healing');
loadSacredSoundContent();
}
function openMantraChanting() {
showSessionModal('Mantra & Chanting');
loadMantraContent();
}
function openSoundBath() {
showSessionModal('Sound Bath Journey');
loadSoundBathContent();
initializeSoundWaveVisualization();
}
function initializeSoundWaveVisualization() {
const modalContent = document.querySelector('.session-content');
// Add sound wave visualization
const soundContainer = document.createElement('div');
soundContainer.className = 'sound-bath-visualization';
soundContainer.innerHTML = `
${Array.from({length: 20}, (_, i) =>
`
`
).join('')}
Select a healing frequency to begin
`;
modalContent.insertBefore(soundContainer, modalContent.firstChild);
}
let soundBathActive = false;
let currentFrequency = null;
function startSoundBath() {
soundBathActive = !soundBathActive;
const btn = document.querySelector('.sound-btn');
const soundBars = document.querySelectorAll('.sound-bar');
const rings = document.querySelectorAll('.frequency-ring');
if (soundBathActive) {
btn.textContent = 'Stop Sound Bath';
btn.style.background = 'linear-gradient(45deg, #ff9800, #f44336)';
// Activate sound visualization
soundBars.forEach((bar, index) => {
bar.style.animationDelay = `${index * 0.1}s`;
bar.classList.add('sound-active');
});
rings.forEach((ring, index) => {
ring.style.animationDelay = `${index * 0.3}s`;
ring.classList.add('ring-active');
});
document.querySelector('.current-frequency').textContent =
`Sound bath active ${currentFrequency ? `at ${currentFrequency.toUpperCase()}` : ''}`;
} else {
btn.textContent = 'Start Sound Bath';
btn.style.background = 'linear-gradient(45deg, var(--accent-orange), var(--accent-cyan))';
soundBars.forEach(bar => bar.classList.remove('sound-active'));
rings.forEach(ring => ring.classList.remove('ring-active'));
document.querySelector('.current-frequency').textContent =
`Sound bath stopped ${currentFrequency ? `- ${currentFrequency.toUpperCase()} ready` : ''}`;
}
}
function changeFrequency(frequency) {
currentFrequency = frequency;
const info = document.querySelector('.current-frequency');
// Update frequency display
info.textContent = `Frequency set to ${frequency.toUpperCase()} - ${getFrequencyInfo(frequency)}`;
// Update visualization colors based on frequency
const container = document.querySelector('.sound-bath-visualization');
container.className = `sound-bath-visualization frequency-${frequency}`;
// Reset frequency buttons
document.querySelectorAll('.frequency-btn').forEach(btn => {
btn.classList.remove('active-frequency');
});
// Activate selected frequency button
event.target.classList.add('active-frequency');
}
function getFrequencyInfo(frequency) {
const frequencies = {
'432hz': 'Natural harmonic resonance',
'528hz': 'Love frequency, DNA repair',
'741hz': 'Consciousness expansion'
};
return frequencies[frequency] || 'Healing vibration';
}
function openMusicMeditation() {
showSessionModal('Music Meditation');
loadMusicMeditationContent();
}
function openCreativeExpression() {
showSessionModal('Creative Expression');
loadCreativeExpressionContent();
initializeSacredGeometry();
}
function initializeSacredGeometry() {
const modalContent = document.querySelector('.session-content');
// Add sacred geometry creation interface
const geometryContainer = document.createElement('div');
geometryContainer.className = 'sacred-geometry-studio';
geometryContainer.innerHTML = `
Let sacred geometry guide your creative expression
`;
modalContent.insertBefore(geometryContainer, modalContent.firstChild);
// Initialize canvas
initializeCanvas();
}
let canvas, ctx, selectedColor = '#d4af37';
function initializeCanvas() {
canvas = document.getElementById('sacred-canvas');
ctx = canvas.getContext('2d');
// Set canvas background
ctx.fillStyle = 'rgba(26, 26, 46, 0.9)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
function selectColor(colorElement) {
// Remove active state from all colors
document.querySelectorAll('.color-orb').forEach(orb => {
orb.classList.remove('color-active');
});
// Activate selected color
colorElement.classList.add('color-active');
selectedColor = colorElement.dataset.color;
}
function drawPattern(patternType) {
if (!ctx) return;
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
ctx.strokeStyle = selectedColor;
ctx.lineWidth = 2;
ctx.shadowColor = selectedColor;
ctx.shadowBlur = 10;
switch(patternType) {
case 'flower-of-life':
drawFlowerOfLife(centerX, centerY);
break;
case 'merkaba':
drawMerkaba(centerX, centerY);
break;
case 'sri-yantra':
drawSriYantra(centerX, centerY);
break;
case 'golden-spiral':
drawGoldenSpiral(centerX, centerY);
break;
}
}
function drawFlowerOfLife(x, y) {
const radius = 50;
for (let i = 0; i < 6; i++) {
const angle = (i * Math.PI) / 3;
const circleX = x + Math.cos(angle) * radius;
const circleY = y + Math.sin(angle) * radius;
ctx.beginPath();
ctx.arc(circleX, circleY, radius, 0, 2 * Math.PI);
ctx.stroke();
}
ctx.beginPath();
ctx.arc(x, y, radius, 0, 2 * Math.PI);
ctx.stroke();
}
function drawMerkaba(x, y) {
const size = 80;
// Draw upward triangle
ctx.beginPath();
ctx.moveTo(x, y - size);
ctx.lineTo(x - size, y + size/2);
ctx.lineTo(x + size, y + size/2);
ctx.closePath();
ctx.stroke();
// Draw downward triangle
ctx.beginPath();
ctx.moveTo(x, y + size);
ctx.lineTo(x - size, y - size/2);
ctx.lineTo(x + size, y - size/2);
ctx.closePath();
ctx.stroke();
}
function drawSriYantra(x, y) {
const size = 60;
// Draw outer triangles
for (let i = 0; i < 4; i++) {
const angle = (i * Math.PI) / 2;
const triangleSize = size - (i * 10);
ctx.beginPath();
ctx.moveTo(x, y - triangleSize);
ctx.lineTo(x - triangleSize, y + triangleSize/2);
ctx.lineTo(x + triangleSize, y + triangleSize/2);
ctx.closePath();
ctx.stroke();
}
}
function drawGoldenSpiral(x, y) {
const a = 5;
const b = 0.2;
ctx.beginPath();
for (let angle = 0; angle < 4 * Math.PI; angle += 0.1) {
const radius = a * Math.exp(b * angle);
const spiralX = x + radius * Math.cos(angle);
const spiralY = y + radius * Math.sin(angle);
if (angle === 0) {
ctx.moveTo(spiralX, spiralY);
} else {
ctx.lineTo(spiralX, spiralY);
}
}
ctx.stroke();
}
function clearCanvas() {
if (!ctx) return;
ctx.fillStyle = 'rgba(26, 26, 46, 0.9)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
function animateGeometry() {
// Add animation effect to existing patterns
if (!ctx) return;
ctx.shadowBlur = 20;
ctx.globalCompositeOperation = 'screen';
setTimeout(() => {
ctx.shadowBlur = 10;
ctx.globalCompositeOperation = 'source-over';
}, 2000);
}
function saveCreation() {
if (!canvas) return;
const link = document.createElement('a');
link.download = 'sacred-geometry-art.png';
link.href = canvas.toDataURL();
link.click();
// Show feedback
const inspiration = document.querySelector('.inspiration-text');
const originalText = inspiration.textContent;
inspiration.textContent = 'Sacred geometry art saved! ✨';
setTimeout(() => {
inspiration.textContent = originalText;
}, 3000);
}
function showSessionModal(title) {
document.getElementById('session-title').textContent = title;
document.getElementById('session-modal').style.display = 'flex';
}
function closeSession() {
// Stop any playing sounds
if (currentSession.currentSounds.length > 0) {
currentSession.currentSounds.forEach(sound => {
if (sound.pause) sound.pause();
});
currentSession.currentSounds = [];
}
document.getElementById('session-modal').style.display = 'none';
currentSession.isActive = false;
}
function loadMysticArtsContent() {
const content = document.getElementById('session-content');
content.innerHTML = `
`;
setupCanvas();
}
function loadSacredSoundContent() {
const content = document.getElementById('session-content');
const soundElements = sacredSounds.map((sound, index) =>
`
${sound.icon}
${sound.name}
${sound.frequency}
`
).join('');
content.innerHTML = `
Choose Your Sacred Sounds
${soundElements}
Select sounds above to create your personalized healing environment
`;
}
function loadMantraContent() {
const content = document.getElementById('session-content');
const mantraElements = mantras.map((mantra, index) =>
`
🕉️
${mantra.text}
${mantra.meaning}
`
).join('');
content.innerHTML = `
Sacred Mantras & Chanting
${mantraElements}
Choose a mantra to begin your chanting practice
`;
}
function loadSoundBathContent() {
const content = document.getElementById('session-content');
content.innerHTML = `
Immersive Sound Bath Experience
Choose your sound bath journey above to begin deep healing
--:--
`;
}
function loadMusicMeditationContent() {
const content = document.getElementById('session-content');
content.innerHTML = `
Meditative Music Experience
Select a meditation track to enhance your spiritual practice
`;
}
function loadCreativeExpressionContent() {
const content = document.getElementById('session-content');
content.innerHTML = `
Guided Creative Expression
Choose a creative practice to express your soul's truth
`;
}
// Canvas Functions
function setupCanvas() {
const canvas = document.getElementById('sacred-canvas');
if (!canvas) return;
const ctx = canvas.getContext('2d');
currentSession.canvas = canvas;
currentSession.context = ctx;
// Set white background
ctx.fillStyle = 'white';
ctx.fillRect(0, 0, canvas.width, canvas.height);
let isDrawing = false;
canvas.addEventListener('mousedown', (e) => {
isDrawing = true;
draw(e);
});
canvas.addEventListener('mousemove', (e) => {
if (isDrawing) draw(e);
});
canvas.addEventListener('mouseup', () => {
isDrawing = false;
ctx.beginPath();
});
function draw(e) {
const rect = canvas.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
const color = document.getElementById('brush-color').value;
const size = document.getElementById('brush-size').value;
ctx.lineWidth = size;
ctx.lineCap = 'round';
ctx.strokeStyle = color;
ctx.lineTo(x, y);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(x, y);
}
}
function clearCanvas() {
const canvas = currentSession.canvas;
const ctx = currentSession.context;
if (!canvas || !ctx) return;
ctx.fillStyle = 'white';
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
function saveArt() {
const canvas = currentSession.canvas;
if (!canvas) return;
const link = document.createElement('a');
link.download = 'sacred-art-' + Date.now() + '.png';
link.href = canvas.toDataURL();
link.click();
}
function generateInspiration() {
const randomInspiration = inspirations[Math.floor(Math.random() * inspirations.length)];
document.getElementById('inspiration-text').innerHTML = `"${randomInspiration}"
`;
}
// Sacred Pattern Functions
function drawMandala() {
const canvas = currentSession.canvas;
const ctx = currentSession.context;
if (!canvas || !ctx) return;
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
ctx.strokeStyle = '#d4af37';
ctx.lineWidth = 2;
// Draw concentric circles
for (let r = 20; r < 150; r += 30) {
ctx.beginPath();
ctx.arc(centerX, centerY, r, 0, 2 * Math.PI);
ctx.stroke();
// Draw radial lines
for (let i = 0; i < 12; i++) {
const angle = (i * Math.PI) / 6;
ctx.beginPath();
ctx.moveTo(centerX, centerY);
ctx.lineTo(centerX + Math.cos(angle) * r, centerY + Math.sin(angle) * r);
ctx.stroke();
}
}
}
function drawSacredGeometry() {
const canvas = currentSession.canvas;
const ctx = currentSession.context;
if (!canvas || !ctx) return;
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
ctx.strokeStyle = '#8b5cf6';
ctx.lineWidth = 2;
// Draw hexagon
ctx.beginPath();
for (let i = 0; i < 6; i++) {
const angle = (i * Math.PI) / 3;
const x = centerX + Math.cos(angle) * 100;
const y = centerY + Math.sin(angle) * 100;
if (i === 0) ctx.moveTo(x, y);
else ctx.lineTo(x, y);
}
ctx.closePath();
ctx.stroke();
// Draw inner triangles
for (let i = 0; i < 6; i++) {
const angle1 = (i * Math.PI) / 3;
const angle2 = ((i + 2) * Math.PI) / 3;
ctx.beginPath();
ctx.moveTo(centerX, centerY);
ctx.lineTo(centerX + Math.cos(angle1) * 100, centerY + Math.sin(angle1) * 100);
ctx.lineTo(centerX + Math.cos(angle2) * 100, centerY + Math.sin(angle2) * 100);
ctx.closePath();
ctx.stroke();
}
}
function drawFlowerOfLife() {
const canvas = currentSession.canvas;
const ctx = currentSession.context;
if (!canvas || !ctx) return;
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
const radius = 40;
ctx.strokeStyle = '#00e5ff';
ctx.lineWidth = 2;
// Center circle
ctx.beginPath();
ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
ctx.stroke();
// Surrounding circles
for (let i = 0; i < 6; i++) {
const angle = (i * Math.PI) / 3;
const x = centerX + Math.cos(angle) * radius;
const y = centerY + Math.sin(angle) * radius;
ctx.beginPath();
ctx.arc(x, y, radius, 0, 2 * Math.PI);
ctx.stroke();
}
}
function drawSriYantra() {
const canvas = currentSession.canvas;
const ctx = currentSession.context;
if (!canvas || !ctx) return;
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
ctx.strokeStyle = '#ff9800';
ctx.lineWidth = 2;
// Draw Sri Yantra triangles
const size = 80;
// Upward triangles
for (let i = 0; i < 4; i++) {
const offset = i * 20;
ctx.beginPath();
ctx.moveTo(centerX, centerY - size + offset);
ctx.lineTo(centerX - size + offset, centerY + size - offset);
ctx.lineTo(centerX + size - offset, centerY + size - offset);
ctx.closePath();
ctx.stroke();
}
// Downward triangles
for (let i = 0; i < 5; i++) {
const offset = i * 15;
ctx.beginPath();
ctx.moveTo(centerX, centerY + size - offset);
ctx.lineTo(centerX - size + offset, centerY - size + offset);
ctx.lineTo(centerX + size - offset, centerY - size + offset);
ctx.closePath();
ctx.stroke();
}
}
// Sound Functions
function playSound(index) {
const sound = sacredSounds[index];
const soundCard = document.querySelector(`[data-sound="${index}"]`);
// Toggle playing state
if (soundCard.classList.contains('playing')) {
soundCard.classList.remove('playing');
// Stop sound logic here
} else {
soundCard.classList.add('playing');
// Play sound logic here
showSoundGuidance(sound);
}
}
function showSoundGuidance(sound) {
const guidance = document.getElementById('sound-guidance');
if (guidance) {
guidance.innerHTML = `
Now Playing: ${sound.name}
Frequency: ${sound.frequency}
Allow the sacred vibrations to flow through your being and restore harmony to your energy field.
`;
}
}
function stopAllSounds() {
const soundCards = document.querySelectorAll('.sound-card');
soundCards.forEach(card => card.classList.remove('playing'));
const guidance = document.getElementById('sound-guidance');
if (guidance) {
guidance.innerHTML = 'All sounds stopped. Choose new sounds for your healing session.';
}
}
function playMantra(index) {
const mantra = mantras[index];
const guidance = document.getElementById('mantra-guidance');
if (guidance) {
guidance.innerHTML = `
${mantra.text}
Meaning: ${mantra.meaning}
Repeat this sacred mantra with intention and devotion.
`;
}
}
function startSoundBath(type) {
const display = document.getElementById('soundbath-display');
const timer = document.getElementById('session-timer');
if (display) {
const descriptions = {
'gentle': 'Gentle healing frequencies wash over you like warm light...',
'deep': 'Deep transformational sounds penetrate your cellular structure...',
'chakra': 'Sacred chakra frequencies align your energy centers...'
};
display.innerHTML = descriptions[type];
}
// Start 20-minute timer
let minutes = 20;
let seconds = 0;
const timerInterval = setInterval(() => {
timer.textContent = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
if (seconds === 0) {
if (minutes === 0) {
clearInterval(timerInterval);
alert('🔔 Sound bath complete! How do you feel? ✨');
return;
}
minutes--;
seconds = 59;
} else {
seconds--;
}
}, 1000);
}
// Close modal when clicking outside
document.getElementById('session-modal').addEventListener('click', function(e) {
if (e.target === this) {
closeSession();
}
});
// Handle escape key
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape') {
closeSession();
}
});
// Performance tracking
window.addEventListener('load', () => {
console.log('🎨 Sacred Arts & Sound loaded successfully');
// Sacred Arts & Sound Function Validation
const requiredFunctions = [
'startSession', 'closeSession', 'setActiveTab', 'loadTabContent',
'playSound', 'pauseSound', 'generateFrequency', 'loadSacredGeometry'
];
if (window.DivineTemplateUtils) {
window.DivineTemplateUtils.validateSectionFunctions('Sacred Arts & Sound', requiredFunctions);
window.DivineTemplateUtils.initializeSectionListeners('Sacred Arts & Sound');
window.DivineTemplateUtils.trackSectionPerformance('Sacred Arts & Sound');
} else {
console.log('🎨 Sacred Arts & Sound validation script not found');
}
});