- 세상의 모든 계산기 자유(질문) 게시판 일반 ()
불티 움직임 시뮬레이션 (html5)
-
- 2025.01.18 - 09:07 2025.01.18 - 08:54 1055
<!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
세상의모든계산기 님의 최근 댓글
진짜 색약 안경은 비싸서 살 생각은 없고, 알리에서 싸구려 구매해서 테스트 해 봤습니다. 프로그램과 비슷한 효과가 있고, (프로그램과 비교해서) 알리 싸구려 렌즈가 - 숫자 구분이 아주 약간 더 잘 되고 - 붉은 색상이 더 밝습니다. 채도가 높다고 해야하는 것 같네요. 주의할 점은 알리 색약 안경은 일상용으로는 절대 사용 불가입니다. - 내부 빛반사 방지 코팅이 없어서 내 눈알이 렌즈에 비치고, 그래서 실제로 보여야 할 것과 섞여 보입니다. - 필터 코팅도 최악이라서 중심부(=마젠타) 주변부(=노랑)으로 서로 다르게 색이 들어옵니다. 전반적으로 그라데이션 발생. - 외부에서 봤을 때 렌즈색이 튀기 때문에, 티가 많이 납니다. - 색 구분 면에서는 도움이 될 수도 있지만, 녹색(특정 파장)이 차단되어 LED 신호등의 녹색이 잘 안보일 수 있습니다. 2025 12.24 교점이 2개 이상일때 모든 값을 구하는 법 계산기마다 가능/불가능이 갈릴 수도 있습니다. ㄴ fx-570 의 solve 는 무조건 한번에 하나씩 찾습니다. 따라서, 2차 3차 방정식처럼 규격화된 수식은 solve 대신 EQN 모드에서 답을 구하는게 좋습니다. ㄴ TI-nspire 같은 CAS 계산기의 solve 는 수식에 따라서 여러개가 한꺼번에 찾아지기도 합니다. https://allcalc.org/3448 ㄴ fx-9860G 의 solve는 무조건 1개, solveN 는 수식에 따라 여러개가 찾아질 수 있습니다. https://allcalc.org:443/board_casio/6005#comment_15889 가능하다면, 불확실할때는 그래프로 확인하세요. 2025 12.16 T가 410인 해를 찾는 방법 -> 초기값을 입력하세요. [공학용 계산기] 공학용 계산기의 꽃? solve (솔브) 기능 이해하기 (Newton-Raphson 법, 뉴튼법) https://allcalc.org/11532 2025 12.16 참고 - [공학용 계산기] 정적분 계산 속도 벤치마크 비교 https://allcalc.org/9677 2025 12.11 다른 계산기의 경우와 비교 1. TI-nspire CAS ㄴ CAS 계산기는 가능한 경우 부정적분을 먼저하고, 그 값에 구간을 대입해 최종값을 얻습니다. ㄴ 부정적분이 불가능할 때는 수치해석적 방법을 시도합니다. 2. CASIO fx-991 ES Plus ㄴ CASIO 계산기의 경우, 적분할 함수에 따라 시간이 달라지는 것으로 알고 있는데, 정밀도를 확보할 별도의 알고리즘을 채택하고 있는 것이 아닐까 생각되네요. 2025 12.11