- 세상의 모든 계산기 자유(질문) 게시판 일반 ()
불티 움직임 시뮬레이션 (html5)
-
- 2025.01.18 - 09:07 2025.01.18 - 08:54 1766
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: #1a1a1a;
color: #fff;
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
}
canvas {
background: #1a1a1a;
border: 1px solid #333;
margin: 20px 0;
}
.controls {
background: rgba(0, 0, 0, 0.7);
padding: 20px;
border-radius: 10px;
width: 380px;
}
.control-group {
margin: 15px 0;
}
.control-group label {
display: block;
margin-bottom: 5px;
color: #ffa500;
}
.slider-container {
display: flex;
align-items: center;
gap: 10px;
}
input[type="range"] {
flex: 1;
height: 10px;
-webkit-appearance: none;
background: #333;
border-radius: 5px;
outline: none;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 20px;
height: 20px;
background: #ffa500;
border-radius: 50%;
cursor: pointer;
}
.value-display {
min-width: 50px;
text-align: center;
background: #333;
padding: 5px;
border-radius: 3px;
}
</style>
</head>
<body>
<canvas id="sparkCanvas"></canvas>
<div class="controls">
<div class="control-group">
<label>크기 배율 (Size Scale)</label>
<div class="slider-container">
<input type="range" id="sizeScale" min="0.5" max="3" step="0.1" value="1">
<span class="value-display" id="sizeValue">1</span>
</div>
</div>
<div class="control-group">
<label>온도 배율 (Temperature Scale)</label>
<div class="slider-container">
<input type="range" id="tempScale" min="0.5" max="2" step="0.1" value="1">
<span class="value-display" id="tempValue">1</span>
</div>
</div>
<div class="control-group">
<label>무게 배율 (Weight Scale)</label>
<div class="slider-container">
<input type="range" id="weightScale" min="0.5" max="2" step="0.1" value="1">
<span class="value-display" id="weightValue">1</span>
</div>
</div>
<div class="control-group">
<label>수명 배율 (Life Scale)</label>
<div class="slider-container">
<input type="range" id="lifeScale" min="0.5" max="2" step="0.1" value="1">
<span class="value-display" id="lifeValue">1</span>
</div>
</div>
</div>
<script>
const canvas = document.getElementById('sparkCanvas');
const ctx = canvas.getContext('2d');
// 캔버스 크기 설정
canvas.width = 400;
canvas.height = 600;
// 컨트롤 요소
const controls = {
sizeScale: document.getElementById('sizeScale'),
tempScale: document.getElementById('tempScale'),
weightScale: document.getElementById('weightScale'),
lifeScale: document.getElementById('lifeScale')
};
// 값 표시 요소
const displays = {
sizeValue: document.getElementById('sizeValue'),
tempValue: document.getElementById('tempValue'),
weightValue: document.getElementById('weightValue'),
lifeValue: document.getElementById('lifeValue')
};
// 컨트롤 값 업데이트 함수
Object.keys(controls).forEach(key => {
controls[key].addEventListener('input', (e) => {
displays[key.replace('Scale', 'Value')].textContent = e.target.value;
});
});
class Spark {
constructor() {
this.reset();
}
reset() {
this.x = canvas.width/2 + (Math.random() * 40 - 20);
this.y = canvas.height - 20;
// 슬라이더 값을 반영한 특성 설정
this.baseSize = Math.random() * 3 + 1;
this.size = this.baseSize * parseFloat(controls.sizeScale.value);
this.baseTemp = Math.random() * 0.5 + 0.5;
this.temperature = this.baseTemp * parseFloat(controls.tempScale.value);
this.baseWeight = Math.random() * 0.3 + 0.1;
this.weight = this.baseWeight * parseFloat(controls.weightScale.value);
this.vx = 0;
this.vy = -2 - (this.temperature * 2);
this.baseLife = 1.0;
this.life = this.baseLife * parseFloat(controls.lifeScale.value);
this.color = `rgba(255, ${150 + Math.random() * 105}, 0, ${this.life})`;
}
update() {
// 현재 슬라이더 값으로 특성 업데이트
this.size = this.baseSize * parseFloat(controls.sizeScale.value);
this.temperature = this.baseTemp * parseFloat(controls.tempScale.value);
this.weight = this.baseWeight * parseFloat(controls.weightScale.value);
this.vx += Math.sin(Date.now() * 0.001) * 0.1 * this.weight;
this.x += this.vx;
this.y += this.vy * this.temperature;
this.life -= 0.005 / parseFloat(controls.lifeScale.value);
this.size *= 0.999;
if (this.life <= 0 || this.y < 0 || this.x < 0 || this.x > canvas.width) {
this.reset();
}
this.color = `rgba(255, ${150 + Math.random() * 105}, 0, ${this.life})`;
}
draw() {
ctx.beginPath();
ctx.fillStyle = this.color;
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
ctx.fill();
}
}
const sparks = Array(50).fill().map(() => new Spark());
function animate() {
ctx.fillStyle = 'rgba(26, 26, 26, 0.2)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
sparks.forEach(spark => {
spark.update();
spark.draw();
});
requestAnimationFrame(animate);
}
animate();
</script>
</body>
</html>
-
25
세상의모든계산기 님의 최근 댓글
뉴턴-랩슨 적분 방정식 시각화 v1.0 body { font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; display: flex; flex-direction: column; align-items: center; background: #f8f9fa; padding: 40px 20px; margin: 0; color: #333; } .container { background: white; padding: 40px; border-radius: 20px; box-shadow: 0 15px 35px rgba(0,0,0,0.08); max-width: 900px; width: 100%; } header { border-bottom: 2px solid #f1f3f4; margin-bottom: 30px; padding-bottom: 20px; } h1 { color: #1a73e8; margin: 0 0 10px 0; font-size: 1.8em; } p.subtitle { color: #5f6368; margin: 0; font-size: 1.1em; } .equation-box { background: #f1f3f4; padding: 15px; border-radius: 10px; text-align: center; margin-bottom: 30px; font-size: 1.3em; } canvas { border: 1px solid #e0e0e0; border-radius: 12px; background: #fff; width: 100%; height: auto; display: block; } .controls { margin-top: 30px; display: flex; gap: 15px; align-items: center; justify-content: center; flex-wrap: wrap; } button { padding: 12px 25px; border: none; border-radius: 8px; background: #1a73e8; color: white; cursor: pointer; font-weight: 600; font-size: 1em; transition: all 0.2s; box-shadow: 0 2px 5px rgba(26,115,232,0.3); } button:hover { background: #1557b0; transform: translateY(-1px); box-shadow: 0 4px 8px rgba(26,115,232,0.4); } button:active { transform: translateY(0); } button.secondary { background: #5f6368; box-shadow: 0 2px 5px rgba(0,0,0,0.2); } button.secondary:hover { background: #4a4e52; } .status-badge { background: #e8f0fe; color: #1967d2; padding: 8px 15px; border-radius: 20px; font-weight: bold; font-size: 0.9em; } .explanation { margin-top: 40px; padding: 25px; background: #fff8e1; border-left: 5px solid #ffc107; border-radius: 8px; line-height: 1.8; } .explanation h3 { margin-top: 0; color: #856404; } .math-symbol { font-family: 'Times New Roman', serif; font-style: italic; font-weight: bold; color: #d93025; } .code-snippet { background: #202124; color: #e8eaed; padding: 2px 6px; border-radius: 4px; font-family: monospace; } 📊 Newton-Raphson 적분 방정식 시뮬레이터 미분적분학의 기본 정리(FTC)를 이용한 수치해석 시각화 목표 방정식: ∫₀ᴬ (2√x) dx = 20 을 만족하는 A를 찾아라! 계산 시작 (A 추적) 초기화 현재 반복: 0회 💡 시각적 동작 원리 (Newton-Raphson & FTC) Step 1 (오차 측정): 현재 A까지 쌓인 파란색 면적이 목표치(20)와 얼마나 차이나는지 계산합니다. Step 2 (FTC의 마법): 면적의 변화율(미분)은 그 지점의 그래프 높이 f(A)와 같습니다. Step 3 (보정): 다음 A = 현재 A - (면적 오차 / 현재 높이) 공식을 사용하여 A를 이동시킵니다. 결론: 오차를 현재 높이로 나누면, 오차를 메우기 위해 필요한 가로 길이(ΔA)가 나옵니다. 이 과정을 반복하면 정답에 도달합니다! const canvas = document.getElementById('graphCanvas'); const ctx = canvas.getContext('2d'); const iterText = document.getElementById('iterText'); // 수학 설정 const targetArea = 20; const f = (x) => Math.sqrt(x) * 2; // 피적분 함수 f(x) = 2√x const F = (x) => (4/3) * Math.pow(x, 1.5); // 정적분 결과 F(x) = ∫ 2√x dx = 4/3 * x^(3/2) let A = 1.5; // 초기값 let iteration = 0; let animating = false; // 그래프 드로잉 설정 const scale = 50; const offsetX = 60; const offsetY = 380; function drawGrid() { ctx.strokeStyle = '#f1f3f4'; ctx.lineWidth = 1; ctx.beginPath(); for(let i=0; i 2026 04.11 참값 : A = ±2√5 근사값 : A≈±4.472135954999579392818347 2026 04.10 fx-570 ES 입력 결과 초기값 입력 반복 수식 입력 반복 결과 2026 04.10 파이썬 코드 검증 결과 초기값: 5.0 반복 1회차: 4.5000000000 반복 2회차: 4.4722222222 반복 3회차: 4.4721359558 반복 4회차: 4.4721359550 반복 5회차: 4.4721359550 초기값: 10.0 반복 1회차: 6.0000000000 반복 2회차: 4.6666666667 반복 3회차: 4.4761904762 반복 4회차: 4.4721377913 반복 5회차: 4.4721359550 2026 04.10 감사합니다. 주말 잘 보내세요. 2026 03.06