Model View Controller with Truchet App
Tags: mvc, truchet, zim, zimjs
Published: 2021-02-01 05:20:42

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](https://dev-to-uploads.s3.amazonaws.com/i/qbwg7m7bb1vh60hifdnw.png)

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

```JavaScript
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:

```JavaScript
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


```JavaScript
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


```JavaScript
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!

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/6aapxr2g47rzugi5y4c4.jpg)

---

If you have not checked out the Canvas recently - you simply must!  Here is the [ZIM&nbsp;Dev&nbsp;Site](https://dev.zimjs.com) and some [In-depth&nbsp;Guides](https://drabstract.medium.com/) by Dr&nbsp;Abstract including [Your Guide to Coding Creativity on the Canvas](https://drabstract.medium.com/your-guide-to-coding-creativity-on-the-canvas-ada0996298f6).