Adjustable clock

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;
}