DEV Community

Cover image for Model View Controller with Truchet App
Dr Abstract
Dr Abstract

Posted on

Model View Controller with Truchet App

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/

Alt Text

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);
Enter fullscreen mode Exit fullscreen mode

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.
    }            
}
Enter fullscreen mode Exit fullscreen mode

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.
    }            
}
Enter fullscreen mode Exit fullscreen mode

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.
    }            
}
Enter fullscreen mode Exit fullscreen mode

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!

Alt Text


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.

Top comments (1)

Collapse
 
zimlearn profile image
Dr Abstract

Here is the app as a CodePen project: codepen.io/zimjs/project/editor/Zb...