当前位置：首页 > news >正文

datawhale玩转通义四大新模型 202509 第4次作业

news 2025/9/23 7:33:44

笔记：

gpt5写代码的demo:

gpt5-coding-examples.vercel.app

作业：交互式特效

Create a single-page app in a single HTML filewith the following requirements:-Name: Music Theory Trainer Goal:Teach notes,scales, and chords.Features:Interactive piano. -The UI should be music-themed, interactive. and fun.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Music Theory Trainer</title><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"><style>* {margin: 0;padding: 0;box-sizing: border-box;font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;}body {background: linear-gradient(135deg, #1a2a6c, #b21f1f, #1a2a6c);color: #fff;min-height: 100vh;padding: 20px;overflow-x: hidden;}.container {max-width: 1200px;margin: 0 auto;}header {text-align: center;padding: 20px 0;margin-bottom: 30px;position: relative;}h1 {font-size: 3.5rem;margin-bottom: 10px;text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);background: linear-gradient(to right, #ff7e5f, #feb47b);-webkit-background-clip: text;-webkit-text-fill-color: transparent;letter-spacing: 2px;}.subtitle {font-size: 1.2rem;opacity: 0.9;max-width: 600px;margin: 0 auto;}.app-container {display: flex;flex-wrap: wrap;gap: 30px;margin-bottom: 30px;}.panel {background: rgba(0, 0, 0, 0.4);border-radius: 15px;padding: 25px;box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);backdrop-filter: blur(10px);border: 1px solid rgba(255, 255, 255, 0.1);}.piano-container {flex: 3;min-width: 300px;}.theory-container {flex: 2;min-width: 300px;}.panel-title {font-size: 1.8rem;margin-bottom: 20px;color: #ff7e5f;display: flex;align-items: center;gap: 10px;}.panel-title i {font-size: 1.5rem;}.piano {display: flex;height: 250px;position: relative;margin: 0 auto;width: fit-content;background: #111;border-radius: 0 0 10px 10px;padding: 10px 5px;}.white-key {width: 50px;height: 100%;background: linear-gradient(to bottom, #fff 0%, #f5f5f5 100%);border: 1px solid #ccc;border-radius: 0 0 5px 5px;position: relative;z-index: 1;cursor: pointer;box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);transition: all 0.1s ease;}.white-key.active {background: linear-gradient(to bottom, #ff7e5f, #feb47b);box-shadow: 0 0 15px rgba(255, 126, 95, 0.7);transform: translateY(2px);}.black-key {width: 30px;height: 65%;background: linear-gradient(to bottom, #000 0%, #333 100%);border-radius: 0 0 4px 4px;position: absolute;z-index: 2;cursor: pointer;box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);transition: all 0.1s ease;}.black-key.active {background: linear-gradient(to bottom, #ff7e5f, #feb47b);box-shadow: 0 0 15px rgba(255, 126, 95, 0.7);transform: translateY(2px);}.key-label {position: absolute;bottom: 10px;width: 100%;text-align: center;font-weight: bold;font-size: 0.9rem;}.white-key .key-label {color: #333;}.black-key .key-label {color: #fff;}.controls {display: flex;justify-content: space-between;margin-top: 20px;flex-wrap: wrap;gap: 15px;}.control-group {flex: 1;min-width: 200px;}.control-group h3 {margin-bottom: 10px;color: #feb47b;}select, button {width: 100%;padding: 12px;border-radius: 8px;border: none;background: rgba(255, 255, 255, 0.15);color: white;font-size: 1rem;cursor: pointer;transition: all 0.3s ease;}select:focus, button:focus {outline: none;box-shadow: 0 0 0 2px #ff7e5f;}select:hover, button:hover {background: rgba(255, 255, 255, 0.25);}button {background: linear-gradient(to right, #ff7e5f, #feb47b);font-weight: bold;letter-spacing: 1px;}button:hover {transform: translateY(-3px);box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);}.theory-content {min-height: 300px;}.theory-section {margin-bottom: 25px;padding-bottom: 20px;border-bottom: 1px solid rgba(255, 255, 255, 0.1);}.theory-section:last-child {border-bottom: none;}.theory-section h3 {color: #feb47b;margin-bottom: 15px;display: flex;align-items: center;gap: 10px;}.theory-section p {line-height: 1.6;margin-bottom: 15px;}.chord-display {display: flex;flex-wrap: wrap;gap: 15px;margin-top: 15px;}.chord {background: rgba(255, 255, 255, 0.1);padding: 15px;border-radius: 10px;min-width: 120px;text-align: center;transition: all 0.3s ease;}.chord:hover {background: rgba(255, 126, 95, 0.3);transform: translateY(-5px);}.chord-name {font-weight: bold;font-size: 1.2rem;margin-bottom: 10px;color: #ff7e5f;}.chord-notes {font-size: 0.9rem;}.scale-display {display: flex;flex-wrap: wrap;gap: 10px;margin-top: 15px;}.note {width: 40px;height: 40px;border-radius: 50%;background: linear-gradient(to bottom, #ff7e5f, #feb47b);display: flex;align-items: center;justify-content: center;font-weight: bold;box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);}.footer {text-align: center;padding: 20px;margin-top: 20px;font-size: 0.9rem;opacity: 0.8;}.highlight {color: #ff7e5f;font-weight: bold;}.volume-control {display: flex;align-items: center;gap: 10px;margin-top: 15px;}.volume-control input {flex: 1;}@media (max-width: 768px) {.app-container {flex-direction: column;}h1 {font-size: 2.5rem;}.piano {height: 200px;}.white-key {width: 40px;}.black-key {width: 24px;}}</style>
</head>
<body><div class="container"><header><h1><i class="fas fa-music"></i> Music Theory Trainer</h1><p class="subtitle">Learn notes, scales, and chords with our interactive piano. Perfect for beginners and music enthusiasts!</p></header><div class="app-container"><div class="panel piano-container"><h2 class="panel-title"><i class="fas fa-piano-keyboard"></i> Interactive Piano</h2><div class="piano" id="piano"><!-- Piano keys will be generated by JavaScript --></div><div class="controls"><div class="control-group"><h3><i class="fas fa-sliders-h"></i> Select Scale</h3><select id="scale-select"><option value="major">C Major</option><option value="minor">A Minor</option><option value="pentatonic">C Pentatonic</option><option value="blues">C Blues</option></select></div><div class="control-group"><h3><i class="fas fa-guitar"></i> Select Chord</h3><select id="chord-select"><option value="cmaj">C Major</option><option value="cmin">C Minor</option><option value="f">F Major</option><option value="g">G Major</option></select></div><div class="control-group"><h3><i class="fas fa-volume-up"></i> Volume</h3><div class="volume-control"><i class="fas fa-volume-down"></i><input type="range" id="volume" min="0" max="1" step="0.01" value="0.5"><i class="fas fa-volume-up"></i></div><button id="play-chord"><i class="fas fa-play"></i> Play Chord</button><button id="clear-keys"><i class="fas fa-broom"></i> Clear Keys</button></div></div></div><div class="panel theory-container"><h2 class="panel-title"><i class="fas fa-book"></i> Music Theory</h2><div class="theory-content"><div class="theory-section"><h3><i class="fas fa-music"></i> Notes</h3><p>The piano keyboard consists of 12 notes in each octave: 7 white keys (natural notes) and 5 black keys (sharps/flats).</p><p>White keys: <span class="highlight">C, D, E, F, G, A, B</span></p><p>Black keys: <span class="highlight">C#/Db, D#/Eb, F#/Gb, G#/Ab, A#/Bb</span></p></div><div class="theory-section"><h3><i class="fas fa-wave-square"></i> Scales</h3><p>A scale is a sequence of musical notes in ascending or descending order. The most common scales are:</p><div class="scale-display"><div class="note">C</div><div class="note">D</div><div class="note">E</div><div class="note">F</div><div class="note">G</div><div class="note">A</div><div class="note">B</div><div class="note">C</div></div><p>C Major Scale: <span class="highlight">C - D - E - F - G - A - B - C</span></p></div><div class="theory-section"><h3><i class="fas fa-guitar"></i> Chords</h3><p>A chord is a group of notes played together. The most basic chords are triads (3 notes).</p><div class="chord-display"><div class="chord"><div class="chord-name">C Major</div><div class="chord-notes">C - E - G</div></div><div class="chord"><div class="chord-name">F Major</div><div class="chord-notes">F - A - C</div></div><div class="chord"><div class="chord-name">G Major</div><div class="chord-notes">G - B - D</div></div></div></div></div></div></div><div class="footer"><p>Music Theory Trainer &copy; 2023 | Learn music theory in a fun and interactive way!</p></div></div><script>document.addEventListener('DOMContentLoaded', function() {const piano = document.getElementById('piano');const scaleSelect = document.getElementById('scale-select');const chordSelect = document.getElementById('chord-select');const playChordBtn = document.getElementById('play-chord');const clearKeysBtn = document.getElementById('clear-keys');const volumeControl = document.getElementById('volume');// Audio context for sound generationlet audioContext;let masterVolume = 0.5;// Initialize audio context on first user interactionfunction initAudio() {if (!audioContext) {audioContext = new (window.AudioContext || window.webkitAudioContext)();}return audioContext;}// Piano key data for one octave (C4 to C5)const keyData = [{ note: 'C4', type: 'white', label: 'C', frequency: 261.63 },{ note: 'C#4', type: 'black', label: 'C#', frequency: 277.18 },{ note: 'D4', type: 'white', label: 'D', frequency: 293.66 },{ note: 'D#4', type: 'black', label: 'D#', frequency: 311.13 },{ note: 'E4', type: 'white', label: 'E', frequency: 329.63 },{ note: 'F4', type: 'white', label: 'F', frequency: 349.23 },{ note: 'F#4', type: 'black', label: 'F#', frequency: 369.99 },{ note: 'G4', type: 'white', label: 'G', frequency: 392.00 },{ note: 'G#4', type: 'black', label: 'G#', frequency: 415.30 },{ note: 'A4', type: 'white', label: 'A', frequency: 440.00 },{ note: 'A#4', type: 'black', label: 'A#', frequency: 466.16 },{ note: 'B4', type: 'white', label: 'B', frequency: 493.88 },{ note: 'C5', type: 'white', label: 'C', frequency: 523.25 }];// Create piano keysfunction createPiano() {// Create white keys firstkeyData.forEach((key, index) => {if (key.type === 'white') {const keyElement = document.createElement('div');keyElement.className = 'white-key';keyElement.dataset.note = key.note;keyElement.dataset.frequency = key.frequency;const label = document.createElement('div');label.className = 'key-label';label.textContent = key.label;keyElement.appendChild(label);keyElement.addEventListener('mousedown', () => playNote(key.frequency, keyElement));keyElement.addEventListener('touchstart', (e) => {e.preventDefault();playNote(key.frequency, keyElement);});piano.appendChild(keyElement);}});// Then create black keys positioned absolutelykeyData.forEach((key, index) => {if (key.type === 'black') {const keyElement = document.createElement('div');keyElement.className = 'black-key';keyElement.dataset.note = key.note;keyElement.dataset.frequency = key.frequency;// Calculate position based on white key positionsconst whiteKeyCount = keyData.filter(k => k.type === 'white' && keyData.indexOf(k) < index).length;// Position black keys between white keyslet position;switch(key.note) {case 'C#4': position = 35; break;case 'D#4': position = 85; break;case 'F#4': position = 185; break;case 'G#4': position = 235; break;case 'A#4': position = 285; break;}keyElement.style.left = `${position}px`;const label = document.createElement('div');label.className = 'key-label';label.textContent = key.label;keyElement.appendChild(label);keyElement.addEventListener('mousedown', () => playNote(key.frequency, keyElement));keyElement.addEventListener('touchstart', (e) => {e.preventDefault();playNote(key.frequency, keyElement);});piano.appendChild(keyElement);}});}// Play a note using Web Audio APIfunction playNote(frequency, keyElement) {// Initialize audio context on first interactionconst context = initAudio();const oscillator = context.createOscillator();const gainNode = context.createGain();oscillator.connect(gainNode);gainNode.connect(context.destination);oscillator.type = 'sine';oscillator.frequency.value = frequency;gainNode.gain.value = masterVolume;// Add visual feedbackkeyElement.classList.add('active');oscillator.start();oscillator.stop(context.currentTime + 0.5);// Remove visual feedback after sound endssetTimeout(() => {keyElement.classList.remove('active');}, 300);}// Highlight keys for a scalefunction highlightScale(scale) {clearHighlights();let notesToHighlight = [];switch(scale) {case 'major':notesToHighlight = ['C4', 'D4', 'E4', 'F4', 'G4', 'A4', 'B4', 'C5'];break;case 'minor':notesToHighlight = ['A4', 'B4', 'C5', 'D5', 'E5', 'F5', 'G5', 'A5'];break;case 'pentatonic':notesToHighlight = ['C4', 'D4', 'E4', 'G4', 'A4', 'C5'];break;case 'blues':notesToHighlight = ['C4', 'Eb4', 'F4', 'Gb4', 'G4', 'Bb4', 'C5'];break;}highlightKeys(notesToHighlight);}// Highlight keys for a chordfunction highlightChord(chord) {clearHighlights();let notesToHighlight = [];let frequencies = [];switch(chord) {case 'cmaj':notesToHighlight = ['C4', 'E4', 'G4'];frequencies = [261.63, 329.63, 392.00];break;case 'cmin':notesToHighlight = ['C4', 'Eb4', 'G4'];frequencies = [261.63, 311.13, 392.00];break;case 'f':notesToHighlight = ['F4', 'A4', 'C5'];frequencies = [349.23, 440.00, 523.25];break;case 'g':notesToHighlight = ['G4', 'B4', 'D5'];frequencies = [392.00, 493.88, 587.33];break;}highlightKeys(notesToHighlight);// Play the chordplayChord(frequencies);}// Play a chord (multiple notes simultaneously)function playChord(frequencies) {// Initialize audio context on first interactionconst context = initAudio();frequencies.forEach(freq => {const oscillator = context.createOscillator();const gainNode = context.createGain();oscillator.connect(gainNode);gainNode.connect(context.destination);oscillator.type = 'sine';oscillator.frequency.value = freq;gainNode.gain.value = masterVolume;oscillator.start();oscillator.stop(context.currentTime + 0.8);});}// Highlight specific keysfunction highlightKeys(notes) {const keys = document.querySelectorAll('.white-key, .black-key');keys.forEach(key => {if (notes.includes(key.dataset.note)) {key.classList.add('active');}});}// Clear all highlightsfunction clearHighlights() {const keys = document.querySelectorAll('.white-key, .black-key');keys.forEach(key => {key.classList.remove('active');});}// Update volumefunction updateVolume() {masterVolume = parseFloat(volumeControl.value);}// Event listenersscaleSelect.addEventListener('change', () => {highlightScale(scaleSelect.value);});chordSelect.addEventListener('change', () => {highlightChord(chordSelect.value);});playChordBtn.addEventListener('click', () => {highlightChord(chordSelect.value);});clearKeysBtn.addEventListener('click', clearHighlights);volumeControl.addEventListener('input', updateVolume);// Initialize the pianocreatePiano();// Highlight the default scale on loadhighlightScale('major');});</script>
</body>
</html>

