processing实现27款精美时钟集合显示时间代码
代码语言：html
所属分类：其他
代码描述：processing实现27款精美时钟集合显示时间代码，每个时钟都是一个对象，可以修改属性。
代码标签： processing 精美 时钟 显示 时间 代码 集合
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
* {
margin: 0;
box-sizing: border-box;
overflow: hidden;
}
body {
background: #16756f;
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
body #circle {
width: 650px;
height: 650px;
background-color: transparent;
position: absolute;
border: solid 30px #3fb2ab;
border-radius: 50%;
z-index: -1;
}
body canvas {
box-shadow: 0.2em 0.2em 2em #0008;
border: none;
outline: none;
}
</style>
</head>
<body translate="no">
<div id="circle"></div>
<canvas id="canvas"></canvas>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/processing.1.4.8.js"></script>
<script >
var sketchProc = function(processingInstance) {
with (processingInstance) {
size(600, 600);
frameRate(60);
smooth();
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();
document.getElementById("circle").style.display = (scene === 0 ? "block" : "none");
}
}
};
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(radians(i * (360/this.ticks))) * this.radius * 0.85,
cos(radians(i * (360/this.ticks))) * this.radius * 0.85,
sin(radians(i * (360/this.ticks))) * this.radius * 0.9,
cos(radians(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(radians(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(radians(210+i*30))*this.radius * 0.75, cos(radians(210+i*30))*this.radius * 0.75);
}
}
}
//hour hand
stroke(this.hourColor);
strokeWeight(this.radius * 0.04);
line(
0,
0,
sin(radians((this.hour * 30) + (this.minute / 2))) * this.diameter * 0.25,
-cos(radians((this.hour * 30) + (this.minute / 2))) * this.diameter * 0.25);
//minute hand
stroke(this.minuteColor);
strokeWeight(this.radius * 0.02);
line(
0,
0,
sin(radians(this.minute * 6)) * this.diameter * 0.35,
-cos(radians(this.minute * 6)) * this.diameter * 0.35);
//second hand
stroke(this.secondColor);
strokeWeight(this.radius * 0.01);
line(
0,
0,
sin(radians(this.second * 6)) * this.diameter * 0.42,
-cos(radians(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, radians(this.shadow.from), radians(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(radians(i * 30)) * this.radius * 0.55,
cos(radians(i * 30)) * this.radius * 0.55,
sin(radians(i * 30)) * this.radius * 0.65,
cos(radians(i * 30)) * this.radius * 0.65);
//if general numbers...
if(!this.roman) {
text(i+1, -sin(radians(210+i*30))*this.radius * 0.76, cos(radians(210+i*30))*this.radius * 0.76);
}
}
//if roman numbers...
if(this.roman) {
pushMatrix();
for (var i = 0; i < 12; i++) {
rotate(radians(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(radians(i * 6)) * this.radius * 0.65,
cos(radians(i * 6)) * this.radius * 0.65,
sin(radians(i * 6)) * this.radius * 0.60,
cos(radians(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(radians((this.hour * 30) + (this.minute / 2))) * this.diameter * -0.05,
-cos(radians((this.hour * 30) + (this.minute / 2))) * this.diameter * -0.05,
sin(radians((this.hour * 30) + (this.minute / 2))) * this.diameter * 0.25,
-cos(radians((this.hour * 30) + (this.minute / 2))) * this.diameter * 0.25);
//minute hand
stroke(this.minuteColor);
strokeWeight(this.radius * 0.02);
line(
sin(radians(this.minute * 6)) * this.diameter * -0.05,
-cos(radians(this.minute * 6)) * this.diameter * -0.05,
sin(radians(this.minute * 6)) * this.diameter * 0.35,
-cos(radians(this.minute * 6)) * this.diameter * 0.35);
//second hand
stroke(this.secondColor);
strokeWeight(this.radius * 0.01);
line(
sin(radians(this.second * 6)) * this.diameter * -0.1,
-cos(radians(this.second * 6)) * this.diameter * -0.1,
sin(radians(this.second * 6)) * this.diameter * 0.42,
-cos(radians(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, radians(this.shadow.from), radians(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(radians(i * 30)) * this.tickRadius,
cos(radians(i * 30)) * this.tickRadius,
-sin(radians(i * 30)) * this.tickRadius,
-cos(radians(i * 30)) * this.tickRadius);
}
//tick marks
noStroke();
fill(this.tickMinorColor);
for (var i = 0; i < 60; i++){
ellipse(
sin(radians(i * 6)) * this.tickRadius,
cos(radians(i * 6)) * this.tickRadius,
this.radius * 0.015, this.radius * 0.015);
}
fill(this.tickMajorColor);
for (var i = 0; i < 12; i++){
ellipse(
sin(radians(i * 30)) * this.tickRadius,
cos(radians(i * 30)) * this.tickRadius,
this.radius * 0.08, this.radius * 0.08);
}
//triangle
noStroke();
fill(this.triangleColor);
triangle(
sin(radians(this.hour * 30)) * this.tickRadius,
-cos(radians(this.hour * 30)) * this.tickRadius,
sin(radians(this.minute * 6)) * this.tickRadius,
-cos(radians(this.minute * 6)) * this.tickRadius,
sin(radians(this.second * 6)) * this.tickRadius,
-cos(radians(this.second * 6)) * this.tickRadius
);
//hour hand
fill(this.innerColor, 150);
stroke(this.hourColor);
strokeWeight(this.radius * 0.01);
ellipse(
sin(radians(this.hour * 30)) * this.tickRadius,
-cos(radians(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(radians(this.minute * 6)) * this.tickRadius,
-cos(radians(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(radians(this.second * 6)) * this.tickRadius,
-cos(radians(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(radians(a));
var y = r * sin(radians(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(radians(i * 30)) * this.radius * 0.82,
cos(radians(i * 30)) * this.radius * 0.82,
sin(radians(i * 30)) * this.radius * 0.90,
cos(radians(i * 30)) * this.radius * 0.90);
}
}
//hour hand
strokeCap(SQUARE);
stroke(this.hourColor);
strokeWeight(this.radius * 0.05);
line(
0,
0,
sin(radians((this.hour * 30) + (this.minute / 2))) * this.diameter * 0.35,
-cos(radians((this.hour * 30) + (this.minute / 2))) * this.diameter * 0.35);
//minute hand
stroke(this.minuteColor);
strokeWeight(this.radius * 0.04);
line(
0,
0,
sin(radians(this.minute * 6)) * this.diameter * 0.40,
-cos(radians(this.minute * 6)) * this.diameter * 0.40);
//second hand
stroke(this.secondColor);
strokeWeight(this.radius * 0.03);
line(
0,
0,
sin(radians(this.second * 6)) * this.diameter * 0.44,
-cos(radians(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, radians(-90), radians((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, radians(-90), radians((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, radians(-90), radians(((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);
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0