# data[].attributes.headline
몬테카를로 원주율 근사

# data[].attributes.subject
몬테카를로 원주율 근사

# data[].attributes.headline
라이프니츠급수 원주율 근사

# data[].attributes.subject
라이프니츠급수 원주율 근사

# data[].attributes.headline
카페 대기열 시뮬레이션

# data[].attributes.subject
카페 대기열 시뮬레이션

# data[].attributes.attachment_link.title
카페 대기열 시뮬레이션

# data[].attributes.headline
우관영 (골드바흐의 추측 증명)

# data[].attributes.subject
우관영 (골드바흐의 추측 증명)

# data[].attributes.attachment_link.title
우관영 골드바흐의 추측 시뮬레이션

# data[].attributes.headline
카페 대기열 시뮬레이션

# data[].attributes.subject
카페 대기열 시뮬레이션

# data[].attributes.attachment_link.title
카페 대기열 시뮬레이션

# data[].attributes.attachment_link.title
한정우 페르마 마지막 정리 시뮬레이션

# data[].attributes.attachment_link.title
한정우 페르마 마지막 정리 시뮬레이션

# data[].attributes.headline
김효재(RSA암호화와 플로이드워셜알고리즘을 활용한 최단거리탐색)

# data[].attributes.subject
김효재(RSA암호화와 플로이드워셜알고리즘을 활용한 최단거리탐색)

# data[].attributes.attachment_link.title
RSA암호화와 플로이드 워셜 알고리즘을 활용한 최단거리탐색

# data[].attributes.attachment_link.readable_text
ì¬ë ìì¥ ìë®¬ë ì´ì - í¹ì  ëì´ ë³´ê¸°

ð¶ ì¬ë ìì¥ ìë®¬ë ì´ì (í¹ì  ëì´ ë³´ê¸°)

ëì´ë¥¼ ìë ¥íì¸ì (0 ~ 80ì¸): ë³´ê¸°

# data[].attributes.attachment_link.title
대건고김예준.사람의 생장.html

# data[].attributes.attachment_caption
야생동물_먹이사슬_시뮬레이션

# data[].attributes.headline
야생동물 먹이사슬 시뮬레이션

# data[].attributes.subject
야생동물 먹이사슬 시뮬레이션

# data[].attributes.headline
김채현(언어모델의 답변 채택)

# data[].attributes.subject
김채현(언어모델의 답변 채택)

# data[].attributes.headline
야구 승리 예측 시뮬레이션(정해은)

# data[].attributes.subject
야구 승리 예측 시뮬레이션(정해은)

# data[].attributes.headline
중심 극한 정리 시뮬레이션(이민성)

# data[].attributes.subject
중심 극한 정리 시뮬레이션(이민성)

# data[].attributes.body
랜덤 워크 개념 이용

원당고 이가인

# data[].attributes.headline
골밀도 변화 시뮬레이터

# data[].attributes.subject
골밀도 변화 시뮬레이터

# data[].attributes.body
https://codepen.io/pen/

여기 사이트에서 했을 땐 됐었는데 저장하고 크롬에서 작동하니까 시뮬레이션이 안떠요

# data[].attributes.attachment_link.readable_text
ê³¨ë°ë ë³í ìë®¬ë ì´í°

ê³¨ë°ë ë³í ìë®¬ë ì´í°

ë¤ìí ìì¸ì´ ê³¨ë°ëì ë¯¸ì¹ë ìí¥ì ìë®¬ë ì´ìì¼ë¡ íì¸íì¸ì.

ð ìë®¬ë ì´ì ì¤ì 

ì¸êµ¬ ì:

ìë®¬ë ì´ì ê¸°ê° (ë):

ìë®¬ë ì´ì ìë:
ëë¦¼ ë¹ ë¦

ì´ê¸° íê·  ëì´:

ì±ë³ ë¹ì¨ (ë¨ì±%): 50%

ì´ê¸° íê·  T-score:

ðª ìí¥ ìì¸

ì´ëë:
ë®ì

ë³´íµ

ëì

ì¹¼ì ìì·¨:
ë¶ì¡±

ì ì 

ì¶©ë¶

