p5.js Web Editor | Insertion Sort

xxxxxxxxxx
<!DOCTYPE html>
<html>
​
<head>
    <title>Insertion Sort</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.min.js"></script>
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/addons/p5.dom.min.js"></script> -->
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/addons/p5.sound.min.js"></script> -->
​
    <script src="./sketch.js"></script>
    <style>
        html,
        body {
            background-color: #333;
            color: #eee;
            margin: 10px;
            margin-top: 5px;
            margin-bottom: 5px;
            font-family: Arial, Helvetica, sans-serif;
        }
​
        a {
            color: rgb(97, 84, 63);
        }
​
        /* #canvasContainer {
            margin-left: auto;
            margin-right: auto;
        } */
​
        .settingsDiv, #heading{
            margin-left: auto;
            margin-right: auto;
            width: fit-content;
        }
​
        canvas {
            display: block;
            margin-bottom: 10px;
            margin-left: auto;
            margin-right: auto;
        }
​
        .Btn {
            margin-left: 30px;
            margin-right: 30px;
            color: #494949 !important;
            text-transform: uppercase;
            /* text-decoration: none; */
            background: #ffffff;
            /* padding: 15px; */
            border: 3px solid #494949 !important;
            display: inline-block;
            transition: all 0.4s ease 0s;
        }
​
        .Btn:hover {
            /* color: #ffffff !important; */
            background: rgba(255, 215, 0, 20);
            border-color: #474747 !important;
            transition: all 0.4s ease 0s;
        }
​
        .slider,
        .sliderValue {
            vertical-align: -2px;
        }
​
        .sliderValue {
            overflow: hidden;
            display: inline-block;
            margin-left: 4px;
            text-align: center;
            width: 30px;
            background: #222;
            border-radius: 3px;
            font-size: 12px;
            /* line-height: 16px; */
        }
​
        .sliderLabel,
        .checkbox {
            margin: 0 8px 0 0;
            display: inline-block;
        }
​
        .sliderLabel{
            width: 100px;
        }
​
        .sliderValue,
        .checkbox {
            margin-right: 20px;
        }
​
        .checkbox input {
            margin-right: 8px;
        }
    </style>
</head>
​
<body>
    <h1>Insertion Sort</h1>
    <h2 id="heading"></h2>
    <div id="canvasContainer"></div>
</body>
​
</html>
Cookies

Sketch Files

Console

Preview
