MathToys/pascals_triangle.html at master · jennselby/MathToys · 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
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
<!doctype html>
<html>

<head>
    <meta charset='utf-8'>
</head>

<body>
    <canvas id='strings' width='750px' height='650px'></canvas>
    <div style="float: right">
        <label for='modulus'>Modulus</label>
        <input type='number' id='modulus'>
        <label for='modulusChange'>Change By</label>
        <input type='number' id='modulusChange'>
    </div>

    <script>
        var TRI_SIDE = 45;
        var TRI_HALF_SIDE = TRI_SIDE/2;
        var TRI_HEIGHT = TRI_HALF_SIDE * Math.sqrt(3);

        var NUM_ROWS = 16;

        // colors from figure 4 of
        // https://eleanormaclure.files.wordpress.com/2011/03/colour-coding.pdf
        var COLORS = [
            'white',
            'red', 'orange', 'yellow', 'lime', 'gray',
            'pink', 'wheat', 'gold', 'chartreuse', 'springgreen',
            'aqua', 'powderblue', 'plum', 'green', 'turquoise',
            'blue', 'purple', 'maroon', 'brown', 'khaki',
            'olive', 'forestgreen', 'teal', 'navy', 'indigo',
        ];

        var canvas = document.getElementById('strings');
        var context = canvas.getContext('2d');
        context.font = '10pt Sans-Serif';
        context.textAlign = 'center';

        var CENTER_X = canvas.width/2;

        var settings = {
            modulus: 2,
            modulusChange: 0,
        }

        var numbers = [[1],[1,1]];

        function restrictModulus(modulus) {
            return Math.max(2, Math.min(modulus, COLORS.length));
        }

        function findNumbers() {
            for (var rowIndex = 2; rowIndex < NUM_ROWS; ++rowIndex) {
                var previousRow = numbers[rowIndex - 1];
                var numInnerCols = previousRow.length - 1;

                var newRow = [1];
                for (var colIndex = 0; colIndex < numInnerCols; ++colIndex) {
                    newRow.push(previousRow[colIndex] + previousRow[colIndex + 1]);
                }
                newRow.push(1);
                numbers.push(newRow);
            }
        }

        function drawTriangle(x, y, color) {
            context.beginPath();
            context.moveTo(x - TRI_HALF_SIDE, y);
            context.lineTo(x + TRI_HALF_SIDE, y);
            context.lineTo(x, y + TRI_HEIGHT);
            context.lineTo(x - TRI_HALF_SIDE, y);
            context.fillStyle = color;
            context.fill();
        }

        function findX(colIndex, numCols) {
            return CENTER_X - (TRI_SIDE * numCols / 2) + TRI_SIDE * colIndex + TRI_HALF_SIDE;
        }

        function findY(rowIndex) {
            return TRI_HEIGHT * (rowIndex + 1);
        }

        function drawTriangles() {
            var numRows = numbers.length;
            for (var rowIndex = 0; rowIndex < numRows; ++rowIndex) {
                var row = numbers[rowIndex];
                var numCols = row.length;

                for (var colIndex = 0; colIndex < numCols; ++colIndex) {
                    var numVal = row[colIndex];
                    var x = findX(colIndex, numCols);
                    var y = findY(rowIndex);
                    var color = COLORS[numVal % settings.modulus];

                    drawTriangle(x, y - TRI_HALF_SIDE, color);

                    context.fillStyle = 'black';
                    context.fillText(numVal, x, y);
                }
            }
        }

        function drawAll() {
            context.clearRect(0, 0, canvas.width, canvas.height);
            drawTriangles();
        }

        function updateTriangles() {
            if (settings.modulusChange == 0) {
                // nothing to do
                return;
            }

            settings.modulus = restrictModulus(settings.modulus + settings.modulusChange);
            document.getElementById('modulus').value = settings.modulus;

            drawAll();
        }

        document.getElementById('modulus').value = settings.modulus;
        document.getElementById('modulusChange').value = settings.modulusChange;

        // update settings when the values change
        for (setting in settings) {
            document.getElementById(setting).addEventListener(
                'change',
                function() {
                    var setting = this.id;
                    var newValue = parseInt(this.value);
                    if (newValue != NaN) {
                        settings[setting] = newValue;
                        settings.modulus = restrictModulus(settings.modulus);
                        drawAll();
                    }
                }
            );
        }

        findNumbers();
        drawAll();
        window.setInterval(updateTriangles, 1000);
    </script>
</body>

</html>