帮我用P5.js写一个浪漫烟花的粒子特效，鼠标点击触发爆炸，烟花用爱心形状的

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>爱心烟花</title><script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script><style>body {margin: 0;padding: 0;overflow: hidden;background: linear-gradient(to bottom, #0c1445, #1a237e, #4a148c);}</style>
</head>
<body>
<script>
let particles = [];
let hearts = [];class Particle {constructor(x, y, color) {this.x = x;this.y = y;this.vx = random(-5, 5);this.vy = random(-5, 5);this.alpha = 255;this.color = color;this.size = random(2, 6);this.gravity = 0.1;}update() {this.x += this.vx;this.y += this.vy;this.vy += this.gravity;this.alpha -= 3;}display() {noStroke();fill(this.color.levels[0], this.color.levels[1], this.color.levels[2], this.alpha);ellipse(this.x, this.y, this.size);}isDead() {return this.alpha <= 0;}
}class Heart {constructor(x, y, color) {this.x = x;this.y = y;this.originalX = x;this.originalY = y;this.vx = random(-8, 8);this.vy = random(-12, -6);this.alpha = 255;this.color = color;this.size = random(8, 15);this.gravity = 0.2;this.angle = 0;this.rotationSpeed = random(-0.1, 0.1);}update() {this.x += this.vx;this.y += this.vy;this.vy += this.gravity;this.alpha -= 2;this.angle += this.rotationSpeed;}display() {push();translate(this.x, this.y);rotate(this.angle);noStroke();fill(this.color.levels[0], this.color.levels[1], this.color.levels[2], this.alpha);this.drawHeart(0, 0, this.size);pop();}drawHeart(x, y, size) {beginShape();for (let a = 0; a < TWO_PI; a += 0.1) {let px = 16 * pow(sin(a), 3);let py = -(13 * cos(a) - 5 * cos(2*a) - 2 * cos(3*a) - cos(4*a));vertex(x + px * size/10, y + py * size/10);}endShape(CLOSE);}isDead() {return this.alpha <= 0 || this.y > height + 100;}
}function setup() {createCanvas(windowWidth, windowHeight);
}function draw() {background(0, 0, 0, 25);// 更新和显示普通粒子for (let i = particles.length - 1; i >= 0; i--) {particles[i].update();particles[i].display();if (particles[i].isDead()) {particles.splice(i, 1);}}// 更新和显示爱心粒子for (let i = hearts.length - 1; i >= 0; i--) {hearts[i].update();hearts[i].display();if (hearts[i].isDead()) {hearts.splice(i, 1);}}
}function mousePressed() {createFirework(mouseX, mouseY);
}function createFirework(x, y) {// 创建爆炸效果的普通粒子let explosionColor = color(random(200, 255), random(50, 150), random(150, 255));for (let i = 0; i < 50; i++) {particles.push(new Particle(x, y, explosionColor));}// 创建爱心形状的粒子let heartColors = [color(255, 105, 180), // 粉红色color(255, 20, 147),  // 深粉红色color(255, 192, 203), // 粉色color(221, 160, 221), // 梅花色color(219, 112, 147)  // 苍紫罗兰色];for (let i = 0; i < 30; i++) {let heartColor = random(heartColors);hearts.push(new Heart(x, y, heartColor));}
}function windowResized() {resizeCanvas(windowWidth, windowHeight);
}
</script>
</body>
</html>

帮我用P5.j5写一个酷炫的流体画笔粒子特效，鼠标点击拖搜过的地方触发画笔效果

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>流体画笔粒子特效</title><script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script><style>body {margin: 0;padding: 0;overflow: hidden;background: #000;}canvas {display: block;}</style>
</head>
<body>
<script>
let particles = [];
let trails = [];
let lastMouseX, lastMouseY;
let isMousePressed = false;class Particle {constructor(x, y, vx, vy, color) {this.x = x;this.y = y;this.vx = vx + random(-1, 1);this.vy = vy + random(-1, 1);this.alpha = 255;this.color = color;this.size = random(2, 8);this.life = random(30, 80);this.maxLife = this.life;this.gravity = random(-0.1, 0.1);this.friction = 0.98;}update() {this.x += this.vx;this.y += this.vy;this.vx *= this.friction;this.vy *= this.friction;this.vy += this.gravity;this.life--;this.alpha = map(this.life, 0, this.maxLife, 0, 255);this.size = map(this.life, 0, this.maxLife, 0, this.size);}display() {noStroke();let currentAlpha = map(this.life, 0, this.maxLife, 0, this.color.levels[3]);fill(this.color.levels[0], this.color.levels[1], this.color.levels[2], currentAlpha);// 创建光晕效果drawingContext.shadowBlur = 15;drawingContext.shadowColor = this.color.toString();ellipse(this.x, this.y, this.size);drawingContext.shadowBlur = 0;}isDead() {return this.life <= 0;}
}class Trail {constructor(x, y) {this.x = x;this.y = y;this.size = random(5, 15);this.alpha = 200;this.life = 30;this.maxLife = this.life;this.color = color(random(100, 255), random(100, 255), random(100, 255), this.alpha);}update() {this.life--;this.alpha = map(this.life, 0, this.maxLife, 0, 200);this.size = map(this.life, 0, this.maxLife, 0, this.size);}display() {noStroke();fill(this.color.levels[0], this.color.levels[1], this.color.levels[2], this.alpha);// 创建流体效果drawingContext.shadowBlur = 20;drawingContext.shadowColor = this.color.toString();ellipse(this.x, this.y, this.size);drawingContext.shadowBlur = 0;}isDead() {return this.life <= 0;}
}function setup() {createCanvas(windowWidth, windowHeight);colorMode(HSB, 360, 100, 100, 1);noCursor();
}function draw() {// 创建半透明背景产生拖尾效果background(0, 0, 0, 0.1);// 更新和显示粒子for (let i = particles.length - 1; i >= 0; i--) {particles[i].update();particles[i].display();if (particles[i].isDead()) {particles.splice(i, 1);}}// 更新和显示轨迹for (let i = trails.length - 1; i >= 0; i--) {trails[i].update();trails[i].display();if (trails[i].isDead()) {trails.splice(i, 1);}}// 绘制自定义鼠标光标drawCustomCursor();
}function mousePressed() {isMousePressed = true;lastMouseX = mouseX;lastMouseY = mouseY;
}function mouseReleased() {isMousePressed = false;
}function mouseDragged() {if (isMousePressed) {let speed = dist(mouseX, mouseY, lastMouseX, lastMouseY);let angle = atan2(mouseY - lastMouseY, mouseX - lastMouseX);let vx = cos(angle) * map(speed, 0, 50, 1, 10);let vy = sin(angle) * map(speed, 0, 50, 1, 10);// 创建轨迹效果if (frameCount % 2 === 0) {trails.push(new Trail(mouseX, mouseY));}// 根据速度创建不同数量的粒子let particleCount = map(speed, 0, 50, 1, 8);for (let i = 0; i < particleCount; i++) {let hue = map(mouseX, 0, width, 0, 360);let saturation = map(mouseY, 0, height, 70, 100);let brightness = map(speed, 0, 50, 80, 100);let particleColor = color((hue + random(-20, 20)) % 360, saturation, brightness, 0.8);particles.push(new Particle(mouseX, mouseY, vx, vy, particleColor));}lastMouseX = mouseX;lastMouseY = mouseY;}
}function drawCustomCursor() {if (isMousePressed) {// 绘制动态光标let pulse = sin(frameCount * 0.2) * 5 + 10;noStroke();fill(255, 255, 255, 100);ellipse(mouseX, mouseY, pulse);fill(255, 255, 255, 150);ellipse(mouseX, mouseY, pulse * 0.6);} else {// 静态光标stroke(255, 255, 255, 200);strokeWeight(1);noFill();ellipse(mouseX, mouseY, 20);line(mouseX - 10, mouseY, mouseX + 10, mouseY);line(mouseX, mouseY - 10, mouseX, mouseY + 10);}
}function windowResized() {resizeCanvas(windowWidth, windowHeight);
}// 添加一些键盘交互
function keyPressed() {if (key === 'c' || key === 'C') {// 清除画布background(0);particles = [];trails = [];}
}// 添加提示文本
function drawInstructions() {fill(255, 255, 255, 100);textSize(14);textAlign(LEFT);text("拖拽鼠标绘制流体效果 | 按 C 键清除画布", 20, 30);
}
</script>
</body>
</html>