ë¹íë¯¼ D ìì¤:
ë¶ì¡±

ì ì 

ì¶©ë¶

í¡ì°ì í¬í¨

ìì£¼ë:
ì ì

ë³´íµ

ë§ì

ê°ì¡±ë ¥ ìë ì¸êµ¬ í¬í¨

ìë®¬ë ì´ì ìì ì´ê¸°í

ð ìë®¬ë ì´ì ê²°ê³¼

íì¬ ì°ë: 0

ì´ ìë®¬ë ì´ì ì¸êµ¬: 0

íê·  T-score: 0.00

ì ì: 0

ê³¨ê°ìì¦: 0

ê³¨ë¤ê³µì¦: 0

ð§¬ ì¸êµ¬ ì§ë¨ ìê°í

Xì¶: ëì´ | Yì¶: T-score

ì ì (T â¥ -1.0) ê³¨ê°ìì¦ (-2.5 â¤ T < -1.0) ê³¨ë¤ê³µì¦ (T < -2.5)

© 2025 ê³¨ë°ë ë³í ìë®¬ë ì´í°. ëª¨ë  ê¶ë¦¬ ë³´ì .

/* Google Fonts - Poppins ìí¬í¸ */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap'); :root { --primary-color: #3498db; /* ë°ì íëì */ --secondary-color: #607D8B; /* ì´ëì´ íì (ì¬ë ì´í¸) */ --accent-color: #2ecc71; /* ë¹ì */ --text-color: #333; --background-color: #f5f7fa; --card-bg: #ffffff; --border-color: #e0e0e0; --shadow-light: rgba(0, 0, 0, 0.08); --shadow-medium: rgba(0, 0, 0, 0.12); /* ê³¨ë°ë ìí ìì */ --color-normal: #2ecc71; /* ìë©ëë ê·¸ë¦° */ --color-osteopenia: #f39c12; /* ì¤ë ì§ */ --color-osteoporosis: #e74c3c; /* ìë¦¬ìë¦° ë ë */ } body { font-family: 'Poppins', sans-serif; margin: 0; padding: 0; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; background-color: var(--background-color); color: var(--text-color); line-height: 1.6; overflow-x: hidden; } .container { width: 100%; max-width: 1000px; /* ì»¨íì´ë ëë¹ íì¥ */ margin: 40px 20px; padding: 30px; background-color: var(--card-bg); border-radius: 12px; box-shadow: 0 10px 30px var(--shadow-medium); text-align: center; } header { margin-bottom: 40px; } h1 { font-size: 2.8em; color: var(--primary-color); margin-bottom: 10px; font-weight: 700; text-shadow: 1px 1px 2px var(--shadow-light); } .subtitle { font-size: 1.1em; color: #666; margin-bottom: 30px; } h2 { font-size: 1.8em; color: var(--primary-color); margin-top: 30px; margin-bottom: 20px; text-align: left; border-bottom: 2px solid var(--border-color); padding-bottom: 10px; } .card { background-color: var(--card-bg); border-radius: 10px; box-shadow: 0 4px 15px var(--shadow-light); padding: 25px; margin-bottom: 30px; text-align: left; } .control-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* 250px ìµì ëë¹ë¡ ë°ìí ê·¸ë¦¬ë */ gap: 20px; margin-bottom: 20px; } .input-group { display: flex; flex-direction: column; gap: 8px; } .input-group label { font-size: 1em; font-weight: 600; color: var(--text-color); } input[type="number"], input[type="range"], select { width: 100%; padding: 10px 12px; border: 1px solid var(--border-color); border-radius: 6px; font-size: 1em; transition: all 0.3s ease; } input[type="number"]:focus, input[type="range"]:focus, select:focus { border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2); outline: none; } /* Range Input Styling */ input[type="range"] { -webkit-appearance: none; height: 8px; background: var(--border-color); border-radius: 5px; outline: none; margin-top: 5px; } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; background: var(--primary-color); border: 2px solid white; border-radius: 50%; cursor: grab; box-shadow: 0 0 5px var(--shadow-light); transition: background-color 0.2s ease, transform 0.2s ease; } input[type="range"]::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.1); } .speed-labels { display: flex; justify-content: space-between; font-size: 0.85em; color: #777; } .input-group.checkbox-group { flex-direction: row; align-items: center; gap: 10px; padding-top: 10px; /* ì²´í¬ë°ì¤ ì ì¬ë°± */ } .input-group.checkbox-group input[type="checkbox"] { width: auto; margin: 0; } .button-group { display: flex; gap: 15px; margin-top: 25px; justify-content: center; /* ë²í¼ ì¤ì ì ë ¬ */ } .btn { padding: 12px 25px; border: none; border-radius: 8px; font-size: 1.05em; font-weight: 600; cursor: pointer; transition: background-color 0.3s ease, transform 0.2s ease; flex: 1; max-width: 200px; } .btn.primary { background-color: var(--primary-color); color: white; } .btn.primary:hover { background-color: #2980b9; transform: translateY(-2px); } .btn.secondary { background-color: var(--secondary-color); color: white; } .btn.secondary:hover { background-color: #455A64; transform: translateY(-2px); } .btn:disabled { background-color: #cccccc; cursor: not-allowed; transform: none; opacity: 0.7; } /* Results Section */ .results-section h2 { text-align: center; /* ê²°ê³¼ ì ëª© ì¤ì ì ë ¬ */ } .metrics { display: flex; justify-content: space-around; flex-wrap: wrap; gap: 20px; margin-bottom: 25px; } .metric-item { background-color: var(--background-color); padding: 15px 20px; border-radius: 8px; flex: 1; min-width: 150px; text-align: center; box-shadow: inset 0 2px 5px var(--shadow-light); } .metric-item .label { display: block; font-size: 0.9em; color: #666; margin-bottom: 5px; font-weight: 400; } .metric-item .value { font-size: 1.8em; font-weight: 700; color: var(--text-color); letter-spacing: -0.5px; } .metric-item .value.highlighted { color: var(--primary-color); font-size: 2.2em; } .status-counts { display: flex; justify-content: space-around; flex-wrap: wrap; gap: 15px; } .status-item { background-color: var(--background-color); padding: 12px 18px; border-radius: 8px; flex: 1; min-width: 120px; text-align: center; box-shadow: inset 0 1px 3px var(--shadow-light); border-left: 5px solid; /* ìì ë° */ } .status-item.normal { border-left-color: var(--color-normal); } .status-item.osteopenia { border-left-color: var(--color-osteopenia); } .status-item.osteoporosis { border-left-color: var(--color-osteoporosis); } .status-item .label { font-size: 0.85em; color: #666; margin-bottom: 3px; font-weight: 400; } .status-item .value { font-size: 1.5em; font-weight: 700; } .status-item.normal .value { color: var(--color-normal); } .status-item.osteopenia .value { color: var(--color-osteopenia); } .status-item.osteoporosis .value { color: var(--color-osteoporosis); } /* Canvas Section */ .canvas-section { display: flex; flex-direction: column; align-items: center; } .canvas-section h2 { text-align: center; /* ìºë²ì¤ ì ëª© ì¤ì ì ë ¬ */ } #populationCanvas { border: 3px solid var(--primary-color); background-color: #ecf0f1; /* ë°ì ë°°ê²½ */ border-radius: 8px; box-shadow: 0 4px 10px var(--shadow-light); margin-bottom: 20px; } .canvas-info { text-align: center; font-size: 0.95em; color: #777; } .legend { display: flex; justify-content: center; flex-wrap: wrap; gap: 15px; margin-top: 10px; font-size: 0.9em; } .legend .dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 5px; vertical-align: middle; } .dot.normal { background-color: var(--color-normal); } .dot.osteopenia { background-color: var(--color-osteopenia); } .dot.osteoporosis { background-color: var(--color-osteoporosis); } footer { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--border-color); font-size: 0.9em; color: #999; } /* ë°ìí ëìì¸ */ @media (max-width: 768px) { h1 { font-size: 2.2em; } .container { margin: 20px 15px; padding: 20px; } .control-grid { grid-template-columns: 1fr; } /* ëª¨ë°ì¼ìì 1ì´ë¡ ë³ê²½ */ .button-group { flex-direction: column; } .btn { max-width: 100%; } .metrics, .status-counts { flex-direction: column; align-items: center; } .metric-item, .status-item { width: 100%; max-width: 300px; } #populationCanvas { width: 300px; height: 300px; } .speed-labels { max-width: 100%; } } @media (max-width: 480px) { h1 { font-size: 1.8em; } .subtitle { font-size: 1em; } .card { padding: 15px; } h2 { font-size: 1.5em; } input[type="number"], select, .btn { font-size: 0.95em; padding: 10px; } .metric-item .value { font-size: 1.5em; } .metric-item .value.highlighted { font-size: 1.8em; } .status-item .value { font-size: 1.2em; } .legend { font-size: 0.8em; } } document.addEventListener('DOMContentLoaded', () => { const canvas = document.getElementById('populationCanvas'); const ctx = canvas.getContext('2d'); // UI ììë¤ ê°ì ¸ì¤ê¸° const numIndividualsInput = document.getElementById('numIndividuals'); const simDurationInput = document.getElementById('simDuration'); const simSpeedInput = document.getElementById('simSpeed'); const initialAgeInput = document.getElementById('initialAge'); const genderRatioInput = document.getElementById('genderRatio'); const initialTscoreInput = document.getElementById('initialTscore'); const exerciseLevelSelect = document.getElementById('exerciseLevel'); const calciumIntakeSelect = document.getElementById('calciumIntake'); const vitaminDLevelSelect = document.getElementById('vitaminDLevel'); const smokingStatusCheckbox = document.getElementById('smokingStatus'); const alcoholConsumptionSelect = document.getElementById('alcoholConsumption'); const familyHistoryCheckbox = document.getElementById('familyHistory'); const startButton = document.getElementById('startSimulation'); const resetButton = document.getElementById('resetSimulation'); // ê²°ê³¼ íì ììë¤ const currentYearSpan = document.getElementById('currentYear'); const totalIndividualsSpan = document.getElementById('totalIndividuals'); const avgTscoreSpan = document.getElementById('avgTscore'); const normalCountSpan = document.getElementById('normalCount'); const osteopeniaCountSpan = document.getElementById('osteopeniaCount'); const osteoporosisCountSpan = document.getElementById('osteoporosisCount'); const genderRatioValueSpan = document.getElementById('genderRatioValue'); const CANVAS_WIDTH = canvas.width; const CANVAS_HEIGHT = canvas.height; // ìë®¬ë ì´ì ìí ë³ì let individuals = []; // ê° ê°ì¸ì ë°ì´í° (ëì´, T-score, ì±ë³, ê³ ì  ID) let currentSimulationYear = 0; let animationFrameId = null; // requestAnimationFrame ID let isSimulationRunning = false; let targetDurationYears = 0; // ìë®¬ë ì´ì ëª©í ê¸°ê° // ê³¨ë°ë ìíì ë°ë¥¸ ìì ì ì const T_SCORE_COLORS = { normal: '#2ecc71', // T-score >= -1.0 (ë¹ì) osteopenia: '#f39c12', // -2.5 <= T-score < -1.0 (ì£¼í©ì) osteoporosis: '#e74c3c' // T-score < -2.5 (ë¹¨ê°ì) }; // T-score ê¸°ì¤ ìì const T_SCORE_NORMAL_THRESHOLD = -1.0; const T_SCORE_OSTEOPOROSIS_THRESHOLD = -2.5; // ===== í¬í¼ í¨ì ===== // T-scoreì ë°ë¼ ìì ë°í function getTscoreColor(tScore) { if (tScore >= T_SCORE_NORMAL_THRESHOLD) { return T_SCORE_COLORS.normal; } else if (tScore >= T_SCORE_OSTEOPOROSIS_THRESHOLD) { return T_SCORE_COLORS.osteopenia; } else { return T_SCORE_COLORS.osteoporosis; } } // T-scoreë¥¼ ìºë²ì¤ Y ì¢íë¡ ë§¤í (T-score -4.0 ~ +2.0ì ìºë²ì¤ 0 ~ 400ì¼ë¡) // T-score 0 -> ìºë²ì¤ ì¤ê° (200) // T-score +2.0 -> ìºë²ì¤ íë¨ (0) (T-score ëììë¡ ê·¸ëí ìë¨) // T-score -4.0 -> ìºë²ì¤ ìë¨ (400) function mapTscoreToCanvasY(tScore) { const minTscore = -4.0; const maxTscore = 2.0; const normalizedTscore = (tScore - minTscore) / (maxTscore - minTscore); // 0 ~ 1 return CANVAS_HEIGHT * (1 - normalizedTscore); // Yì¶ ë°ì  } // ëì´ë¥¼ ìºë²ì¤ X ì¢íë¡ ë§¤í (ì´ê¸° ëì´ + ê²½ê³¼ ì°ëë¥¼ ìºë²ì¤ 0 ~ 400ì¼ë¡) // íì¬ ìë®¬ë ì´ì ê¸°ê°ì ë°ë¼ ëì ì¼ë¡ Xì¶ ë²ì ì¡°ì  function mapAgeToCanvasX(age, initialAge, simulationDuration) { const minAge = initialAge; const maxAge = initialAge + simulationDuration; const normalizedAge = (age - minAge) / (maxAge - minAge); // 0 ~ 1 return CANVAS_WIDTH * normalizedAge; } // ì´ê¸° ì¸êµ¬ ìì± function generateInitialPopulation() { individuals = []; const num = parseInt(numIndividualsInput.value); const initialAge = parseInt(initialAgeInput.value); const genderRatio = parseInt(genderRatioInput.value) / 100; // ë¨ì± ë¹ì¨ const initialTscore = parseFloat(initialTscoreInput.value); for (let i = 0; i < num; i++) { // ì´ê¸° ëì´: íê·  ì´ê¸° ëì´ +- ë¬´ìì í¸ì°¨ (ì½ê°ì ë¶ì°) const age = initialAge + (Math.random() * 20 - 10); // +- 10ì¸ ì ë ë¶ì° // ì±ë³: ì±ë³ ë¹ì¨ì ë°ë¼ ë¬´ìì í ë¹ const gender = Math.random() < genderRatio ? 'male' : 'female'; // ë¨ì± 0~100% // ì´ê¸° T-score: íê·  ì´ê¸° T-score +- ë¬´ìì í¸ì°¨ (ì½ê°ì ë¶ì°) const tScore = initialTscore + (Math.random() * 2 - 1); // +- 1.0 ì ë ë¶ì° individuals.push({ id: i, age: age, gender: gender, tScore: tScore }); } totalIndividualsSpan.textContent = num.toLocaleString(); } // ìºë²ì¤ ê·¸ë¦¬ê¸° function drawCanvas() { ctx.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT); // ê·¸ë¦¬ë ëë ì¶ ê·¸ë¦¬ê¸° (ì í ì¬í) // ctx.strokeStyle = '#ccc'; // ctx.lineWidth = 0.5; // for (let i = 0; i <= 10; i++) { // ctx.beginPath(); // ctx.moveTo(0, i * CANVAS_HEIGHT / 10); // ctx.lineTo(CANVAS_WIDTH, i * CANVAS_HEIGHT / 10); // ctx.stroke(); // ctx.beginPath(); // ctx.moveTo(i * CANVAS_WIDTH / 10, 0); // ctx.lineTo(i * CANVAS_WIDTH / 10, CANVAS_HEIGHT); // ctx.stroke(); // } // ê° ì  ê·¸ë¦¬ê¸° individuals.forEach(individual => { const x = mapAgeToCanvasX(individual.age, parseInt(initialAgeInput.value), targetDurationYears); const y = mapTscoreToCanvasY(individual.tScore); const color = getTscoreColor(individual.tScore); ctx.beginPath(); ctx.arc(x, y, 2.5, 0, Math.PI * 2); // ì ì í¬ê¸° 2.5 ctx.fillStyle = color; ctx.fill(); }); } // ê²°ê³¼ ìë°ì´í¸ function updateResults() { let normalCount = 0; let osteopeniaCount = 0; let osteoporosisCount = 0; let totalTscore = 0; individuals.forEach(individual => { totalTscore += individual.tScore; if (individual.tScore >= T_SCORE_NORMAL_THRESHOLD) { normalCount++; } else if (individual.tScore >= T_SCORE_OSTEOPOROSIS_THRESHOLD) { osteopeniaCount++; } else { osteoporosisCount++; } }); currentYearSpan.textContent = currentSimulationYear; avgTscoreSpan.textContent = (totalTscore / individuals.length).toFixed(2); normalCountSpan.textContent = normalCount.toLocaleString(); osteopeniaCountSpan.textContent = osteopeniaCount.toLocaleString(); osteoporosisCountSpan.textContent = osteoporosisCount.toLocaleString(); } // ê³¨ë°ë ë³í íë¥  ëª¨ë¸ (íµì¬ ë¡ì§) function calculateTscoreChange(individual) { let change = -0.01; // ê¸°ë³¸ì ì¼ë¡ ëì´ì ë°ë¥¸ ìì°ì ì¸ ê°ì (-0.01 / ì°ë) // ===== ìí¥ ìì¸ ì ì© (ê°ì¤ì¹ ë° íë¥  ì¡°ì ) ===== const exerciseEffect = { 'low': -0.01, 'medium': 0.00, 'high': 0.01 }; // T-score ë³í const calciumEffect = { 'deficient': -0.01, 'adequate': 0.00, 'sufficient': 0.01 }; const vitaminDEffect = { 'deficient': -0.01, 'adequate': 0.00, 'sufficient': 0.01 }; const alcoholEffect = { 'low': 0.00, 'medium': -0.005, 'high': -0.01 }; change += exerciseEffect[exerciseLevelSelect.value]; change += calciumEffect[calciumIntakeSelect.value]; change += vitaminDEffect[vitaminDLevelSelect.value]; change += alcoholEffect[alcoholConsumptionSelect.value]; if (smokingStatusCheckbox.checked) { // í¡ì°ìë ì¶ê° ê°ì íë¥  if (Math.random() < 0.3) change -= 0.02; // 30% íë¥ ë¡ -0.02 ì¶ê° ê°ì } if (familyHistoryCheckbox.checked) { // ê°ì¡±ë ¥ ìë ê²½ì° ì¶ê° ê°ì íë¥  if (Math.random() < 0.2) change -= 0.01; // 20% íë¥ ë¡ -0.01 ì¶ê° ê°ì } // ì±ë³ ìí¥ (ì¬ì±ì´ ë¨ì±ë³´ë¤ íê²½ ì´í ê³¨ë°ë ê°ì ê°ìí) if (individual.gender === 'female' && individual.age >= 50) { change -= 0.005; // ì¬ì±ì 50ì¸ ì´í ì¶ê° ê°ì ê²½í¥ } // ë¬´ìì ë³ëì± ì¶ê° (ëª¬íì¹´ë¥¼ë¡ íµì¬) change += (Math.random() * 0.02 - 0.01); // -0.01 ~ +0.01 ì¬ì´ì ë¬´ìì ë³ë return change; } // ìë®¬ë ì´ì í ì¤í ì§í (1ë) function simulateStep() { if (currentSimulationYear >= targetDurationYears) { isSimulationRunning = false; startButton.disabled = false; cancelAnimationFrame(animationFrameId); return; } individuals.forEach(individual => { individual.age += 1; // ëì´ 1ë ì¦ê° individual.tScore += calculateTscoreChange(individual); // T-scoreê° ëë¬´ ê·¹ë¨ì ì¼ë¡ ë³íì§ ìëë¡ ì í individual.tScore = Math.max(-4.0, Math.min(2.0, individual.tScore)); }); currentSimulationYear++; drawCanvas(); updateResults(); // ìë ì¡°ì  const speedValue = parseInt(simSpeedInput.value); // 1 (ëë¦¼) ~ 100 (ë¹ ë¦) // 100 - speedValue + 10 (ëë¦´ìë¡ í° ê°, ë¹ ë¥¼ìë¡ ìì ê°) // 100: 10ms ì§ì° (ê±°ì ì¦ì) // 1: 110ms ì§ì° (ëë¦¼) const delay = Math.max(10, 110 - speedValue); // ìµì 10ms ì§ì° setTimeout(() => { if (isSimulationRunning) { animationFrameId = requestAnimationFrame(simulateStep); } }, delay); } // ===== ì´ë²¤í¸ ë¦¬ì¤ë ===== startButton.addEventListener('click', () => { if (isSimulationRunning) return; // ì´ë¯¸ ì¤í ì¤ì´ë©´ ë¬´ì const num = parseInt(numIndividualsInput.value); const duration = parseInt(simDurationInput.value); if (isNaN(num) || num < 100 || isNaN(duration) || duration < 5) { alert("ì í¨í ì¸êµ¬ ì (ìµì 100ëª) ë° ê¸°ê° (ìµì 5ë)ì ìë ¥í´ì£¼ì¸ì."); return; } targetDurationYears = duration; currentSimulationYear = 0; isSimulationRunning = true; startButton.disabled = true; resetButton.disabled = false; generateInitialPopulation(); // ìë¡ì´ ì¸êµ¬ ìì± drawCanvas(); // ì´ê¸° ìí ê·¸ë¦¬ê¸° updateResults(); // ì´ê¸° ê²°ê³¼ ìë°ì´í¸ simulateStep(); // ìë®¬ë ì´ì ìì }); resetButton.addEventListener('click', () => { if (animationFrameId) { cancelAnimationFrame(animationFrameId); } isSimulationRunning = false; startButton.disabled = false; resetButton.disabled = true; individuals = []; currentSimulationYear = 0; drawInitialState(); // ìºë²ì¤ ì´ê¸° ìíë¡ ë³µêµ¬ updateResults(); // ê²°ê³¼ ì´ê¸°í }); // ì±ë³ ë¹ì¨ ì¬ë¼ì´ë ê° íì ìë°ì´í¸ genderRatioInput.addEventListener('input', () => { genderRatioValueSpan.textContent = `${genderRatioInput.value}%`; }); // ì´ê¸°í í¨ì (íì´ì§ ë¡ë ì í¸ì¶) function initialize() { drawInitialState(); updateResults(); // ì´ê¸° ê²°ê³¼ ê° '0'ì¼ë¡ ì¤ì  resetButton.disabled = true; // ì´ê¸°ìë ë¦¬ì ë²í¼ ë¹íì±í genderRatioValueSpan.textContent = `${genderRatioInput.value}%`; // ì´ê¸° ì±ë³ ë¹ì¨ ê° íì } initialize(); // íì´ì§ ë¡ë ì ì´ê¸°í });

