let WIDTH = window.innerWidth - MARGIN

let HEIGHT = window.innerHeight - MARGIN

​

let context, select

let dx = (window.innerWidth - WIDTH) / 2

let dy = (window.innerHeight - HEIGHT) / 2

​

let exercises = [

    'Dashed Line',                    // sketch00

    'Living Line',                    // sketch01

    'Spicy Line',                     // sketch02

    'One Circle, Two Ways',           // sketch03

    'Spiral',                         // sketch04

    'Parallel Polyline',              // sketch05

    'Lines of Different Weights',     // sketch06

    'Calligraphic Polyline',          // sketch07

]

​

function setup() {

​

    createCanvas(WIDTH, HEIGHT).position(dx, dy)

    // createCanvas(WIDTH, HEIGHT, SVG).position(dx, dy)

​

    select = createSelect().position(dx, dy - 30)

    for (var i = 0; i < exercises.length; i++)

        select.option(exercises[i], i)

​

    let params = getURLParams()

    if (params.selection != undefined && params.selection >= 0 && params.selection < exercises.length)

        select.selected(params.selection)

​

    // Default Selection

    else { select.selected(DEFAULT) }

​

    // get current context

    function updateContext() { 

        if (context != null && 'terminate' in context) context.terminate()

        context = window[ 'sketch' + nf(select.value(), 2) ] 

        if ('init' in context) context.init()

    }

    select.changed(updateContext)

    updateContext()

​

}

​

function draw() { context.draw() }

function mouseClicked() { if ('mouseClicked' in context) context.mouseClicked() }

function keyPressed() { if ('keyPressed' in context) context.keyPressed() }