Adjustable clock

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