2026-07-03

<!DOCTYPE html>

<html lang="ko">

<head>

<meta charset="UTF-8">

<title>빛의 합성 시뮬레이터 (전체 색상 변경)</title>

<style>

    body { background-color: #1a1a1a; color: white; text-align: center; font-family: sans-serif; padding-top: 40px; user-select: none; }

    

    /* 무대 스타일 */

    #stage { width: 420px; height: 320px; background-color: #000; margin: 0 auto; border: 3px solid #444; border-radius: 15px; display: flex; justify-content: center; align-items: center; position: relative; }

    

    /* [핵심] 코드로 만든 곰돌이 그래픽 디자인 */

    .bear-container { width: 160px; height: 200px; position: relative; }

    .bear-part { position: absolute; background-color: rgb(0,0,0); border-radius: 50%; transition: background-color 0.2s, box-shadow 0.2s; }

    

    /* 귀, 얼굴, 몸통, 팔다리 위치 조정 */

    .ear-l { width: 40px; height: 40px; top: 10px; left: 10px; }

    .ear-r { width: 40px; height: 40px; top: 10px; right: 10px; }

    .head  { width: 110px; height: 95px; top: 30px; left: 25px; border-radius: 48%; }

    .body  { width: 120px; height: 110px; bottom: 15px; left: 20px; border-radius: 50% 50% 45% 45%; }

    .arm-l { width: 35px; height: 60px; top: 100px; left: 0px; transform: rotate(30deg); }

    .arm-r { width: 35px; height: 60px; top: 100px; right: 0px; transform: rotate(-30deg); }

    .leg-l { width: 45px; height: 45px; bottom: 0px; left: 15px; }

    .leg-r { width: 45px; height: 45px; bottom: 0px; right: 15px; }

    

    /* 곰돌이 눈코입 고정 장치 */

    .face-detail { position: absolute; background: #000; border-radius: 50%; z-index: 10; }

    .eye-l { width: 8px; height: 10px; top: 65px; left: 60px; }

    .eye-r { width: 8px; height: 10px; top: 65px; right: 60px; }

    .snout { width: 26px; height: 20px; top: 80px; left: 67px; background: rgba(255,255,255,0.4); }

    /* 버튼 상자 레이아웃 */

    .box { margin-top: 25px; display: inline-block; background: #2a2a2a; padding: 15px; border-radius: 10px; margin-right: 10px; }

    button { padding: 10px 18px; margin: 4px; font-weight: bold; border-radius: 6px; border: 2px solid transparent; cursor: pointer; font-size: 14px; }

    .active { border-color: white; box-shadow: 0 0 10px white; }

</style>

</head>

<body>

<h2>🐻 곰돌이 전체 색이 변하는 빛의 합성 무대 💡</h2>

<p>버튼을 클릭하면 테두리가 아니라 곰돌이 몸 전체 색상이 완전히 꽉 차서 바뀝니다!</p>



<div id="stage">

    <div class="bear-container">

        <div class="bear-part ear-l"></div>

        <div class="bear-part ear-r"></div>

        <div class="bear-part arm-l"></div>

        <div class="bear-part arm-r"></div>

        <div class="bear-part leg-l"></div>

        <div class="bear-part leg-r"></div>

        <div class="bear-part body"></div>

        <div class="bear-part head"></div>

        <div class="face-detail eye-l"></div>

        <div class="face-detail eye-r"></div>

        <div class="face-detail snout"></div>

    </div>

</div>

<br>

<div class="box">

    <div><b>[1] 곰돌이 원래 색 클릭</b></div>

    <button id="b-white" style="background:#fff; color:#000;" onclick="clickBear('white')">흰색 곰</button>

    <button id="b-red" style="background:#ff4444; color:#fff;" onclick="clickBear('red')">빨간 곰</button>

    <button id="b-green" style="background:#2ecc71; color:#fff;" onclick="clickBear('green')">초록 곰</button>

    <button id="b-blue" style="background:#3498db; color:#fff;" onclick="clickBear('blue')">파란 곰</button>

</div>

<div class="box">

    <div><b>[2] 조명 빛 클릭</b></div>

    <button id="l-red" style="background:#ff4444; color:#fff;" onclick="clickLight('red')">빨간 조명</button>

    <button id="l-green" style="background:#2ecc71; color:#fff;" onclick="clickLight('green')">초록 조명</button>

    <button id="l-blue" style="background:#3498db; color:#fff;" onclick="clickLight('blue')">파란 조명</button>

</div>

<script>

    // 기본값 세팅: 파란 곰돌이 + 초록 조명 (시작하자마자 몸 전체가 청록색이 됨)

    let bear = 'blue';

    let light = 'green';

    const rgb = {

        white: {r:255, g:255, b:255},

        red:   {r:255, g:0,   b:0},

        green: {r:0,   g:255, b:0},

        blue:  {r:0,   g:0,   b:255}

    };

    function clickBear(color) { bear = color; update(); }

    function clickLight(color) { light = color; update(); }

    function update() {

        // 버튼 활성화 스타일 제어

        document.querySelectorAll('button').forEach(btn => btn.classList.remove('active'));

        document.getElementById('b-' + bear).classList.add('active');

        document.getElementById('l-' + light).classList.add('active');

        const bRGB = rgb[bear];

        const lRGB = rgb[light];

        // 조명 색에 따라 무대 배경 은은하게 색 채우기

        document.getElementById('stage').style.backgroundColor = `rgba(${lRGB.r}, ${lRGB.g}, ${lRGB.b}, 0.25)`;

        let r = 0, g = 0, b = 0;

        if (bear === 'white') {

            // 흰색 곰은 비추는 조명 색으로 전체가 고스란히 바뀜!

            r = lRGB.r; g = lRGB.g; b = lRGB.b;

        } else {

            // 빛의 합성 알고리즘 (곰돌이 색 성분 + 조명 색 성분)

            r = Math.min(bRGB.r + lRGB.r, 255);

            g = Math.min(bRGB.g + lRGB.g, 255);

            b = Math.min(bRGB.b + lRGB.b, 255);

        }

        // [핵심] 곰돌이 조각 전체(.bear-part)를 찾아서 계산된 색상으로 빈틈없이 채우기

        const finalColor = `rgb(${r}, ${g}, ${b})`;

        const glowEffect = `0 0 25px rgba(${r}, ${g}, ${b}, 0.8)`;

        

        document.querySelectorAll('.bear-part').forEach(part => {

            part.style.backgroundColor = finalColor;

            part.style.boxShadow = glowEffect;

        });

    }

    // 초기 화면 실행

    update();

</script>

</body>

</html>