- 세상의 모든 계산기 자유(질문) 게시판 일반 ()
불티 움직임 시뮬레이션 (html5)
-
- 2025.01.18 - 09:07 2025.01.18 - 08:54 744
<!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
세상의모든계산기 님의 최근 댓글
2번 사진 3개 사진 공통적으로 구석(corner) 에 증상이 있다는 특징이 있네요. 영상 찾아보니 이 가능성이 가장 높은 듯 합니다. https://www.youtube.com/watch?v=zxRBohepzwc ㄴ Liquid Crystal Leakage (액정 누설). ㄴ 손으로 밀어내니 주변으로 밀려나네요. 그래서 점으로 보이기도 하구요. 2025 10.29 500! 의 십진수 근사값 확인 500! = 1.22013682599111006870123878542304692625357434280319284219241358838 × 10^(1134) (참값, 울프람 알파) 2025 10.29 관련 라이브러리 https://allcalc.org/56263 sgn(x) 내장된 부호 함수(signum function)와 달리, 이 함수의 sgn(0)은 0을 반환합니다. 2025 10.29 라이브러리로 사용할 수 있습니다. (제작자 추천) 1. mylib 폴더에 넣기 2. Actions ➡️ library ➡️ refresh libraries 실행 하기 2025 10.29 ChatGPT-5 기호(÷, /, :) 자체는 의미적으로 같은 “나눗셈”을 뜻하지만, 문맥(사람이 쓰는 수학 vs 컴퓨터/프로그래밍)에 따라 해석 우선순위가 달라질 수 있습니다. 🔹 1️⃣ 전통 수학 표기 — ÷, /, : 수학 교과서, 논문, 일반 문서 등에서는 셋 다 의미적으로 “나누기”로 간주됩니다. 즉, 48÷2(9+3), 48/2(9+3), 48:2(9+3) 은 같은 의미로 받아들여야 합니다. 모두 사람의 수학 관행적 해석이 적용되어 48 ÷ 2 × (9+3) = 288 로 처리되죠. 즉, 기호가 바뀌어도 결과는 바뀌지 않습니다. 🔹 2️⃣ 컴퓨터·프로그래밍 문맥에서 / 사용 시 컴퓨터는 “생략된 곱셈(implicit multiplication)”을 따로 구분하지 못합니다. 따라서 다음 두 식은 완전히 다르게 인식됩니다. 표현 파이썬 등에서 해석 결과 48 / 2*(9+3) ((48 / 2) * (9+3)) 288 48 / 2(9+3) ❌ 문법 오류 (생략된 곱셈 인식 불가) — 즉, 컴퓨터 언어에서는 생략된 곱셈이 허용되지 않기 때문에, /는 반드시 명시적 *와 함께 써야 합니다. 🔹 3️⃣ “:” 기호의 경우 현대 수학에서는 “비율”을 나타내는 기호로 쓰입니다. a:b = \frac{a}{b} 따라서 (27 : 3(1+2)3) 같은 표현은 모호하거나 비표준적으로 간주됩니다. 대부분의 경우 계산기로는 입력 자체가 불가능합니다. ✅ 정리 기호 의미 결과 변화 주로 쓰이는 문맥 ÷ 나누기 없음 초중등 수학, 일반 표기 / 나누기 없음 (단, 프로그래밍에서는 생략 곱 불허) 수학/컴퓨터 : 비율 (또는 나누기 의미로 혼용) 보통 계산식에서는 사용 안 함 비, 비율 표기 🔹 결론 48 ÷ 2(9+3), 48/2(9+3), 48:2(9+3) 는 “수학적 의미”로는 동일하게 81로 해석됩니다. 하지만 프로그래밍이나 수식 파서(context) 에서는 /만 유효하고, 생략된 곱은 허용되지 않으며, :는 아예 다른 의미(비율)로 인식됩니다. 2025 10.28