DEV Community

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

Posted on

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/

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...