Model View Controller with Truchet App

#mvc #truchet #zim #zimjs

Truchet patterns can be scaled and rotated to make cool pictures. Try out the tool here https://zimjs.com/truchet. We have seen them around but recently decided to find out what they are and learned about them here https://christophercarlson.com/portfolio/multi-scale-truchet-patterns/

Here is the format of the ZIM MVC - model, view, controller.

const model = new app.Model();
const view = new app.View(model);
const controller = new app.Controller(model, view);

In each of the remote js files we store the classes on a namespace. We could have used ES6 import but, I prefer testing locally and import order is not an issue here. Here is start of the https://zimjs.com/truchet/model.js file:

var app = app||{}; // set the app namespace

// The model holds starting data 
// and handles accessing data from a database, localStorage, etc.

app.Model = class { 
    constructor() {
        const m = this; // shortcut        
        // hold the base size for the Truchet        
        m.size = 200;
        m.highlightAlpha = .3;
        // etc.
    }            
}

Here is the start of the https://zimjs.com/truchet/view.js

var app = app||{};

// The View holds all the objects that will be seen
// The View may be guided by the Model and gets passed to the Controller
// Anything the Controller will need to control store on v (this)

app.View = class {
    constructor(m) { 

        // receive m for the model
        const v = this;

        // frame is global - or can send and receive as parameter
        const stage = frame.stage; 
        const stageW = stage.width;
        const stageH = stage.height;        

        v.backing = new Rectangle(stageW, stageH, red).addTo();
        // etc.
    }            
}

And the start of the https://zimjs.com/truchet/controller.js

var app = app||{};

// The Controller is the last MVC made 
// and receives the Model (m) and the View (v)
// The Controller holds all the events 
// and updates the View and the Model when needed

app.Controller = class {
    constructor(m, v) {    
        const c = this;

        const stage = frame.stage; 
        const stageW = stage.width;
        const stageH = stage.height;

        // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
        // TRUCHET EVENTS

        let current;
        v.holders.on("mousedown", e=>{
            current = e.target;
            // etc.
        });
        // etc.
    }            
}

You can see that it is quite a nice set-up. It is a dream to code in ZIM with JavaScript on the Canvas! We are happy, like this guy!

If you have not checked out the Canvas recently - you simply must! Here is the ZIM Dev Site and some In-depth Guides by Dr Abstract including Your Guide to Coding Creativity on the Canvas.