REPOST dr TETANGGA!
TECHNICAL ASPECT in ZIP2
note:
View on Desktop Browser for Viewer-Friendly Experience

on
by ChatGPT
====================

Algoritma ZIP2 dirancang untuk optimasi path planning dengan menyeimbangkan jarak tempuh dan kehalusan belokan (turn smoothness)

*Click here for Link to "NARRATING" Article of Zip2 !

ZIP2 Path Visualizer - Light Theme

ZIP2 Analysis Simulation

*bug exist

POSITION: (0,0)

code

S O U R C E  C O D E

<!doctype html>
<html lang="en">
        <head>
                <meta charset="UTF-8" />
                <title>ZIP2 Path Visualizer - Light Theme</title>
                <style>
                        :root {
                                --p: #06b6d4;
                                --bg: #ffffff;
                                --box: #f8fafc;
                                --bd: #f1f5f9;
                                --txt: #334155;
                        }
                        body {
                                font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
                                background: var(--bg);
                                color: var(--txt);
                                margin: 0;
                                padding: 30px 15px;
                                line-height: 1.5;
                                -webkit-font-smoothing: antialiased;
                        }
                        .main {
                                max-width: 750px;
                                margin: 0 auto;
                        }
                        .sim {
                                background: var(--box);
                                border: 2px solid var(--bd);
                                border-radius: 30px;
                                padding: 30px;
                                box-shadow: 0 15px 35px -10px rgba(0, 0, 0, 0.05);
                        }
                        .grid {
                                display: grid;
                                grid-template-columns: repeat(15, 1fr);
                                gap: 5px;
                                margin: 25px 0;
                        }
                        .c {
                                aspect-ratio: 1;
                                border: 1px solid var(--bd);
                                border-radius: 6px;
                                background: #fff;
                                font-size: 10px;
                                font-weight: 800;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                position: relative;
                                transition: 0.2s;
                        }
                        .w {
                                background: #e2e8f0;
                                color: #cbd5e1;
                                border-color: #cbd5e1;
                        }
                        .s {
                                background: #eff6ff;
                                color: #3b82f6;
                                border-color: #dbeafe;
                        }
                        .g {
                                background: #fefce8;
                                color: #ca8a04;
                                border-color: #fef08a;
                        }
                        .tr::after {
                                content: "";
                                width: 4px;
                                height: 4px;
                                background: var(--p);
                                border-radius: 50%;
                                opacity: 0.4;
                        }
                        .rb {
                                background: var(--p);
                                border: none;
                                z-index: 5;
                                transform: scale(1.1);
                                border-radius: 8px;
                                box-shadow: 0 5px 15px rgba(6, 182, 212, 0.3);
                        }
                        .rb svg {
                                width: 65%;
                                height: 65%;
                                fill: #fff;
                        }
                        .ctrl {
                                display: flex;
                                gap: 10px;
                                justify-content: center;
                                margin-bottom: 25px;
                                flex-wrap: wrap;
                        }
                        button {
                                padding: 12px 28px;
                                border: none;
                                background: #1e293b;
                                color: #fff;
                                border-radius: 12px;
                                cursor: pointer;
                                font-weight: bold;
                                transition: 0.2s;
                                font-size: 13px;
                        }
                        button:hover {
                                background: #0f172a;
                                transform: translateY(-1px);
                        }
                        .st {
                                text-align: center;
                                font-family: monospace;
                                background: #fff;
                                padding: 16px;
                                border-radius: 18px;
                                border: 1px solid var(--bd);
                                font-weight: 800;
                                color: #64748b;
                                font-size: 14px;
                        }
                        h2 {
                                font-weight: 900;
                                letter-spacing: -0.05em;
                                margin: 0 0 10px 0;
                                font-size: 24px;
                                color: #0f172a;
                        }
                </style>
        </head>
        <body>
                <div class="main">
                        <h2>ZIP2 Analysis Simulation</h2>
                        <div class="sim">
                                <div class="ctrl">
                                        <button onclick="st()">START</button>
                                        <button onclick="ps()">PAUSE</button>
                                        <button onclick="rs()">RESET</button>
                                </div>
                                <div class="grid" id="gd"></div>
                                <div class="st" id="sb">POSITION: (0,0)</div>
                        </div>
                </div>
                <script>
                        const m = [
                                "S...#.....#....",
                                ".##.#.#.#.#.#..",
                                "......#.....#.",
                                "#.###...#.#....",
                                ".......###...#.",
                                "#.#......#...",
                                ".#...###.#.....",
                                "............#.",
                                "#.#.#.#.#.#.#..",
                                "..............G",
                        ];
                        const p = [
                                [0, 0],
                                [1, 0],
                                [2, 0],
                                [3, 0],
                                [3, 1],
                                [3, 2],
                                [4, 2],
                                [5, 2],
                                [6, 2],
                                [7, 2],
                                [7, 3],
                                [8, 3],
                                [9, 4],
                                [10, 4],
                                [11, 4],
                                [12, 4],
                                [13, 5],
                                [13, 6],
                                [13, 7],
                                [13, 8],
                                [13, 9],
                                [14, 9],
                        ];
                        let i = 0,
                                t = null;
                        const gd = document.getElementById("gd"),
                                sb = document.getElementById("sb");
                        /* SVG ROBOT ICON TO PREVENT LOADING ISSUES */
                        const rbIcon =
                                '<svg viewBox="0 0 24 24"><path d="M12 8V4m0 0H9m3 0h3M7 12V9a5 5 0 0 1 10 0v3m3 8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v5Z"/><circle cx="9" cy="16" r="1"/><circle cx="15" cy="16" r="1"/></svg>';
                        function bg() {
                                gd.innerHTML = "";
                                m.forEach((r, y) =>
                                        r.split("").forEach((c, x) => {
                                                const d = document.createElement("div");
                                                d.className = "c";
                                                d.id = "x" + x + "y" + y;
                                                if (c === "#") d.classList.add("w");
                                                if (c === "S") {
                                                        d.classList.add("s");
                                                        d.innerText = "S";
                                                }
                                                if (c === "G") {
                                                        d.classList.add("g");
                                                        d.innerText = "G";
                                                }
                                                gd.appendChild(d);
                                        })
                                );
                        }
                        function up() {
                                if (i >= p.length) {
                                        clearInterval(t);
                                        t = null;
                                        sb.innerText = "SUCCESS: GOAL REACHED";
                                        return;
                                }
                                document.querySelectorAll(".rb").forEach((r) => {
                                        r.classList.remove("rb");
                                        r.classList.add("tr");
                                        r.innerHTML = "";
                                });
                                const cp = p[i];
                                const c = document.getElementById("x" + cp[0] + "y" + cp[1]);
                                if (c) {
                                        c.classList.add("rb");
                                        c.innerHTML = rbIcon;
                                }
                                sb.innerText = "POSITION: (" + cp[0] + "," + cp[1] + ")";
                                i++;
                        }
                        function st() {
                                if (!t) t = setInterval(up, 400);
                        }
                        function ps() {
                                clearInterval(t);
                                t = null;
                        }
                        function rs() {
                                ps();
                                i = 0;
                                bg();
                                sb.innerText = "POSITION: (0,0)";
                        }
                        bg();
                </script>
        </body>
</html>

Comments

Post a Comment