rectangle({
    x: 150,
    y: 150,
    w: 300,
    h: 300,
})

circle({
    x: 50,
    y: 50,
    r: 100,
    // optional parameters
    color: 'black',
    fromAngle: 0.00,
    toAngle:   TAU,
})

path({
    x: 300,
    y: 300,
    points: [
        {x: 340, y: 147},
        {x: 169, y: 300},
        {x: 357, y: 225},
        {x: 309, y: 390},
        {x: 237, y: 192},
        // optional details
        strokeWidth: 1,
        strokeColor: 'black',
        lineJoin: 'miter', // bevel | round | miter
        lineCap: 'butt', // butt | round | square
    ]
})

text({
    text:  'Hello world',
    x:               300,
    y:               100,
    // optional parameters
    size:             68,
    font:        'Arial',
    fontWeight: 'normal',
    color:      'orange',
    align:      'center',
    verticalAlign: 'top',
    strokeWidth:       0,
    strokeColor: 'black',
    alpha:             1,
})

// There's 4 ways to specify colors

circle({
    x: 100,
    y: 100,
    r: 50,
    // 140 possible names
    // ref: colours.neilorangepeel.com
    color: 'pink'
})

circle({
    x: 200,
    y: 200,
    r: 50,
    // valeur hexadecimale
    color: '#ffc0cb'
})

circle({
    x: 300,
    y: 300,
    r: 50,
    color: rgb(255,192,203)
})

circle({
    x: 400,
    y: 400,
    r: 50,
    // hue, saturation, lightness
    color: hsluv(0,100,83)
    // use 'hpluv' if you want perceptual similarit y
})

// alpha is between 0 and 1
// 0 = transparent
// 1 = fully opaque

circle({
    x: 150,
    y: 100,
    r: 100,
    alpha: 0.3,
})

circle({
    x: 200,
    y: 100,
    r: 100,
    alpha: 0.3,
})

rectangle({
    x: 300, w: 200,
    y: 300, h: 150,
    alpha: 0.1,
})

rectangle({
    x: 300, w: 200,
    y: 300, h: 150,
    alpha: 0.5,
    color: 'red',
    rotation: 1/10 * TAU,
})

rectangle({
    x: 300, w: 200,
    y: 300, h: 150,
    alpha: 0.5,
    color: 'blue',
    rotation: 2/10 * TAU,
})

/*

la rotation est exprimée en radians

un demi-tour    est égal à PI  (~= 3.14159)
un tour complet est égal à TAU (~= 6.28318)
la rotation se fait dans le sens horaire

pour passer des degrés aux radians :
    360 degrés <=> TAU radians
    
    exemple = 10 degrés
    10/360 * TAU ~= 0,1745 radians
*/

/* le pivot

    permet d'aligner une forme

    en haut à gauche : { x:   0, y:   0 }
    centré           : { x: 0.5, y: 0.5 }
    en bas à droite  : { x:   1, y:   1 }

        x:0          x:1
    y:0 +--------------+
        |              |
        |              |
        |              |
        |              |
        |              |
        |              |
    y:1 +--------------+
    
    par défaut, le pivot est en haut à gauche

*/

rectangle({
    x: 300,
    y: 300,
    w: 200, // <- changez la taille
    h: 150,
    pivot: {
        x: 0.5,
        y: 0.5,
    },
    alpha: 0.1,
})

circle({
    x: 300,
    y: 300,
    r: 30,
    pivot: {
        x: 0.5,
        y: 0.5,
    },
})

// offset c'est comme pivot, mais indépendant de w & h.

rectangle({
    x: width/2,
    y: height/2,
    w: 200,
    h: 200,
    offset: {
        x: -20,
        y: -20,
    },
    rotation: 0.00,
    alpha: 0.1,
})

circle({
    x: width/2,
    y: height/2,
    r: 5,
    pivot: {
        x:0.5,
        y:0.5,
    },
})

let someNumber = 12846
let someOtherNumber = 3.14
let someLetters = "hello world"

let message = ""
let temperature = 7

if (temperature > 0) {
    message = "it's warm!"
}
else {
    message = "it's cold!"
}

text({
    text: message,
    x: 100,
    y: 100,
    size: 68,
})

let n = 0
while (n < 4) {

    rectangle({
        x: 100 + n*50,
        y: 100,
        w: 40,
        h: 40
    })

    n++
}

let max = 10
for (let i = 0; i < max; i++) {

}

croix(132, 112)
croix(269, 290)
croix(153, 494)
croix(481, 169)
croix(371, 409)

function croix( posX, posY ) {

    rectangle({
        x: posX,
        y: posY,
        w: 20,
        h: 100,
        pivot: {x: 0.5, y: 0.5}
    })

    rectangle({
        x: posX,
        y: posY - 20,
        w: 70,
        h: 20,
        pivot: {x: 0.5, y: 0.5}
    })

}