Viewing Program

Program Data

Program thumbnail for "{props.program.title}"

Title	Clocks Collection
ID	6434137918357504
Created	4 years ago, 1615899580575
Updated	4 years ago, 1616388369760
Code	/* Clocks Collection Gray Wolf, March 2021 A small collection of working clock objects that you can use in your projects. Updates: - fixed hour hands so they rotate smoothly between hours - fixed the pendulum so it obeys the laws of physics and swings at the right speed Each clock is configurable with x/y, size, colors, etc. For example, if you wanted to create an Arc clock then you would just need to copy the ArcClock function into your program. Then create a new instance of the Arc clock as so: var arcClock = new ArcClock({ x: 150, y: 150, diameter: 250 }); If you wanted to change some of the default properties then you can do that when you create the clock too as so: var arcClock = new ArcClock({ x: 450, y: 150, diameter: 220, hourColor: color(220, 199, 172), minuteColor: color(176, 159, 133), secondColor: color(145, 120, 100), centerColor: color(145, 120, 100), textColor: color(200) }); Then you would draw it using: arcClock.tick(); I'll see if I can add a few more examples over the next few weeks (if I get time) Want to be notified when I create a new program? Sub here: https://www.khanacademy.org/cs/gray-wolf/4876588413698048 / var scenes, scene = 0; var clicked = false, hover = false; mouseClicked = function () { clicked = true; }; //buttons var Button = (function() { var Button = function(args) { this.x = args.x; this.y = args.y; this.w = args.w \|\| 100; this.h = args.h \|\| 50; this.content = args.content; this.textSize = args.textSize \|\| 24; this.func = args.func; this.backColor = args.backColor \|\| color(240); this.textColor = color(25); }; Button.prototype = { over: function() { return (mouseX > this.x && mouseX < this.x + this.w && mouseY > this.y && mouseY < this.y + this.h); }, draw: function() { noStroke(); if(this.over()) { hover = true; } fill(this.backColor, this.over() ? 150 : 220); rect(this.x, this.y, this.w, this.h); pushStyle(); textAlign(CENTER, CENTER); textSize(this.textSize); fill(this.textColor); text(this.content, this.x + this.w / 2, this.y + this.h / 2); popStyle(); if(clicked && this.over()) { this.func(); } } }; return Button; })(); var buttons = { start: new Button({ content: "Start", x: 250, y: 500, func: function() { scene = 1; } }), next: new Button({ content: ">", x: 540, y: 275, w: 50, textSize: 30, func: function() { scene = (scene + 1) % scenes.length; } }), previous: new Button({ content: "<", x: 10, y: 275, w: 50, textSize: 30, func: function() { scene = (scene - 1) % scenes.length; } }) }; //Clock objects var BasicAnalogClock = (function() { BasicAnalogClock = function(args) { this.x = args.x; this.y = args.y; this.diameter = args.diameter \|\| 200; this.radius = this.diameter / 2; this.ticks = args.ticks \|\| 0; //options are 0, 4, or 12 this.showText = args.showText \|\| false; this.textSize = this.radius 0.12; this.font = args.font \|\| "Trebuchet MS"; this.roman = args.roman \|\| false; this.romans = ["I", "II", "III", "IV", "V", "VI", "VII", "VIII", "IX", "X", "XI", "XII"]; this.shadow = args.shadow \|\| { from: -45, to: 135 }; this.hour = 0; this.minute = 0; this.second = 0; //colors this.outerColor = args.outerColor \|\| color(128, 217, 212); this.innerColor = args.innerColor \|\| color(240); this.centerColor = args.centerColor \|\| color(40); this.tickColor = args.tickColor \|\| color(40); this.hourColor = args.hourColor \|\| color(40); this.minuteColor = args.minuteColor \|\| color(40); this.secondColor = args.secondColor \|\| color(240, 0, 0); this.textColor = args.textColor \|\| color(40); this.shadowColor = args.shadowColor \|\| color(40, 10); }; BasicAnalogClock.prototype = { draw: function() { pushMatrix(); translate(this.x, this.y); pushStyle(); //clock face noStroke(); fill(this.outerColor); ellipse(0, 0, this.diameter, this.diameter); fill(this.innerColor); ellipse(0, 0, this.diameter * 0.9, this.diameter * 0.9); //tick marks stroke(this.tickColor); strokeWeight(this.radius * 0.01); for (var i = 0; i < this.ticks; i++){ line( sin(i * (360/this.ticks)) * this.radius * 0.85, cos(i * (360/this.ticks)) * this.radius * 0.85, sin(i * (360/this.ticks)) * this.radius * 0.9, cos(i * (360/this.ticks)) * this.radius * 0.9); } if(this.showText) { textAlign(CENTER, CENTER); fill(this.textColor); textSize(this.textSize); if(this.roman) { //if roman numbers... pushMatrix(); for(var i = 0; i < 12; i++) { rotate(30); text(this.romans[i], 0, -this.radius * 0.75); } popMatrix(); } else { //if general numbers... for(var i = 0; i < 12; i++){ text(i+1, -sin(210+i30)this.radius * 0.75, cos(210+i30)this.radius * 0.75); } } } //hour hand stroke(this.hourColor); strokeWeight(this.radius * 0.04); line( 0, 0, sin((this.hour * 30) + (this.minute / 2)) * this.diameter * 0.25, -cos((this.hour * 30) + (this.minute / 2)) * this.diameter * 0.25); //minute hand stroke(this.minuteColor); strokeWeight(this.radius * 0.02); line( 0, 0, sin(this.minute * 6) * this.diameter * 0.35, -cos(this.minute * 6) * this.diameter * 0.35); //second hand stroke(this.secondColor); strokeWeight(this.radius * 0.01); line( 0, 0, sin(this.second * 6) * this.diameter * 0.42, -cos(this.second * 6) * this.diameter * 0.42); //center circle noStroke(); fill(this.centerColor); ellipse(0, 0, this.radius * 0.07, this.radius * 0.07); //shadow over clock noStroke(); fill(this.shadowColor); arc(0, 0, this.diameter, this.diameter, this.shadow.from, this.shadow.to); popStyle(); popMatrix(); }, update: function() { this.hour = hour(); this.minute = minute(); this.second = second(); }, tick: function() { this.draw(); this.update(); } }; return BasicAnalogClock; })(); var DetailedAnalogClock = (function() { DetailedAnalogClock = function(args) { this.x = args.x; this.y = args.y; this.diameter = args.diameter \|\| 200; this.radius = this.diameter / 2; this.size = args.size \|\| { date: this.radius * 0.12, hours: this.radius * 0.15 }; this.font = args.font \|\| "Trebuchet MS"; this.roman = args.roman \|\| false; this.romans = ["I", "II", "III", "IV", "V", "VI", "VII", "VIII", "IX", "X", "XI", "XII"]; this.showShadow = args.showShadow \|\| false; this.shadow = args.shadow \|\| { from: -45, to: 135 }; this.timer = 0; this.hour = 0; this.minute = 0; this.second = 0; this.day = 0; //colors this.outerColor = args.outerColor \|\| color(40); this.innerColor = args.innerColor \|\| color(255); this.tickColor = args.tickColor \|\| color(40); this.hourColor = args.hourColor \|\| color(40); this.minuteColor = args.minuteColor \|\| color(40); this.secondColor = args.secondColor \|\| color(219, 135, 57); this.dateColor = args.dateColor \|\| color(240); this.dateBackColor = args.dateBackColor \|\| this.outerColor; this.textColor = args.textColor \|\| color(40); this.shadowColor = args.shadowColor \|\| color(40, 10); }; DetailedAnalogClock.prototype = { pad: function(n) { //returns the number with a leading 0 if it's only a single digit return n < 10 ? "0" + n : n; }, draw: function() { pushMatrix(); translate(this.x, this.y); pushStyle(); noStroke(); //clock face //outer fill(this.outerColor); ellipse(0, 0, this.diameter, this.diameter); //inner fill(this.innerColor, 220); ellipse(0, 0, this.diameter * 0.9, this.diameter * 0.9); //inner fill(this.innerColor); ellipse(0, 0, this.diameter * 0.85, this.diameter * 0.85); //date part of clock fill(this.dateBackColor, 150); rect(-this.radius * 0.12, this.radius * 0.27, this.radius * 0.24, this.radius * 0.21, 10); //date textFont(createFont(this.font)); textAlign(CENTER, CENTER); textSize(this.size.date); fill(this.dateColor); text(this.pad(this.day), 0, this.radius * 0.38); //tick marks and numbers strokeCap(SQUARE); stroke(this.tickColor); strokeWeight(this.radius * 0.01); textAlign(CENTER, CENTER); fill(this.textColor); textSize(this.size.hours); for (var i = 0; i < 12; i++) { line( sin(i * 30) * this.radius * 0.55, cos(i * 30) * this.radius * 0.55, sin(i * 30) * this.radius * 0.65, cos(i * 30) * this.radius * 0.65); //if general numbers... if(!this.roman) { text(i+1, -sin(210+i30)this.radius * 0.76, cos(210+i30)this.radius * 0.76); } } //if roman numbers... if(this.roman) { pushMatrix(); for (var i = 0; i < 12; i++) { rotate(30); textSize(this.size.hours); text(this.romans[i], 0, -this.radius * 0.76); } popMatrix(); } strokeWeight(this.radius * 0.007); for (var i = 0; i < 60; i++) { line( sin(i * 6) * this.radius * 0.65, cos(i * 6) * this.radius * 0.65, sin(i * 6) * this.radius * 0.60, cos(i * 6) * this.radius * 0.60); } //center circle noStroke(); fill(this.outerColor, 20); ellipse(0, 0, this.radius * 0.25, this.radius * 0.25); //hour hand stroke(this.hourColor); strokeWeight(this.radius * 0.04); line( sin((this.hour * 30) + (this.minute / 2)) * this.diameter * -0.05, -cos((this.hour * 30) + (this.minute / 2)) * this.diameter * -0.05, sin((this.hour * 30) + (this.minute / 2)) * this.diameter * 0.25, -cos((this.hour * 30) + (this.minute / 2)) * this.diameter * 0.25); //minute hand stroke(this.minuteColor); strokeWeight(this.radius * 0.02); line( sin(this.minute * 6) * this.diameter * -0.05, -cos(this.minute * 6) * this.diameter * -0.05, sin(this.minute * 6) * this.diameter * 0.35, -cos(this.minute * 6) * this.diameter * 0.35); //second hand stroke(this.secondColor); strokeWeight(this.radius * 0.01); line( sin(this.second * 6) * this.diameter * -0.1, -cos(this.second * 6) * this.diameter * -0.1, sin(this.second * 6) * this.diameter * 0.42, -cos(this.second * 6) * this.diameter * 0.42); //center circle noStroke(); fill(this.secondColor); ellipse(0, 0, this.radius * 0.07, this.radius * 0.07); //shadow over clock if(this.showShadow) { noStroke(); fill(this.shadowColor); arc(0, 0, this.diameter, this.diameter, this.shadow.from, this.shadow.to); } popStyle(); popMatrix(); }, update: function() { if(this.timer++ % 10 === 0) { this.hour = hour(); this.minute = minute(); this.second = second(); this.day = day(); } }, tick: function() { this.draw(); this.update(); } }; return DetailedAnalogClock; })(); var TriClock = (function() { TriClock = function(args) { this.x = args.x; this.y = args.y; this.diameter = args.diameter \|\| 200; this.radius = this.diameter / 2; this.tickRadius = this.diameter * 0.37; this.hour = 0; this.minute = 0; this.second = 0; //colors this.outerColor = args.outerColor \|\| color(235, 38, 58, 200); this.innerColor = args.innerColor \|\| color(50); this.triangleColor = args.triangleColor \|\| color(235, 38, 58, 50); this.tickMajorColor = args.tickMajorColor \|\| color(235, 38, 58, 150); this.tickMinorColor = args.tickMinorColor \|\| color(84, 84, 84, 200); this.tickLinesColor = args.tickLinesColor \|\| color(255, 10); this.hourColor = args.hourColor \|\| color(250, 70); this.minuteColor = args.minuteColor \|\| color(250, 70); this.secondColor = args.secondColor \|\| color(250, 70); }; TriClock.prototype = { draw: function() { pushMatrix(); translate(this.x, this.y); pushStyle(); //clock face noStroke(); //outer fill(this.outerColor); ellipse(0, 0, this.diameter, this.diameter); //inner fill(this.innerColor); ellipse(0, 0, this.diameter * 0.9, this.diameter * 0.9); //lines between ticks strokeWeight(1); stroke(this.tickLinesColor); for (var i = 0; i < 6; i++){ line( sin(i * 30) * this.tickRadius, cos(i * 30) * this.tickRadius, -sin(i * 30) * this.tickRadius, -cos(i * 30) * this.tickRadius); } //tick marks noStroke(); fill(this.tickMinorColor); for (var i = 0; i < 60; i++){ ellipse( sin(i * 6) * this.tickRadius, cos(i * 6) * this.tickRadius, this.radius * 0.015, this.radius * 0.015); } fill(this.tickMajorColor); for (var i = 0; i < 12; i++){ ellipse( sin(i * 30) * this.tickRadius, cos(i * 30) * this.tickRadius, this.radius * 0.08, this.radius * 0.08); } //triangle noStroke(); fill(this.triangleColor); triangle( sin(this.hour * 30) * this.tickRadius, -cos(this.hour * 30) * this.tickRadius, sin(this.minute * 6) * this.tickRadius, -cos(this.minute * 6) * this.tickRadius, sin(this.second * 6) * this.tickRadius, -cos(this.second * 6) * this.tickRadius ); //hour hand fill(this.innerColor, 150); stroke(this.hourColor); strokeWeight(this.radius * 0.01); ellipse( sin(this.hour * 30) * this.tickRadius, -cos(this.hour * 30) * this.tickRadius, this.radius * 0.2, this.radius * 0.2); //minute hand stroke(this.minuteColor); strokeWeight(this.radius * 0.01); ellipse( sin(this.minute * 6) * this.tickRadius, -cos(this.minute * 6) * this.tickRadius, this.radius * 0.15, this.radius * 0.15); //second hand stroke(this.secondColor); strokeWeight(this.radius * 0.01); ellipse( sin(this.second * 6) * this.tickRadius, -cos(this.second * 6) * this.tickRadius, this.radius * 0.1, this.radius * 0.1); popStyle(); popMatrix(); }, update: function() { this.hour = hour(); this.minute = minute(); this.second = second(); }, tick: function() { this.draw(); this.update(); } }; return TriClock; })(); var FruitClock = (function() { FruitClock = function(args) { this.x = args.x; this.y = args.y; this.diameter = args.diameter \|\| 200; this.radius = this.diameter / 2; this.pips = []; this.pipRadius = this.radius * 0.07; this.showTicks = args.showTicks \|\| false; this.showPips = args.showPips \|\| false; this.timer = 0; this.hour = 0; this.minute = 0; this.second = 0; //colors this.outerColor = args.outerColor \|\| color(240, 92, 34); this.innerColor = args.innerColor \|\| color(246, 134, 87); this.pipColor = args.pipColor \|\| color(245, 124, 72); this.leafColor = args.leafColor \|\| color(112, 189, 99); this.tickColor = args.tickColor \|\| color(171, 57, 9); this.centerColor = args.centerColor \|\| color(245, 124, 72); this.hourColor = args.hourColor \|\| color(171, 57, 9); this.minuteColor = args.minuteColor \|\| color(219, 73, 12); this.secondColor = args.secondColor \|\| color(249, 165, 129); this.setup(); }; FruitClock.prototype = { setup: function() { if(this.showPips) { //adds pips within the current radius of the fruit for(var i = 0; i < 20; i++) { var a = Math.random() * 360; var r = (this.radius * 0.85 - this.pipRadius / 2) * sqrt(random()); var x = r * cos(a); var y = r * sin(a); this.pips.push({ x: x, y: y, diameter: random(this.pipRadius * 0.8, this.pipRadius) }); } } }, draw: function() { pushMatrix(); translate(this.x, this.y); pushStyle(); //leaf at top of orange noFill(); stroke(this.leafColor); strokeWeight(this.radius * 0.06); line( 0, -this.radius * 0.9, this.radius * 0.05, -this.radius * 1.2 ); noStroke(); fill(this.leafColor); beginShape(); vertex(0, -this.radius * 0.9); bezierVertex( this.radius * 0.01, -this.radius * 1.0, this.radius * 0.04, -this.radius * 1.15, -this.radius * 0.15, -this.radius * 1.3 ); bezierVertex( -this.radius * 0.19, -this.radius * 1.15, -this.radius * 0.19, -this.radius * 1.0, 0, -this.radius * 0.9 ); endShape(CLOSE); //clock face noStroke(); fill(this.outerColor); ellipse(0, 0, this.diameter, this.diameter); fill(this.innerColor); ellipse(0, 0, this.diameter * 0.9, this.diameter * 0.9); //display pips fill(this.pipColor); for(var i = 0; i < this.pips.length; i++) { ellipse(this.pips[i].x, this.pips[i].y, this.pips[i].diameter, this.pips[i].diameter); } //tick marks if(this.showTicks) { stroke(this.tickColor, 100); strokeWeight(this.radius * 0.01); for (var i = 0; i < 12; i++){ line( sin(i * 30) * this.radius * 0.82, cos(i * 30) * this.radius * 0.82, sin(i * 30) * this.radius * 0.90, cos(i * 30) * this.radius * 0.90); } } //hour hand strokeCap(SQUARE); stroke(this.hourColor); strokeWeight(this.radius * 0.05); line( 0, 0, sin((this.hour * 30) + (this.minute / 2)) * this.diameter * 0.35, -cos((this.hour * 30) + (this.minute / 2)) * this.diameter * 0.35); //minute hand stroke(this.minuteColor); strokeWeight(this.radius * 0.04); line( 0, 0, sin(this.minute * 6) * this.diameter * 0.40, -cos(this.minute * 6) * this.diameter * 0.40); //second hand stroke(this.secondColor); strokeWeight(this.radius * 0.03); line( 0, 0, sin(this.second * 6) * this.diameter * 0.44, -cos(this.second * 6) * this.diameter * 0.44); //center circle noStroke(); fill(this.centerColor); ellipse(0, 0, this.radius * 0.11, this.radius * 0.10); popStyle(); popMatrix(); }, update: function() { if(this.timer++ % 10 === 0) { this.hour = hour(); this.minute = minute(); this.second = second(); } }, tick: function() { this.draw(); this.update(); } }; return FruitClock; })(); var ArcClock = (function() { ArcClock = function(args) { this.x = args.x; this.y = args.y; this.diameter = args.diameter \|\| 200; this.radius = this.diameter / 2; this.hourColor = args.hourColor \|\| color(39, 175, 97); this.minuteColor = args.minuteColor \|\| color(254, 183, 55); this.secondColor = args.secondColor \|\| color(220, 84, 62); this.hourBackColor = args.hourBackColor \|\| color(55, 71, 79); this.minuteBackColor = args.minuteBackColor \|\| color(69, 90, 100); this.secondBackColor = args.secondBackColor \|\| color(84, 110, 122); this.centerColor = args.centerColor \|\| color(38, 50, 56); this.textColor = args.textColor \|\| color(240); this.textSize = args.textSize \|\| this.diameter * 0.10; this.font = args.font \|\| "Trebuchet MS"; this.hour = 0; this.minute = 0; this.second = 0; }; ArcClock.prototype = { pad: function(n) { //returns the number with a leading 0 if it's only a single digit return n < 10 ? "0" + n : n; }, draw: function() { pushMatrix(); translate(this.x, this.y); pushStyle(); //seconds noStroke(); fill(this.secondBackColor); ellipse(0, 0, this.diameter, this.diameter); //arc fill(this.secondColor); arc(0, 0, this.diameter, this.diameter, -90, (this.second * 6) - 90); //minutes fill(this.minuteBackColor); ellipse(0, 0, this.diameter * 0.88, this.diameter * 0.88); //arc fill(this.minuteColor); arc(0, 0, this.diameter * 0.88, this.diameter * 0.88, -90, (this.minute * 6) - 90); //hour fill(this.hourBackColor); ellipse(0, 0, this.diameter * 0.72, this.diameter * 0.72); //arc fill(this.hourColor); arc(0, 0, this.diameter * 0.72, this.diameter * 0.72, -90, ((this.hour % 12) * 30 + (this.minute / 2)) - 90); //center fill(this.centerColor); ellipse(0, 0, this.diameter * 0.52, this.diameter * 0.52); //digital time in center of clock textFont(createFont(this.font)); textAlign(CENTER, CENTER); fill(this.textColor); textSize(this.textSize); text(this.pad(this.hour) + ":" + this.pad(this.minute) + ":" + this.pad(this.second), 0, 0); popStyle(); popMatrix(); }, update: function() { this.hour = hour(); this.minute = minute(); this.second = second(); }, tick: function() { this.draw(); this.update(); } }; return ArcClock; })(); var LEDClock = (function() { LEDClock = function(args) { this.x = args.x; this.y = args.y; this.w = args.w \|\| 200; this.h = args.h \|\| this.w / 4; this.digits = [ [0,1,2,3,4,5], // 0 [1,2], // 1 [0,1,3,4,6], // 2 [0,1,2,3,6], // 3 [1,2,5,6], // 4 [0,2,3,5,6], // 5 [0,2,3,4,5,6], // 6 [0,1,2], // 7 [0,1,2,3,4,5,6], // 8 [0,1,2,5,6] // 9 ]; this.panel = { w: (this.w / 7) * 0.9, hour: { ax: this.x, bx: this.x + (this.w / 7) * 1.1 }, minute: { ax: this.x + (this.w / 7) * 2.5, bx: this.x + (this.w / 7) * 3.6 }, second: { ax: this.x + (this.w /7) * 5.0, bx: this.x + (this.w / 7) * 6.1 }, dots: { x1: this.x + (this.w / 7) * 2.25, x2: this.x + (this.w / 7) * 4.75 } }; this.strokeWeight = args.strokeWeight \|\| this.w * 0.015; this.dotSize = this.w * 0.02; this.hour = 0; this.minute = 0; this.second = 0; this.timer = 0; //colors this.backColor = args.backColor \|\| color(71, 68, 68, 100); this.onColor = args.onColor \|\| color(235, 18, 47); this.offColor = args.offColor \|\| color(235, 18, 47, 50); }; LEDClock.prototype = { pad: function(n) { //returns the number with a leading 0 if it's only a single digit return n < 10 ? "0" + n : n.toString(); }, led: function(n, x) { var digit = this.digits[n]; pushStyle(); noFill(); strokeWeight(this.strokeWeight); //0 stroke(digit.includes(0) ? this.onColor : this.offColor); line(x + this.panel.w * 0.1, this.y, x + this.panel.w * 0.9, this.y); //1 stroke(digit.includes(1) ? this.onColor : this.offColor); line(x + this.panel.w, this.y + this.h * 0.05, x + this.panel.w, this.y + this.h * 0.45); //2 stroke(digit.includes(2) ? this.onColor : this.offColor); line(x + this.panel.w, this.y + this.h * 0.55, x + this.panel.w, this.y + this.h * 0.95); //3 stroke(digit.includes(3) ? this.onColor : this.offColor); line(x + this.panel.w * 0.1, this.y + this.h, x + this.panel.w * 0.9, this.y + this.h); //4 stroke(digit.includes(4) ? this.onColor : this.offColor); line(x, this.y + this.h * 0.55, x , this.y + this.h * 0.95); //5 stroke(digit.includes(5) ? this.onColor : this.offColor); line(x, this.y + this.h * 0.05, x , this.y + this.h * 0.45); //6 stroke(digit.includes(6) ? this.onColor : this.offColor); line(x + this.panel.w * 0.1, this.y + this.h / 2, x + this.panel.w * 0.9, this.y + this.h / 2); strokeWeight(1); popStyle(); }, draw: function() { //three panels - hours, minutes, seconds noStroke(); fill(this.backColor); //hours rect(this.panel.hour.ax, this.y, this.panel.w, this.h); rect(this.panel.hour.bx, this.y, this.panel.w, this.h); //minutes rect(this.panel.minute.ax, this.y, this.panel.w, this.h); rect(this.panel.minute.bx, this.y, this.panel.w, this.h); //seconds rect(this.panel.second.ax, this.y, this.panel.w, this.h); rect(this.panel.second.bx, this.y, this.panel.w, this.h); //hour this.led(this.hour[0], this.panel.hour.ax); this.led(this.hour[1], this.panel.hour.bx); //minute this.led(this.minute[0], this.panel.minute.ax); this.led(this.minute[1], this.panel.minute.bx); // //second this.led(this.second[0], this.panel.second.ax); this.led(this.second[1], this.panel.second.bx); //dots fill(this.onColor); ellipse(this.panel.dots.x1, this.y + this.h * 0.5, this.dotSize, this.dotSize); ellipse(this.panel.dots.x2, this.y + this.h * 0.5, this.dotSize, this.dotSize); }, update: function() { if(this.timer++ % 10 === 0) { this.hour = this.pad(hour()); this.minute = this.pad(minute()); this.second = this.pad(second()); } }, tick: function() { this.update(); this.draw(); } }; return LEDClock; })(); var BasicDigitalClock = (function() { BasicDigitalClock = function(args) { this.x = args.x; this.y = args.y; this.w = args.w \|\| 200; this.h = args.h \|\| 80; this.textSize = args.textSize \|\| this.w * 0.15; this.panel = { w: this.w / 3.1, hour: { x: this.x }, minute: { x: this.x + this.w / 3 }, second: { x: this.x + (this.w /3) * 2 } }; this.backColor = args.backColor \|\| color(255); this.textColor = args.textColor \|\| color(50); this.hour = 0; this.minute = 0; this.second = 0; this.timer = 0; }; BasicDigitalClock.prototype = { pad: function(n) { //returns the number with a leading 0 if it's only a single digit return n < 10 ? "0" + n : n; }, draw: function() { //three panels - hours, minutes, seconds noStroke(); fill(this.backColor); //hours rect(this.panel.hour.x, this.y, this.panel.w, this.h); //minutes rect(this.panel.minute.x, this.y, this.panel.w, this.h); //seconds rect(this.panel.second.x, this.y, this.panel.w, this.h); pushStyle(); textAlign(CENTER, CENTER); fill(this.textColor); textSize(this.textSize); //hour text(this.pad(this.hour), this.panel.hour.x + this.panel.w / 2, this.y + this.h / 2); //minute text(this.pad(this.minute), this.panel.minute.x + this.panel.w / 2, this.y + this.h / 2); //second text(this.pad(this.second), this.panel.second.x + this.panel.w / 2, this.y + this.h / 2); popStyle(); }, update: function() { if(this.timer++ % 10 === 0) { this.hour = hour(); this.minute = minute(); this.second = second(); } }, tick: function() { this.draw(); this.update(); } }; return BasicDigitalClock; })(); var DateCard = (function() { DateCard = function(args) { this.x = args.x; this.y = args.y; this.w = args.w \|\| 140; this.h = args.h \|\| 80; this.dateSize = args.dateSize \|\| this.w * 0.17; this.yearSize = args.yearSize \|\| this.w * 0.15; this.font = args.font \|\| "Trebuchet MS"; this.year = 0; this.month = 0; this.day = 0; this.months = ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"]; //colors this.dateColor = args.dateColor \|\| color(40); this.yearColor = args.yearColor \|\| color(120); this.backColor = args.backColor \|\| color(245); }; DateCard.prototype = { getMonth: function() { return this.months[constrain(this.month - 1, 0, 11)]; }, draw: function() { pushMatrix(); translate(this.x, this.y); pushStyle(); noStroke(); //date part of clock fill(this.backColor); rect(0, 0, this.w, this.h); //date textFont(createFont(this.font)); textAlign(CENTER, CENTER); textSize(this.dateSize); fill(this.dateColor); text(this.getMonth() + " " + this.day, this.w * 0.5, this.w * 0.2); //year textSize(this.yearSize); fill(this.yearColor); text(this.year, this.w * 0.5, this.w * 0.4); popStyle(); popMatrix(); }, update: function() { this.year = year(); this.month = month(); this.day = day(); }, display: function() { this.draw(); this.update(); } }; return DateCard; })(); //Clock instances var basicAanalogClock1 = new BasicAnalogClock({ x: 150, y: 150, diameter: 250, ticks: 4 }); var basicAanalogClock2 = new BasicAnalogClock({ x: 450, y: 150, diameter: 220, outerColor: color(219, 76, 117), shadowColor: color(255, 0), ticks: 12, showText: true, roman: true }); var basicAanalogClock3 = new BasicAnalogClock({ x: 150, y: 450, diameter: 220, showText: true, outerColor: color(8), ticks: 12, shadow: { from: 45, to: 225 } }); var basicAanalogClock4 = new BasicAnalogClock({ x: 450, y: 450, diameter: 250, outerColor: color(237, 230, 232), innerColor: color(61, 60, 61), shadowColor: color(255, 0), textColor: color(240), hourColor: color(200), minuteColor: color(200), secondColor: color(245, 128, 147), centerColor: color(200), ticks: 0, showText: true, roman: true }); var detailedAnalogClock1 = new DetailedAnalogClock({ x: 150, y: 150, diameter: 250, roman: true }); var detailedAnalogClock2 = new DetailedAnalogClock({ x: 450, y: 150, diameter: 220, showShadow: true }); var detailedAnalogClock3 = new DetailedAnalogClock({ x: 150, y: 450, diameter: 220, roman: true, showShadow: true, shadow: { from: 45, to: 225 }, outerColor: color(11, 134, 145) }); var detailedAnalogClock4 = new DetailedAnalogClock({ x: 450, y: 450, diameter: 250, outerColor: color(190, 194, 194), innerColor: color(81, 91, 92), textColor: color(158, 163, 163), secondColor: color(237, 85, 61), dateBackColor: color(50), dateColor: color(180) }); var triClock1 = new TriClock({ x: 150, y: 150, diameter: 250 }); var triClock2 = new TriClock({ x: 450, y: 150, diameter: 220, outerColor: color(54, 230, 41, 150), triangleColor: color(46, 235, 40, 50), tickMajorColor: color(223, 230, 223, 150), }); var triClock3 = new TriClock({ x: 150, y: 450, diameter: 220, outerColor: color(21, 83, 117, 150), innerColor: color(92, 205, 230, 50), triangleColor: color(10, 10, 10, 50), tickMajorColor: color(18, 85, 112), tickMinorColor: color(255, 0), tickLinesColor: color(255, 0), hourColor: color(20), minuteColor: color(20), secondColor: color(20) }); var triClock4 = new TriClock({ x: 450, y: 450, diameter: 250, outerColor: color(23, 23, 23, 150), innerColor: color(235, 232, 232), triangleColor: color(10, 10, 10, 50), tickMajorColor: color(92, 94, 92, 150), tickMinorColor: color(115, 111, 115, 200), tickLinesColor: color(25, 20), hourColor: color(20, 170), minuteColor: color(20, 170), secondColor: color(20, 170) }); var orangeFruitClock = new FruitClock({ x: 150, y: 165, diameter: 230, showTicks: true, showPips: true }); var lemonFruitClock = new FruitClock({ x: 450, y: 165, diameter: 210, showTicks: true, outerColor: color(201, 196, 44), innerColor: color(222, 219, 49), pipColor: color(217, 217, 208, 50), hourColor: color(40, 50), minuteColor: color(40, 50), secondColor: color(112, 189, 99), tickColor: color(112, 189, 99), centerColor: color(80) }); var tomatoFruitClock = new FruitClock({ x: 150, y: 465, diameter: 210, showPips: true, outerColor: color(207, 49, 44), innerColor: color(219, 59, 51), pipColor: color(217, 217, 208, 50), hourColor: color(40, 170), minuteColor: color(40, 170), secondColor: color(196, 199, 195, 200), tickColor: color(112, 189, 99), centerColor: color(40, 200) }); var watermelonFruitClock = new FruitClock({ x: 450, y: 465, diameter: 230, showTicks: true, showPips: true, outerColor: color(139, 212, 66), innerColor: color(224, 132, 227), pipColor: color(46, 46, 45, 100), hourColor: color(40, 170), minuteColor: color(40, 170), secondColor: color(196, 199, 195, 200), tickColor: color(45, 48, 45), centerColor: color(40, 200), }); var arcClock1 = new ArcClock({ x: 150, y: 150, diameter: 250 }); var arcClock2 = new ArcClock({ x: 450, y: 150, diameter: 220, hourColor: color(220, 199, 172), minuteColor: color(176, 159, 133), secondColor: color(145, 120, 100), centerColor: color(145, 120, 100), textColor: color(200) }); var arcClock3 = new ArcClock({ x: 150, y: 450, diameter: 220, hourColor: color(72, 110, 158), minuteColor: color(246, 232, 224), secondColor: color(216, 75, 89), hourBackColor: color(255, 0), minuteBackColor: color(255, 0), secondBackColor: color(255, 0), centerColor: color(246, 232, 224, 150), textColor: color(40) }); var arcClock4 = new ArcClock({ x: 450, y: 450, diameter: 250, hourColor: color(86, 175, 193), minuteColor: color(54, 143, 163), secondColor: color(36, 110, 137), hourBackColor: color(255, 0), minuteBackColor: color(255, 0), secondBackColor: color(186, 231, 224), centerColor: color(255, 0), textColor: color(40) }); var ledClock1 = new LEDClock({ x: 25, y: 70, w: 250 }); var ledClock2 = new LEDClock({ x: 50, y: 390, w: 500, backColor: color(38, 37, 37, 200), onColor: color(230, 221, 222), offColor: color(130, 127, 128, 50) }); var ledClock3 = new LEDClock({ x: 50, y: 190, w: 200, h: 40, backColor: color(255, 0), onColor: color(230, 221, 222), offColor: color(130, 127, 128, 50) }); var basicDigitalClock1 = new BasicDigitalClock({ x: 325, y: 25, w: 250, h: 75 }); var basicDigitalClock2 = new BasicDigitalClock({ x: 325, y: 125, w: 250, h: 75, backColor: color(36, 36, 36), textColor: color(56, 140, 134) }); var basicDigitalClock3 = new BasicDigitalClock({ x: 350, y: 220, w: 200, h: 50, backColor: color(40, 50), textColor: color(240) }); //Clock examples var homeClock = new BasicAnalogClock({ x: 300, y: 300, diameter: 650, showText: true, roman: true, outerColor: color(255, 80), innerColor: color(10, 79, 74, 180), hourColor: color(255, 50), minuteColor: color(255, 50), secondColor: color(40, 50), centerColor: color(40, 50), textColor: color(40, 50) }); var dateCardExample1 = new DateCard({ x: 200, y: 320, w: 200, h: 120 }); var basicClockExample1 = new BasicAnalogClock({ x: 300, y: 225, diameter: 210, outerColor: color(255), innerColor: color(240, 114, 83), ticks: 12, tickColor: color(255), hourColor: color(255), minuteColor: color(255), secondColor: color(40) }); var catClock = new BasicAnalogClock({ x: 305, y: 280, diameter: 220, outerColor: color(240), innerColor: color(38, 37, 38), shadowColor: color(255, 0), textColor: color(240), hourColor: color(200), minuteColor: color(200), secondColor: color(245, 128, 147), centerColor: color(245, 128, 147), tickColor: color(220), ticks: 12, showText: true }); var grandfatherClock = new DetailedAnalogClock({ x: 300, y: 226, diameter: 125, roman: true, outerColor: color(247, 211, 52), dateBackColor: color(255, 0) }); var clockTypes = [ "", { name: "Basic Analog", color: color(240) }, { name: "Detailed Analog", color: color(240) }, { name: "Tri", color: color(240) }, { name: "Fruit", color: color(40) }, { name: "Arc", color: color(240) }, { name: "LED / Digital", color: color(240) }, { name: "Example 1", color: color(240) }, { name: "Example 2", color: color(240) }, { name: "Example 3", color: color(240) } ]; scenes = [ //home function() { background(22, 117, 111); //background pattern noStroke(); fill(40, 50); triangle( width, height, width, 0, 0, height); fill(40, 20); triangle( 0, 0, width, height, 0, height); homeClock.tick(); pushStyle(); textFont(createFont("Trebuchet MS")); textAlign(CENTER); textSize(60); fill(240); text("CLOCKS\nCOLLECTION", width/2, height * 0.2); textSize(20); text("A collection of working clocks.\n\nEach one tells the current time and/or date.\n\nFeel free to use any of them in your programs.\n\nEach clock is setup as a seperate object and allows you to pass in properties such as x/y, width/height, colors, etc.\n\nI might add more as time (pun intended) goes by :)", 25, height * 0.40, 550, 600); popStyle(); buttons.start.draw(); }, //basic analog clocks function() { background(63, 178, 171); basicAanalogClock1.tick(); basicAanalogClock2.tick(); basicAanalogClock3.tick(); basicAanalogClock4.tick(); strokeWeight(2); stroke(0, 50); line(300, 0, 300, 600); line(0, 300, 600, 300); }, //detailed analog clocks function() { background(123, 143, 148); detailedAnalogClock1.tick(); detailedAnalogClock2.tick(); detailedAnalogClock3.tick(); detailedAnalogClock4.tick(); strokeWeight(2); stroke(0, 50); line(300, 0, 300, 600); line(0, 300, 600, 300); }, //tri clocks function() { background(97, 98, 99); triClock1.tick(); triClock2.tick(); triClock3.tick(); triClock4.tick(); strokeWeight(2); stroke(0, 50); line(300, 0, 300, 600); line(0, 300, 600, 300); }, //fruit clocks function() { background(248, 201, 133); orangeFruitClock.tick(); lemonFruitClock.tick(); tomatoFruitClock.tick(); watermelonFruitClock.tick(); strokeWeight(2); stroke(0, 50); line(300, 0, 300, 600); line(0, 300, 600, 300); }, //arc clocks function() { background(46, 52, 59); arcClock1.tick(); arcClock2.tick(); arcClock3.tick(); arcClock4.tick(); strokeWeight(2); stroke(200, 50); line(300, 0, 300, 600); line(0, 300, 600, 300); }, //digital clocks function() { background(29, 66, 64); ledClock1.tick(); ledClock2.tick(); ledClock3.tick(); basicDigitalClock1.tick(); basicDigitalClock2.tick(); basicDigitalClock3.tick(); strokeWeight(2); stroke(200, 50); line(300, 0, 300, 300); line(0, 300, 600, 300); }, //example 1 function() { background(63, 178, 171); //background pattern noStroke(); fill(40, 50); triangle( width, height, width, 0, 0, height); fill(40, 20); triangle( 0, 0, width, height, 0, height); //white rectangle noStroke(); fill(245); rect(180, 150, 240, 290); //date card dateCardExample1.display(); //shadow under clock fill(40, 40); ellipse(basicClockExample1.x, basicClockExample1.y + 5, basicClockExample1.diameter, basicClockExample1.diameter); //basic clock basicClockExample1.tick(); }, //example 2 function() { background(33, 83, 97); //pattern background fill(77, 140, 161, 30); noStroke(); for(var row = height; row >= 0; row-= 100) { for(var col = width; col >= 0; col-= 100) { triangle( col, row, col + 50, row, col + 50 / 2, row - 50); } } //cat body noStroke(); fill(38, 37, 38); beginShape(); vertex(477, 208); bezierVertex(504, 207, 527, 206, 544, 204); bezierVertex(546, 191, 546, 184, 551, 179); bezierVertex(560, 183, 563, 191, 567, 197); bezierVertex(575, 198, 585, 198, 590, 202); bezierVertex(592, 212, 581, 218, 575, 221); bezierVertex(572, 232, 570, 242, 565, 244); bezierVertex(558, 238, 556, 232, 552, 226); bezierVertex(525, 229, 501, 238, 483, 252); bezierVertex(481, 269, 477, 309, 478, 337); bezierVertex(492, 353, 516, 366, 536, 373); bezierVertex(544, 364, 552, 356, 559, 356); bezierVertex(563, 364, 563, 372, 559, 378); bezierVertex(564, 382, 568, 388, 568, 398); bezierVertex(564, 405, 556, 407, 550, 407); bezierVertex(547, 415, 541, 421, 536, 420); bezierVertex(531, 415, 529, 407, 530, 397); bezierVertex(520, 390, 503, 382, 486, 390); bezierVertex(478, 396, 470, 406, 458, 412); bezierVertex(429, 422, 330, 422, 251, 421); bezierVertex(221, 425, 206, 442, 215, 461); bezierVertex(233, 475, 262, 483, 286, 470); bezierVertex(304, 452, 330, 438, 351, 461); bezierVertex(364, 486, 346, 512, 324, 530); bezierVertex(299, 549, 261, 555, 229, 552); bezierVertex(195, 547, 162, 527, 145, 500); bezierVertex(131, 471, 136, 438, 148, 414); bezierVertex(148, 395, 137, 381, 117, 380); bezierVertex(96, 380, 84, 386, 73, 393); bezierVertex(77, 404, 80, 413, 76, 420); bezierVertex(70, 422, 60, 413, 58, 402); bezierVertex(42, 400, 36, 398, 35, 393); bezierVertex(35, 387, 41, 382, 46, 379); bezierVertex(44, 368, 43, 358, 47, 351); bezierVertex(58, 351, 61, 354, 63, 361); bezierVertex(81, 360, 112, 358, 123, 327); bezierVertex(129, 298, 128, 273, 128, 254); bezierVertex(107, 235, 80, 223, 54, 220); bezierVertex(54, 230, 53, 237, 48, 244); bezierVertex(40, 246, 34, 239, 32, 223); bezierVertex(24, 219, 18, 212, 17, 206); bezierVertex(18, 200, 22, 197, 32, 196); bezierVertex(34, 184, 36, 176, 42, 171); bezierVertex(53, 173, 56, 183, 57, 193); bezierVertex(74, 200, 108, 206, 128, 208); bezierVertex(131, 166, 141, 139, 147, 112); bezierVertex(145, 73, 140, 39, 137, 20); bezierVertex(168, 26, 189, 37, 211, 52); bezierVertex(230, 58, 249, 57, 270, 54); bezierVertex(292, 51, 320, 50, 346, 56); bezierVertex(366, 56, 382, 50, 400, 41); bezierVertex(420, 32, 436, 25, 460, 19); bezierVertex(460, 46, 455, 66, 450, 81); bezierVertex(453, 103, 461, 124, 468, 142); bezierVertex(474, 164, 476, 185, 476, 205); endShape(CLOSE); //eyes fill(240); ellipse(260, 100, 75, 75); ellipse(334, 100, 75, 75); fill(20); ellipse(286, 95, 25, 27); ellipse(311, 95, 25, 27); //clock on cat catClock.tick(); }, //example 3 function() { background(212, 127, 96); fill(40, 20); triangle(width, 0, width, height, 0, height); fill(40, 10); triangle(0, 0, width, height, 0, height); pushMatrix(); translate(0, -20); //main body noStroke(); fill(244, 172, 119); rect(220, 140, 160, 410); //top arc fill(244, 172, 119); arc(300, 135, 170, 125, 180, 360); fill(224, 154, 101); arc(303, 135, 168, 121, 180, 360); fill(224, 163, 118); arc(303, 135, 160, 115, 180, 360); //top fill(244, 172, 119); rect(200, 130, 200, 15); //shadow fill(40, 20); rect(220, 145, 160, 5); //top rects fill(247, 183, 136); rect(227, 152, 146, 147); //shadow fill(221, 152, 101); rect(233, 158, 134, 135); fill(224, 163, 118); rect(236, 161, 131, 132); //bottom rects fill(192, 131, 84); fill(217, 153, 108); rect(233, 312, 134, 222); //pendulum pushMatrix(); translate(300, 305); rotate(sin(millis() / 1000 * 6 * 60 / 2) * 10); fill(40, 100); strokeWeight(1); rect(-6, 0, 12, 190); fill(204, 200, 86); ellipse(0, 185, 45, 45); popMatrix(); //bottom rects noFill(); stroke(247, 183, 136); strokeWeight(4); rect(227, 306, 146, 234); stroke(201, 134, 87); rect(231, 310, 138, 226); strokeWeight(1); grandfatherClock.tick(); popMatrix(); } ]; draw = function() { background(63, 178, 171); scenes[scene](); if(scene > 0) { if(scene < scenes.length - 1) { buttons.next.draw(); } buttons.previous.draw(); pushStyle(); fill(clockTypes[scene].color); textSize(25); textAlign(CENTER, CENTER); text(clockTypes[scene].name, 300, scene > 6 ? 570 : 300); popStyle(); } cursor(hover ? 'pointer' : 'default'); clicked = false; hover = false; };
Folds	51,53,56,98,99,128,131,258,259,431,432,549,550,702,703,781,782,921,922,996,997,1055,1059,1064,1065,1074,1075,1086,1087,1102,1104,1109,1110,1115,1116,1127,1128,1138,1140,1144,1145,1152,1153,1166,1167,1180,1182,1188,1189,1202,1203,1216,1217,1231,1233,1237,1238,1247,1248,1260,1261,1273,1275,1279,1280,1287,1288,1296,1298,1303,1304,1311,1312,1319,1322,1335,1336,1341,1342,1353,1354,1369,1370,1377,1379,1417,1421,1449,1451,1463,1465,1477,1479,1491,1493,1505,1507,1519,1521,1536,1538,1566,1568,1653,1655,1722
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgL3Ih_q2Cww
Votes	264
Spin-Offs	2
Type	PJS
Width	600
Height	600
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	Gray Wolf 🐺
Author Name	grantjenkins
Author ID	kaid_639291037700385781852565
Author Profile Access	COACH

Archive Data

Added	6 months ago, 1739457824783
Updated	4 months ago, 1744845435122
Source Deleted	unknown