P5.js Clock

Developer
Ruslan Marin
Size
2,414 Kb
Views
24,288
  1. P5.js Clock Previews
  2. P5.js Clock HTML Codes
  3. P5.js Clock JS Codes

How do I make an p5.js clock?

What is a p5.js clock? How do you make a p5.js clock? This script and codes were developed by Ruslan Marin on 07 December 2022, Wednesday.

P5.js Clock Previews
IQ Test

P5.js Clock - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>p5.js Clock</title>
</head>
<body> <div id="canvasContainer"><div> <script src='https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.6/p5.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

P5.js Clock - Script Codes JS Codes

var sketchProc = function(p5) { var hhR; var hhTheta = 0; var hhX; var hhY = 0; var mmR; var mmTheta = 0; var mmX; var mmY = 0; var ssR; var ssTheta = 0; var ssX; var ssY = 0; var ssmR; var ssmTheta = 0; var ssmX; var ssmY = 0; var msR; var msTheta = 0; var msX; var msY = 0; var tickR; var tickSize = 5; var calculateNextFrame = function() { var time = new Date(); msTheta = 2*Math.PI / 1000 * time.getMilliseconds(); msX = msR * Math.cos(msTheta); msY = msR * Math.sin(msTheta); ssTheta = 2*Math.PI / 60 * time.getSeconds(); ssX = ssR * Math.cos(ssTheta); ssY = ssR * Math.sin(ssTheta); ssmTheta = 2*Math.PI / 60 * time.getSeconds() + msTheta / 60; ssmX = ssmR * Math.cos(ssmTheta); ssmY = ssmR * Math.sin(ssmTheta); mmTheta = 2*Math.PI / 60 * time.getMinutes() + ssTheta / 60; mmX = mmR * Math.cos(mmTheta); mmY = mmR * Math.sin(mmTheta); hhTheta = 2*Math.PI / 12 * time.getHours() + mmTheta / 12; hhX = hhR * Math.cos(hhTheta); hhY = hhR * Math.sin(hhTheta); }; var drawTicks = function() { var tickTheta = 0; var tickX = tickR; var tickY = 0; var d = tickSize; p5.fill(0,255,0); for (var i = 0; i < 60; i++) { tickTheta = 2*Math.PI / 60 * i; tickX = tickR * Math.cos(tickTheta); tickY = tickR * Math.sin(tickTheta); d = i % 5 === 0 ? tickSize * 2 : tickSize; p5.ellipse(tickX, tickY, d, d); } }; var drawCenter = function() { p5.fill(255, 255, 0); p5.ellipse(0,0,10,10); }; var drawHand = function(x, y) { p5.stroke(255,255,0); p5.line(0, 0, x, y); p5.stroke(0); }; var drawMs = function() { p5.fill(0); p5.ellipse(msX, msY, tickSize * 3, tickSize * 3); }; var drawDigitalTime = function() { var time = new Date(); var hh = (hh = time.getHours()) > 9 ? hh : "0" + hh; var mm = (mm = time.getMinutes()) > 9 ? mm : "0" + mm; var ss = (ss = time.getSeconds()) > 9 ? ss : "0" + ss; var ms = (ms = time.getMilliseconds()) > 99 ? ms : ms > 9 ? "0" + ms : "00" + ms; var formattedTime = + hh + ":" + mm + ":" + ss + "." + ms; p5.fill(0, 255, 0); p5.textAlign(p5.LEFT, p5.TOP); p5.textSize(24); p5.text(formattedTime, 5, 5); p5.textSize(18); p5.push(); p5.translate(p5.width/2, p5.height/2); p5.rotate(-Math.PI/2); p5.translate(hhX, hhY); p5.rotate(Math.PI/2); p5.textAlign(p5.CENTER, p5.CENTER); p5.fill(0); p5.ellipse(0, 0, 24, 24); p5.fill(0, 255, 0); p5.text(hh, 0, 0); p5.pop(); p5.push(); p5.translate(p5.width/2, p5.height/2); p5.rotate(-Math.PI/2); p5.translate(mmX, mmY); p5.rotate(Math.PI/2); p5.textAlign(p5.CENTER, p5.CENTER); p5.fill(0); p5.ellipse(0, 0, 24, 24); p5.fill(0, 255, 0); p5.text(mm, 0, 0); p5.pop(); }; p5.setup = function() { p5.frameRate(30); p5.createCanvas(400,400); p5.colorMode(p5.RGB); hhX = hhR = p5.width / 5; mmX = mmR = p5.width / 3; ssX = ssR = p5.width / 3; ssmX = ssmR = p5.width / 3; msX = msR = p5.width / 2 - p5.width / 8; tickR = p5.width / 2 - p5.width / 8; }; p5.draw = function(){ p5.background(0); calculateNextFrame(); p5.push(); p5.translate(p5.width/2, p5.height/2); p5.rotate(-Math.PI/2); drawTicks(); drawCenter(); drawHand(hhX, hhY); drawHand(mmX, mmY); drawHand(ssX, ssY); drawHand(ssmX, ssmY); drawMs(); p5.fill(255,255,0); p5.arc(0, 0, ssR * 2, ssR * 2, ssTheta, ssmTheta); p5.pop(); drawDigitalTime(); };
};
new p5(sketchProc, document.getElementById("canvasContainer"));
P5.js Clock - Script Codes
P5.js Clock - Script Codes
Home Page Home
Developer Ruslan Marin
Username marinru
Uploaded December 07, 2022
Rating 3
Size 2,414 Kb
Views 24,288
Do you need developer help for P5.js Clock?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Ruslan Marin (marinru) Script Codes
Name
SimplePager
Vue.js User Input
Sidescroller with p5.js
KO Components Demo
Vue.js Attribute Binding
Phone Call Links
Vue.js Conditional Visibility
A Pen by Ruslan Marin
Component State
Component Props
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!