Skip to content

Instantly share code, notes, and snippets.

@stevenklise
Created January 30, 2013 18:35
Show Gist options
  • Save stevenklise/4675519 to your computer and use it in GitHub Desktop.
Save stevenklise/4675519 to your computer and use it in GitHub Desktop.
Getting started with processing.js http://jsfiddle.net/mzB4h/
<html>
<head>
<script src="http://cloud.github.com/downloads/processing-js/processing-js/processing-1.4.1.js"></script>
<script>
function sketchProc(processing) {
// Override draw function, by default it will be called 60 times per second
// void draw() { ... }
processing.draw = function() {
// determine center and max clock arm length
var centerX = processing.width / 2, centerY = processing.height / 2;
var maxArmLength = Math.min(centerX, centerY);
function drawArm(position, lengthScale, weight) {
processing.strokeWeight(weight);
processing.line(centerX, centerY,
centerX + Math.sin(position * 2 * Math.PI) * lengthScale * maxArmLength,
centerY - Math.cos(position * 2 * Math.PI) * lengthScale * maxArmLength);
}
// erase background
processing.background(224);
var now = new Date();
// Moving hours arm by small increments
var hoursPosition = (now.getHours() % 12 + now.getMinutes() / 60) / 12;
drawArm(hoursPosition, 0.5, 5);
// Moving minutes arm by small increments
var minutesPosition = (now.getMinutes() + now.getSeconds() / 60) / 60;
drawArm(minutesPosition, 0.80, 3);
// Moving hour arm by second increments
var secondsPosition = now.getSeconds() / 60;
drawArm(secondsPosition, 0.90, 1);
};
}
window.onload = function () {
var canvas = document.getElementById("canvas1");
// attaching the sketchProc function to the canvas
var processingInstance = new Processing(canvas, sketchProc);
}
</script>
</head>
<body>
<canvas id="canvas1"></canvas>
</body>
</html>
Copy link

ghost commented May 8, 2020

how do you make the size bigger?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment