git @ Cat's Eye Technologies Bezier-Knots / master demo / bezier-knots-launcher.js
master

Tree @master (Download .tar.gz)

bezier-knots-launcher.js @master — raw · history · blame 

 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
// SPDX-FileCopyrightText: Chris Pressey, the creator of this work, has dedicated it to the public domain.
// For more information, please refer to <https://unlicense.org/>
// SPDX-License-Identifier: Unlicense

/*
 * dam-plus-widgets-0.2.js, dam-download-image-button.js, and rigamaroads.js should be loaded before this.
 * After this is loaded, call launch() to start the gewgaw.
 */

function launch(config) {
    var div=DAM.maker('div'), button=DAM.maker('button'), canvas=DAM.maker('canvas');

    var can = canvas({ width: 600, height: 600 });
    config.container.appendChild(can);

    var gewgaw = new BezierKnots().init({
        canvas: can,
        lineWidth: 10,
    });

    var controlPanel = div(
        div(
            { id: "panel-container" },
            div(
                DAM.makeDownloadImageButton({
                    canvas: can,
                    basename: "bezier-knots"
                })
            ),
            div(
                DAM.makeRange({
                    title: "Line thickness",
                    min: 1,
                    max: 30,
                    value: 10,
                    onchange: function(v) {
                        gewgaw.lineWidth = v;
                        gewgaw.redraw();
                    }
                })
            ),
            div(
                DAM.makeRange({
                    title: "Edge thickness",
                    min: 0,
                    max: 20,
                    value: 3,
                    onchange: function(v) {
                        gewgaw.edgeWidth = v;
                        gewgaw.redraw();
                    }
                })
            ),
            div(
                DAM.makeRange({
                    title: "Number of segments",
                    min: 1,
                    max: 20,
                    value: 6,
                    onchange: function(v) {
                        gewgaw.numSegments = v;
                        gewgaw.reroll();
                    }
                })
            ),
            div(
                DAM.makeRange({
                    title: "Number of rings",
                    min: 1,
                    max: 20,
                    value: 6,
                    onchange: function(v) {
                        gewgaw.numRadii = v;
                        gewgaw.reroll();
                    }
                })
            ),
            div(
                button("Re-roll", {
                    onclick: function() {
                        gewgaw.reroll();
                    }
                })
            )
        )
    );
    config.container.appendChild(controlPanel);
}