examples/simple/Spiro.qml


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

import "../../Canvas"
import Qt 4.7

// Spirograph

Canvas {
    width:200
    height:200

    property color color: "#ffee00"

    MouseArea {
        id:mousearea
        hoverEnabled:true
        anchors.fill: parent
        onPositionChanged: { draw(); }
    }

    function draw() {
        var ctx = getContext();
        ctx.strokeStyle = color;
        ctx.translate((width/2), (height/2));
        ctx.rotate(mousearea.mouseY/width)
        drawSpirograph(ctx,20*(2)/(1),-8*(3)/(1),mousearea.mouseX/2);
        ctx.globalAlpha = 0.5;
        drawSpirograph(ctx,20*(2)/(1),-8*(3)/(1),mousearea.mouseX/2 -10);
    }

    function drawSpirograph(ctx,R,r,O){
        var x1 = R-O;
        var y1 = 0;
        var i  = 1;
        ctx.beginPath();
        ctx.moveTo(x1,y1);
        do {
            if (i>20000) break;
            var fuzz = (i)*Math.PI/72;
            var x2 = (R+r)*Math.cos(fuzz) - (r+O)*Math.cos(((R+r)/r)*(fuzz))
            var y2 = (R+r)*Math.sin(fuzz) - (r+O)*Math.sin(((R+r)/r)*(fuzz))
            ctx.lineTo(x2,y2);
            x1 = x2;
            y1 = y2;
            i++;
        } while (x2 != R-O && y2 != 0 );
        ctx.stroke();
    }
}