# data[].attributes.attachment_link.title
골밀도(수치해석학)...

# data[].attributes.headline
건물이 기울어진 정도에 따른 안성 시뮬레이션

# data[].attributes.subject
건물이 기울어진 정도에 따른 안성 시뮬레이션

# data[].attributes.attachment_link.title
건물 안정성 시뮬레이션

# data[].attributes.body
링크를 올려주세요. 제목은 이름!

# data[].attributes.attachment_link.title
‎Gemini - 원주율의 근삿값을 ㅜ하는 시뮬레이션을 제작하는 프로젝트 요구서를 만들자.

# data[].attributes.attachment_link.title
‎Gemini - 원주율의 근삿값을 구하는 시뮬레이션을 제작하는 프로젝트 요구서를 만들어줘
몬테카를로 방법으로 원이랑 사각으로 만들거고, 점개수 조정 사용자가 마음대로 바꿀수 있고 이쁘고 디자인 적으로 예술적이고 효과도 나오게 해줘

# data[].attributes.attachment_link.title
‎Gemini - 원주율 근사 시뮬레이션 만드는 기획서 짜자

# data[].attributes.attachment_link.title
‎Gemini - 몬테카를로 원주율 시뮬레이터 초안

# data[].attributes.attachment_link.title
‎Gemini - 원주율 근삿값 시뮬레이션 요구서 작성

# data[].attributes.attachment_link.title
‎Gemini - 갈톤 보드 시뮬레이션 웹페이지 제작

# data[].attributes.attachment_link.title
‎Gemini - Crane Game Probability Simulator Code

# data[].attributes.body
중력 시뮬레이션