Gün
01
Ay
01
Yıl
2024
6 Mart 2026 Cuma
Analog saat
import React, { useState, useEffect } from 'react';
const AnalogClock = () => {
const [time, setTime] = useState(new Date());
const [selectedTheme, setSelectedTheme] = useState('mint');
const themes = {
mint: {
bg: '#1B5E20',
face: '#C8E6C9',
border: '#81C784',
hands: '#2E7D32',
center: '#1B5E20',
text: '#1B5E20',
number: '#2E7D32'
},
lavender: {
bg: '#4A148C',
face: '#E1BEE7',
border: '#BA68C8',
hands: '#6A1B9A',
center: '#4A148C',
text: '#4A148C',
number: '#6A1B9A'
},
peach: {
bg: '#BF360C',
face: '#FFE0B2',
border: '#FFB74D',
hands: '#E65100',
center: '#BF360C',
text: '#BF360C',
number: '#E65100'
},
sky: {
bg: '#01579B',
face: '#BBDEFB',
border: '#64B5F6',
hands: '#0D47A1',
center: '#01579B',
text: '#01579B',
number: '#0D47A1'
},
rose: {
bg: '#880E4F',
face: '#F8BBD0',
border: '#F06292',
hands: '#AD1457',
center: '#880E4F',
text: '#880E4F',
number: '#AD1457'
},
neon_green: {
bg: '#0A0A0A',
face: '#1A1A1A',
border: '#39FF14',
hands: '#39FF14',
center: '#CCFF00',
text: '#39FF14',
number: '#39FF14',
glow: true
},
neon_pink: {
bg: '#0A0A0A',
face: '#1A1A1A',
border: '#FF10F0',
hands: '#FF10F0',
center: '#FF1493',
text: '#FF10F0',
number: '#FF10F0',
glow: true
},
neon_cyan: {
bg: '#0A0A0A',
face: '#1A1A1A',
border: '#00FFFF',
hands: '#00FFFF',
center: '#00CED1',
text: '#00FFFF',
number: '#00FFFF',
glow: true
}
};
useEffect(() => {
const timer = setInterval(() => {
setTime(new Date());
}, 1000);
return () => clearInterval(timer);
}, []);
const theme = themes[selectedTheme];
const seconds = time.getSeconds();
const minutes = time.getMinutes();
const hours = time.getHours() % 12;
const secondAngle = (seconds * 6);
const minuteAngle = (minutes * 6 + seconds * 0.1);
const hourAngle = (hours * 30 + minutes * 0.5);
const dateStr = time.toLocaleDateString('tr-TR', {
weekday: 'long',
year: 'numeric',
month: 'long',
day: 'numeric'
});
return (
);
};
export default AnalogClock;
{/* Sayılar */}
{[12, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].map((num, i) => {
const angle = (i * 30) * Math.PI / 180;
const radius = 130;
const x = Math.sin(angle) * radius;
const y = -Math.cos(angle) * radius;
return (
{num}
);
})}
{/* Çizgiler */}
{[...Array(60)].map((_, i) => {
const angle = i * 6;
const isHour = i % 5 === 0;
const radius = 42;
return (
);
})}
{/* Akrep (saat) */}
{/* Yelkovan (dakika) */}
{/* Saniye */}
{/* Merkez nokta */}
{dateStr}
{Object.entries(themes).map(([key, val]) => (
))}
8 bit müzik yapma programı
import React, { useState, useEffect, useRef } from 'react';
const Music8Bit = () => {
const [isPlaying, setIsPlaying] = useState(false);
const [currentBeat, setCurrentBeat] = useState(0);
const [tempo, setTempo] = useState(120);
const [selectedInstrument, setSelectedInstrument] = useState('square');
const [volume, setVolume] = useState(0.3);
const audioContextRef = useRef(null);
const intervalRef = useRef(null);
const BEATS = 16;
const TRACKS = 4;
const [grid, setGrid] = useState(
Array(TRACKS).fill(null).map(() => Array(BEATS).fill(false))
);
const [isAnalyzing, setIsAnalyzing] = useState(false);
const [audioFile, setAudioFile] = useState(null);
const fileInputRef = useRef(null);
const instruments = [
{ id: 'square', name: '🔲 Square', icon: '■', color: 'bg-blue-500' },
{ id: 'sawtooth', name: '🔺 Saw', icon: '▲', color: 'bg-green-500' },
{ id: 'triangle', name: '🔻 Triangle', icon: '▼', color: 'bg-yellow-500' },
{ id: 'sine', name: '〰️ Sine', icon: '~', color: 'bg-purple-500' }
];
const notes = [
{ freq: 523.25, name: 'C5' },
{ freq: 392.00, name: 'G4' },
{ freq: 293.66, name: 'D4' },
{ freq: 196.00, name: 'G3' }
];
useEffect(() => {
if (!audioContextRef.current) {
audioContextRef.current = new (window.AudioContext || window.webkitAudioContext)();
}
return () => {
if (audioContextRef.current && audioContextRef.current.state !== 'closed') {
audioContextRef.current.close();
}
};
}, []);
useEffect(() => {
if (isPlaying) {
const beatDuration = (60 / tempo) * 250;
intervalRef.current = setInterval(() => {
setCurrentBeat(prev => (prev + 1) % BEATS);
}, beatDuration);
} else {
if (intervalRef.current) {
clearInterval(intervalRef.current);
}
}
return () => {
if (intervalRef.current) {
clearInterval(intervalRef.current);
}
};
}, [isPlaying, tempo]);
useEffect(() => {
if (isPlaying && audioContextRef.current) {
grid.forEach((track, trackIndex) => {
if (track[currentBeat]) {
playNote(notes[trackIndex].freq, selectedInstrument);
}
});
}
}, [currentBeat, isPlaying]);
const playNote = (frequency, waveType) => {
const ctx = audioContextRef.current;
if (!ctx) return;
const oscillator = ctx.createOscillator();
const gainNode = ctx.createGain();
oscillator.type = waveType;
oscillator.frequency.setValueAtTime(frequency, ctx.currentTime);
gainNode.gain.setValueAtTime(volume, ctx.currentTime);
gainNode.gain.exponentialRampToValueAtTime(0.01, ctx.currentTime + 0.2);
oscillator.connect(gainNode);
gainNode.connect(ctx.destination);
oscillator.start(ctx.currentTime);
oscillator.stop(ctx.currentTime + 0.2);
};
const toggleCell = (trackIndex, beatIndex) => {
const newGrid = grid.map((track, tIndex) =>
tIndex === trackIndex
? track.map((cell, bIndex) => bIndex === beatIndex ? !cell : cell)
: track
);
setGrid(newGrid);
};
const clearAll = () => {
setGrid(Array(TRACKS).fill(null).map(() => Array(BEATS).fill(false)));
setIsPlaying(false);
setCurrentBeat(0);
};
const randomize = () => {
setGrid(Array(TRACKS).fill(null).map(() =>
Array(BEATS).fill(null).map(() => Math.random() > 0.7)
));
};
const presets = {
arpeggio: [
[true, false, false, false, true, false, false, false, true, false, false, false, true, false, false, false],
[false, false, true, false, false, false, true, false, false, false, true, false, false, false, true, false],
[false, true, false, false, false, true, false, false, false, true, false, false, false, true, false, false],
[true, false, false, false, false, false, false, false, true, false, false, false, false, false, false, false]
],
beat: [
[true, false, true, false, true, false, true, false, true, false, true, false, true, false, true, false],
[false, false, false, false, true, false, false, false, false, false, false, false, true, false, false, false],
[true, true, false, true, false, true, true, false, true, true, false, true, false, true, true, false],
[true, false, false, false, true, false, true, false, true, false, false, false, true, false, true, false]
],
melody: [
[true, false, false, true, false, false, true, false, false, true, false, false, true, false, false, false],
[false, true, false, false, true, false, false, true, false, false, true, false, false, true, false, false],
[false, false, true, false, false, true, false, false, true, false, false, true, false, false, true, false],
[true, false, false, false, false, false, false, false, true, false, false, false, false, false, false, false]
]
};
const loadPreset = (presetName) => {
setGrid(presets[presetName]);
setIsPlaying(false);
setCurrentBeat(0);
};
const analyzeAudio = async (file) => {
if (!file) {
alert('Lütfen bir dosya seçin');
return;
}
setIsAnalyzing(true);
try {
// Ensure AudioContext is created and resumed
if (!audioContextRef.current) {
audioContextRef.current = new (window.AudioContext || window.webkitAudioContext)();
}
if (audioContextRef.current.state === 'suspended') {
await audioContextRef.current.resume();
}
const ctx = audioContextRef.current;
const arrayBuffer = await file.arrayBuffer();
const audioBuffer = await ctx.decodeAudioData(arrayBuffer);
const channelData = audioBuffer.getChannelData(0);
const sampleRate = audioBuffer.sampleRate;
// Calculate energy for each 16th of the song
const segmentSize = Math.floor(channelData.length / BEATS);
const energies = [];
for (let i = 0; i < BEATS; i++) {
const start = i * segmentSize;
const end = Math.min(start + segmentSize, channelData.length);
// Calculate RMS energy for this segment
let sum = 0;
for (let j = start; j < end; j++) {
sum += channelData[j] * channelData[j];
}
const rms = Math.sqrt(sum / (end - start));
energies.push(rms);
}
// Normalize energies
const maxEnergy = Math.max(...energies);
const normalizedEnergies = energies.map(e => e / maxEnergy);
// Calculate average and use it for thresholding
const avgEnergy = normalizedEnergies.reduce((a, b) => a + b, 0) / BEATS;
const newGrid = Array(TRACKS).fill(null).map(() => Array(BEATS).fill(false));
// Create smart pattern based on energy levels
normalizedEnergies.forEach((energy, beat) => {
// Bass drum on strong beats (high energy)
if (energy > avgEnergy * 1.2) {
newGrid[3][beat] = true; // Lowest note - kick drum
}
// Snare pattern on medium energy
if (energy > avgEnergy * 0.9 && beat % 4 === 2) {
newGrid[2][beat] = true; // Mid-high note - snare
}
// Hi-hat pattern (consistent rhythm)
if (beat % 2 === 0 && energy > avgEnergy * 0.5) {
newGrid[1][beat] = true; // High note - hi-hat
}
// Melody line on peaks
if (energy > avgEnergy * 1.5) {
newGrid[0][beat] = true; // Highest note - melody
}
// Add some variation on quarter notes
if (beat % 4 === 0 && energy > avgEnergy * 0.8) {
newGrid[0][beat] = true;
}
});
// Ensure we have some pattern (if file is too quiet)
const hasNotes = newGrid.some(track => track.some(note => note));
if (!hasNotes) {
// Create a basic pattern
for (let i = 0; i < BEATS; i++) {
if (i % 4 === 0) newGrid[3][i] = true; // Kick
if (i % 4 === 2) newGrid[2][i] = true; // Snare
if (i % 2 === 0) newGrid[1][i] = true; // Hi-hat
if (i % 8 === 0 || i % 8 === 3) newGrid[0][i] = true; // Melody
}
}
setGrid(newGrid);
setIsPlaying(false);
setCurrentBeat(0);
alert('✅ Müzik başarıyla analiz edildi ve pattern oluşturuldu!');
} catch (error) {
console.error('Audio analysis error:', error);
alert('❌ Hata: ' + error.message + '\n\nLütfen geçerli bir MP3 veya WAV dosyası seçin.');
} finally {
setIsAnalyzing(false);
}
};
const handleFileUpload = (event) => {
const file = event.target.files[0];
if (file) {
if (file.type.startsWith('audio/') || file.name.endsWith('.mp3') || file.name.endsWith('.wav') || file.name.endsWith('.ogg')) {
setAudioFile(file);
analyzeAudio(file);
} else {
alert('Lütfen bir ses dosyası seçin (MP3, WAV, OGG)');
}
}
// Reset input to allow same file to be uploaded again
event.target.value = '';
};
return (
);
};
export default Music8Bit;
{/* Header */}
{/* Controls */}
🎵 8-BIT MUSIC MAKER
RETRO SOUND SYNTHESIZER
{/* File Upload Section */}
{/* Grid */}
{/* Presets and Actions */}
{/* Instructions */}
🎧 MP3/WAV YÜKLE & OTOMATIK OLUŞTUR
{audioFile && !isAnalyzing && (
✓ {audioFile.name}
)}
💡 MP3, WAV veya OGG dosyası seç - otomatik ritim oluşturulacak!
{/* Play Controls */}
{/* Instrument Selector */}
KONTROL
{/* Tempo Control */}
setTempo(parseInt(e.target.value))}
className="w-full h-2 bg-purple-900 rounded-lg appearance-none cursor-pointer accent-cyan-400"
/>
{/* Volume Control */}
setVolume(parseFloat(e.target.value))}
className="w-full h-2 bg-purple-900 rounded-lg appearance-none cursor-pointer accent-cyan-400"
/>
DALGA TİPİ
{instruments.map(inst => (
))}
{grid.map((track, trackIndex) => (
))}
{notes[trackIndex].name}
{track.map((cell, beatIndex) => (
🎵 Karelere tıklayarak notaları aktifleştir
🎮 Hazır melodiler için preset butonlarını kullan
🎧 Kendi müziğini yükle - otomatik 8-bit versiyonu oluşturulacak!
Kaydol:
Kayıtlar (Atom)