You can use the sliders below to adjust the clock dials.
Just like chaiyuntian mentioned at Adjustable fractal tree an animation is created sliding the 'time' variable.
Log in to post a comment.
//it time == -1 use hours and minutes let hours = 2; //min=0, max=11, step=1 let minutes = 10; //min=0, max=60, step=1 //if time > -1 use calculate hours, minutes and seconds let time = -1; //min=-1, max=43200, step=1 let radius = 80; //min=30, max=100, step=10 let border = 4; //min=1, max=10, step = 3 var borderStep = .1; // You can find the Turtle API reference here: https://turtletoy.net/syntax Canvas.setpenopacity(.7); function Vec2(x, y) { this.x = x; this.y = y; } Vec2.prototype.getHeading = function() { var dot = this.dot( {x: 1, y: 0} ); var rads = Math.acos(dot / this.length()); if( this.y < 0 ) { rads = (2 * Math.PI) - rads; } return rads * 180 / Math.PI; } Vec2.prototype.dot = function(vec) { return (this.x * vec.x) + (this.y * vec.y); } Vec2.prototype.toString = function() { return '[' + this.x + ', ' + this.y + ']'; } Vec2.prototype.subtract = function(vec) { return new Vec2(this.x - vec.x, this.y - vec.y); } Vec2.prototype.length = function() { return Math.sqrt(Math.pow(this.x, 2) + Math.pow(this.y, 2)); } function drawLine(from, to, width) { var direction = to.subtract(from); turtle.jump(from.x, from.y); turtle.setheading(direction.getHeading()); turtle.left(90); turtle.penup(); turtle.forward(width / 2); turtle.right(90); var l = direction.length(); for(var i = 0; i < width; i = i + borderStep) { turtle.pendown(); turtle.forward(l); turtle.penup(); turtle.backward(l); turtle.right(90); turtle.forward(borderStep); turtle.left(90); } } // Global code will be evaluated once. const turtle = new Turtle(); //clock border for(var i = 0; i < border; i = i + borderStep) { turtle.jump(radius - i, 0); turtle.setheading(270); turtle.circle(-(radius - i)); } //clock face var j = 0; for(var i = 0; i < 2 * Math.PI; i = i + Math.PI / 6) { var length = (j % 3 == 0? .7: .8) var width = (j % 3 == 0? border: border / 3) drawLine( new Vec2(Math.cos(i) * (radius * length), Math.sin(i) * (radius * length)) ,new Vec2(Math.cos(i) * (radius * .9), Math.sin(i) * (radius * .9)) ,width ) j++; } //clock hour dial var hour = (time == -1)? hours + (minutes / 60): time / 3600; drawLine( new Vec2( (radius * .1) * Math.sin(((hour+6) * 2 * Math.PI) / 12) ,(radius * .1) * -Math.cos(((hour+6) * 2 * Math.PI) / 12) ) ,new Vec2( (radius * .5) * Math.sin((hour * 2 * Math.PI) / 12) ,(radius * .5) * -Math.cos((hour * 2 * Math.PI) / 12) ) ,border ); //clock minute dial var minute = (time == -1)? minutes: (time - (Math.floor(hour) * 3600)) / 60; drawLine( new Vec2( (radius * .2) * Math.sin(((minute+30) * 2 * Math.PI) / 60) ,(radius * .2) * -Math.cos(((minute+30) * 2 * Math.PI) / 60) ) ,new Vec2( (radius * .9) * Math.sin((minute * 2 * Math.PI) / 60) ,(radius * .9) * -Math.cos((minute * 2 * Math.PI) / 60) ) ,border ); if(time > -1) { //clock seconds dial var second = time % 60; drawLine( new Vec2( (radius * .3) * Math.sin(((second+30) * 2 * Math.PI) / 60) ,(radius * .3) * -Math.cos(((second+30) * 2 * Math.PI) / 60) ) ,new Vec2( (radius * .9) * Math.sin((second * 2 * Math.PI) / 60) ,(radius * .9) * -Math.cos((second * 2 * Math.PI) / 60) ) ,border / 4 ); } // The walk function will be called until it returns false. function walk(i) { return false; }