* Tiled tracks.

 * 

 * This sketch was based on an idea from this discussion 

 * https://discourse.processing.org/t/merging-tiles-into-paths/44670

 * 

 * The sketch is fully functional and can easily be modified to suit most

 * users.

 * 

 * created by Peter Lager (2024)

 */

​

let cp_a = function (p) {

​

    let nightTime = false, leftside = true, roadView = true;

​

    let cells = [], trackers = [], rtl = [];

    let palette = [];

​

    let ns, ew, ne, nw, se, sw;

    let roadTiles = new Map();

​

    p.preload = function () {

        let path = 'images/';

        ns = p.loadImage(path + 'rt50_ns.png');

        ew = p.loadImage(path + 'rt50_ew.png');

        ne = p.loadImage(path + 'rt50_ne.png');

        nw = p.loadImage(path + 'rt50_nw.png');

        se = p.loadImage(path + 'rt50_se.png');

        sw = p.loadImage(path + 'rt50_sw.png');

    }

    p.setup = function () {

        console.log('cp_05');

        let p5canvas = p.createCanvas(440, 370);

        //p5canvas.parent('sketch');

        // Road images

        roadTiles = p.makeRoadTiles();

        // Create the colors palette for the tracks / trackers

        palette = p.getPalette(p);

        // Get the path

        cells = getCellPath(p3);

        // Set painters

        cells.forEach(cell => {

            cell.painter = roadPainter(cell, roadTiles, p);

            // cell.painter = trackPainter(cell, palette, p);

        });

        // Stuff for this sketch

        // rtl = calcRelativeTrackLengths(cells);

        p.getRandomPathPositions(7);

        p.makeMultiTrackers(5, 4);

    }

​

    p.makeRoadTiles = function (p) {

        let m = new Map();

        m.set("NS", ns); m.set("SN", ns);

        m.set("EW", ew); m.set("WE", ew);

        m.set("NE", ne); m.set("EN", ne);

        m.set("NW", nw); m.set("WN", nw);

        m.set("SE", se); m.set("ES", se);

        m.set("SW", sw); m.set("WS", sw);

        return m;

    }

​

    p.draw = function () {

        p.push();

        p.background(100, 128, 200);

        p.push(); // Start of clipped zone

        p.translate(20, 20);

        p.beginClip(); p.rect(0, 0, 400, 250); p.endClip();

        p.background(100, 200, 100);

        // Update trackers

        trackers.forEach(tr => { tr.update(p.deltaTime); });

        // Draw roads

        cells.forEach(cell => { cell.render(p); });

        // Draw trackers

        trackers.forEach(tr => { tr.render(p); });

        // Nighttime driving

        if (nightTime) {

            p.fill(0, 112); p.rect(0, 0, 400, 250);

            trackers.forEach(tr => { tr.showLights(p); });

        }

        p.pop();  // End of clipping zone

        p.translate(0, 280);

        p.rectMode(p.CENTER);

        p.fill(0, 0, 96); p.stroke(220, 220, 0); p.strokeWeight(3);

        p.rect(p.width / 2, 39, p.width - 40, 66, 10);

        p.textAlign(p.LEFT, p.CENTER); p.textSize(14);

        p.fill(255); p.noStroke();

        p.text(`[D]  --  drive on ${leftside ? 'RIGHT' : 'LEFT'} hand side of the road`, 40, 20);

        p.text(`[S]  --  switch to ${nightTime ? 'DAY' : 'NIGHT'} driving`, 40, 40);

        p.text(`[V]  --  view ${roadView ? 'TRACKS' : 'ROADS'}`, 40, 60);

        p.pop();

    }

​

    /*

    Calculate random path positions for trackers ensuring there is a 

    sufficent gap between them to prevent overlap.

    */

    p.getRandomPathPositions = function (nbr) {

        let minGap = 2.5;

        while (cells.length / (nbr + 1) < minGap) nbr--;

        let maxGap = cells.length / (nbr + 1);

        let a = [p.random(minGap, maxGap)]; //new Array(nbr); a[0] = p.random(minGap, maxGap);

        for (let i = 1; i < nbr; i++)

            a[i] = i * maxGap + p.random(minGap, maxGap);

        return a;

    }

​

    p.makeMultiTrackers = function (n0, n1) {

        let a = p.getRandomPathPositions(n0);

        a.forEach(tp => {

            let cn = p.floor(tp), t = tp - cn;

            let tracker = new Vehicle(100, Cell.FWD, 1);

            tracker.setPos(cells[cn], t);

            trackers.push(tracker);

        });

        a = p.getRandomPathPositions(n1);

        a.forEach(tp => {

            let cn = p.floor(tp), t = tp - cn;

            let tracker = new Vehicle(100, Cell.REV, 3);

            tracker.setPos(cells[cn], t);

            trackers.push(tracker);

        });

        // Make the trackers look like cars

        let cn = 0;

        trackers.forEach(tck => {

            tck['image'] = createCarImage(20, 12, palette[cn++ % palette.length], p);

            tck.painter = carPainter(p);

        });

    }

​

    p.getPalette = function (p) {

        let c = [];

        c.push(p.color(200, 0, 0));

        c.push(p.color(96, 96, 255));

        c.push(p.color(0, 128, 0));

        c.push(p.color(200, 0, 200));

        c.push(p.color(0, 128, 128));

        c.push(p.color(200, 100, 0));

        c.push(p.color(255, 160, 160));

        c.push(p.color(160, 160, 0));

        c.push(p.color(64));

        return c;

    }

​

    p.keyTyped = function () {

        switch (p.key) {

            case 'c': console.clear(); break;

            case 's': nightTime = !nightTime; break;

            case 'd':

                leftside = !leftside;

                trackers.forEach(tr => { tr.dir = - tr.dir; });

                break;

            case 'v':

                roadView = !roadView;

                if (roadView) {

                    console.log(`Show roads`)

                    cells.forEach(cell => {

                        cell.painter = roadPainter(cell, roadTiles, p);

                    });

                }

                else {

                    cells.forEach(cell => {

                        cell.painter = trackPainter(cell, palette, p);

                    });

                }

                break;

        }

    }

​

}

​

​

let bpm = new p5(cp_a);

​