You can use the sliders below to adjust the clock dials.
Just like chaiyuntian mentioned at turtletoy.net/turtle/b19a9394ca 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; }