`link:"back"back`

```page-script var w = this.width()-40; var bg = lively.morphic.newMorph({name: "container", extent: pt(w, 120), style: {borderWidth: 1, borderColor: Color.gray, fill: Color.white}}); var clock; var code1 = '\ $world.constraintAdd({\n\ clock: this.get("clock"),\n\ epsilon: function() { return 0.001; },\n\ hourRotation: function(t) { return (t.getHours() * 30).toRadians(); },\n\ minuteRotation: function(t) { return (t.getMinutes() * 6).toRadians(); },\n\ secondRotation: function(t) { return (t.getSeconds() * 6).toRadians(); },\n\ error: function(t) {\n\ return Math.abs(this.clock.get("hourHand").getRotation() - this.hourRotation(t))\n\ + Math.abs(this.clock.get("minuteHand").getRotation() - this.minuteRotation(t))\n\ + Math.abs(this.clock.get("secondHand").getRotation() - this.secondRotation(t));\n\ },\n\ solve: function(time) {\n\ return [\n\ {morph: this.clock.get("hourHand"), property: "rotation", value: this.hourRotation(time)},\n\ {morph: this.clock.get("minuteHand"), property: "rotation", value: this.minuteRotation(time)},\n\ {morph: this.clock.get("secondHand"), property: "rotation", value: this.secondRotation(time)}\n\ ]\n\ },\n\ });'; var ed1 = new lively.morphic.CodeEditor(pt(w, 300).extentAsRectangle(), code1); var btn = btn || new lively.morphic.Button(rect(0,0,60,19), "run"); var btn2 = btn2 || new lively.morphic.Button(rect(0,0,60,19), "reset"); var container = container || lively.newMorph({extent: pt(w, 40), style: {fill: Color.white}}); function reset() { if (clock) { $world.constraintsRemoveAllReferencingMorph(clock); clock.remove(); } clock = lively.BuildSpec({ _BorderWidth: 3, _Extent: lively.pt(100.0,100.0), _Fill: Color.rgb(255,255,255), _Origin: pt(50,50), className: "lively.morphic.Morph", name: "clock", shape: "Ellipse", submorphs: [{ _Extent: lively.pt(4.0,50.0), _Fill: Color.rgb(0,0,0), _Position: lively.pt(0,0), _Origin: pt(2,50), className: "lively.morphic.Box", name: "minuteHand" }, { _Extent: lively.pt(4.0,30.0), _Fill: Color.rgb(0,0,0), _Position: lively.pt(0,0), _Origin: pt(2,30), className: "lively.morphic.Box", name: "hourHand" }, { _Extent: lively.pt(2.0,50), _Fill: Color.rgb(0,0,0), _Position: lively.pt(0,0), _Origin: pt(2,50), className: "lively.morphic.Box", name: "secondHand" }] }).createMorph(); bg.addMorph(clock); clock.align(clock.bounds().center(), bg.innerBounds().center()); ed1.applyStyle({textMode: "javascript", gutter: false, fontSize: 10}) ed1.textString = code1; ed1.addScript(function setStatusMessage() { this.ensureStatusMessageMorph(); }); container.addMorph(btn); container.addMorph(btn2); container.addMorph(ed1); btn.align(btn.bounds().topCenter(), ed1.bounds().bottomCenter().addXY(-30, 7)); btn2.align(btn2.bounds().topCenter(), ed1.bounds().bottomCenter().addXY(30, 7)); disconnectAll(btn); disconnectAll(btn2); connect(btn, "fire", ed1, "evalAll"); connect(btn2, "fire", reset, "call"); } reset(); ``` ### Clock example Given an ellipse and three rectangles that are aligned at the ellipses center, the constraint below can be used to simulate an analog clock. Note that we make use of the time argument that is passed to constraints `solve` and `error` handlers. `morph:bg` `morph:container`

Constraints in Lively