SortingVisualizer/visualizer.js at main · TilakTejani/SortingVisualizer · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
class Visualizer{
    static async prepareCanvas(){
        ctx.canvas.height = window.innerHeight
        ctx.clearRect(0, 0, canvas.width, canvas.height)
        let begin = 60, size = 15
        this.writeText(ctx, "Comparisons : " + sample.comparisons, 10, begin, size)
        this.writeText(ctx, "Swapping : " + sample.swaps, 10, begin + size, size)
    }

    static async writeText(ctx, text, x, y, size){
        ctx.beginPath()
        ctx.font = size + "px Arial";
        ctx.fillStyle = "#a0d2eb"
        ctx.strokeStyle = "orange"
        ctx.fillText(text, x, y);
        ctx.fill()
        ctx.stroke()
    }

    static async barVisualizer(ctx, sample){
        await this.prepareCanvas()

        let hUnit = ctx.canvas.height / sample.nums
        let wUnit = ctx.canvas.width / sample.nums
        for(let i = 0 ; i < sample.nums ; ++i){
            ctx.beginPath()
            ctx.fillStyle = "#a0d2eb"
            ctx.strokeStyle = sample.obj[i].color
            ctx.lineWidth = 3
            ctx.rect(
                i * wUnit,
                ctx.canvas.height - sample.obj[i].key * hUnit,
                wUnit,
                hUnit * sample.obj[i].key
                )
                ctx.fill()
                ctx.stroke()

            }
        await new Promise(resolve => setTimeout(resolve, 5/sample.nums));
    }

    static async pointVisualizer(ctx, sample){
        await this.prepareCanvas()

        let radius = ctx.canvas.height / sample.nums / 2
        let hUnit = (ctx.canvas.height - radius) / sample.nums
        let wUnit = ctx.canvas.width /sample.nums
        for(let i = 0 ; i < sample.nums ; ++i){
            ctx.beginPath()
            ctx.fillStyle = "#a0d2eb"
            ctx.strokeStyle = sample.obj[i].color
            ctx.lineWidth = 3
            ctx.arc(
                radius + i * (wUnit),
                radius/2 + ctx.canvas.height - sample.obj[i].key * hUnit,
                radius,
                0,
                2 * Math.PI
                )
                ctx.fill()
                ctx.stroke()
            }
        await new Promise(resolve => setTimeout(resolve, 5/sample.nums));
    }
    static async pointVisualizer(ctx, sample){
        await this.prepareCanvas()

        let radius = ctx.canvas.height / sample.nums / 2
        let hUnit = (ctx.canvas.height) / sample.nums
        let wUnit = (ctx.canvas.width + 2 * radius) /sample.nums
        for(let i = 0 ; i < sample.nums ; ++i){
            ctx.beginPath()
            ctx.fillStyle = "#a0d2eb"
            ctx.strokeStyle = sample.obj[i].color
            ctx.lineWidth = 3
            ctx.arc(
                radius +  wUnit * i,
                ctx.canvas.height - sample.obj[i].key * hUnit + radius,
                radius,
                0,
                2 * Math.PI
                )
                ctx.fill()
                ctx.stroke()
            }
        await new Promise(resolve => setTimeout(resolve, 5/sample.nums));
    }
    static async coloredTriangleVisualizer(ctx, sample){
        await this.prepareCanvas()

        ctx.save()
        ctx.translate(ctx.canvas.width/ 2, ctx.canvas.height/2)

        ctx.lineWidth = 1
        let radius = (canvas.height - 30 )/ 2

        for(let i = 1 ; i < sample.nums ; ++i){
            let angle1 = lerp(0, Math.PI * 2, (i - 1)/(sample.nums - 1))
            let angle2 = lerp(0, Math.PI * 2, i/(sample.nums - 1))

            ctx.fillStyle = getHSL(lerp(0, 360, sample.obj[i].key/sample.nums))
            ctx.strokeStyle = sample.obj[i].color
            ctx.beginPath()
            ctx.moveTo(0, 0)
            ctx.lineTo(Math.cos(angle1) * radius , Math.sin(angle1) * radius)
            ctx.lineTo(Math.cos(angle2) * radius , Math.sin(angle2) * radius)
            ctx.fill()
            ctx.stroke()

        }
        ctx.fill()
        ctx.restore()
        await new Promise(resolve => setTimeout(resolve, 2/sample.nums));
    }


}
function lerp(A, B, t){
    return A + (B - A) * t
}
function getHSL(x){
    return "hsl(" + x + ",100%,50%)"
}