Analogue vs Digital Time
Analogue vs Digital Time
Log in to post a comment.
// To help teaching how to read an analogue clock
// Forked from "Adjustable clock" by Jurgen
// https://turtletoy.net/turtle/9c97e84cd5
// Forked from "Digital Clock" by maraz
// https://turtletoy.net/turtle/c8cda63d7b
// You can find the Turtle API reference here: https://turtletoy.net/syntax
const digitHeight = 40; // //min=10 max=80 step=1
const digitWeight = 3; ////min=1 max=10 step=1
const digital = 1;//min=0 max=1 step=1 (No, Yes)
const analogue = 1;//min=0 max=1 step=1 (No, Yes)
// set the time manually
const hours = 5; //min=0 max=12 step=1
const minutes = 0; //min=0 max=59 step=1
const digitSpacing = 1 * digitWeight;
const halfWeight = digitWeight/2;
const step = 0.05;
const segmentLength = (digitHeight-digitWeight-4*halfWeight)/2;
const digitWidth = 4*halfWeight + segmentLength + digitSpacing;
const semicolonWidth = 2*halfWeight+2*digitWeight;
let yOffset = -25; // // min=-40 max=40 step=1
let time = -1;
let radius = 60; // //min=30, max=100, step=10
let border = 1.5; // //min=1, max=10, step = 3
var borderStep = .1;
Canvas.setpenopacity(1);
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 + yOffset);
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) {
if(analogue == 1){
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, yOffset);
turtle.setheading(270);
if(analogue ==1){
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
);
}
// start of digital time code
Turtle.prototype.drawSegment = function() {
this.pendown();
for (let i = 0; i <= segmentLength; i+= step) {
const left = this.clone();
const right = this.clone();
const angle = i < segmentLength/2 ? 45 : 135;
left.left(angle);
left.forward(halfWeight);
right.right(angle);
right.forward(halfWeight);
this.forward(step);
}
this.penup();
}
Turtle.prototype.skipSegment = function() {
this.penup();
this.forward(segmentLength);
}
Turtle.prototype.drawDigit = function(d) {
const x = this.x();
const y = this.y();
d = parseInt(d);
this.penup();
this.forward(halfWeight);
([0, 2, 3, 5, 6, 7, 8, 9].indexOf(d)!==-1) ? this.drawSegment() : this.skipSegment();
this.forward(halfWeight);
this.right(90);
this.forward(halfWeight);
([0, 1, 2, 3, 4, 7, 8, 9].indexOf(d)!==-1) ? this.drawSegment() : this.skipSegment();
this.forward(halfWeight);
this.forward(halfWeight);
([0, 1, 3, 4, 5, 6, 7, 8, 9].indexOf(d)!==-1) ? this.drawSegment() : this.skipSegment();
this.forward(halfWeight);
this.right(90);
this.forward(halfWeight);
([0, 2, 3, 5, 6, 8, 9].indexOf(d)!==-1) ? this.drawSegment() : this.skipSegment();
this.forward(halfWeight);
this.right(90);
this.forward(halfWeight);
([0, 2, 6, 8].indexOf(d)!==-1) ? this.drawSegment() : this.skipSegment();
this.forward(halfWeight);
this.forward(halfWeight);
([0, 4, 5, 6, 8, 9].indexOf(d)!==-1) ? this.drawSegment() : this.skipSegment();
this.backward(segmentLength+halfWeight);
this.right(90);
this.forward(halfWeight);
([2, 3, 4, 5, 6, 8, 9].indexOf(d)!==-1) ? this.drawSegment() : this.skipSegment();
this.goto(x, y);
this.forward(digitWidth);
}
Turtle.prototype.drawSemicolon = function() {
const x = this.x();
const y = this.y();
const h = this.h();
this.penup();
this.forward(2*halfWeight);
this.right(90);
this.forward(segmentLength);
for (let i = 0; i < halfWeight; i+=step) {
this.pendown();
this.circle(halfWeight-i);
this.penup();
this.right(90);
this.forward(step/2);
this.left(90);
}
this.left(90);
this.forward(halfWeight/2);
this.right(90);
this.forward(segmentLength*0.75);
for (let i = 0; i < halfWeight; i+=step) {
this.pendown();
this.circle(halfWeight-i);
this.penup();
this.right(90);
this.forward(step/2);
this.left(90);
}
this.goto(x, y);
this.seth(h);
this.forward(semicolonWidth);
}
Turtle.prototype.drawCurrentTime = function() {
// get the current time
// const now = new Date();
// const hours = now.getHours();
// const minutes = now.getMinutes();
const hs = hours < 10 ? "0" + hours : "" + hours;
const ms = minutes < 10 ? "0" + minutes : "" + minutes;
hs.split('').map(d => this.drawDigit(d));
this.drawSemicolon();
ms.split('').map(d => this.drawDigit(d));
}
// const turtle = new Turtle();
turtle.penup();
turtle.setheading(0)
turtle.goto(-2*digitWidth, -digitHeight*0.5+halfWeight + 70);
function walk(i) {
if(digital == 1){
turtle.drawCurrentTime();
}
return false;
}