The shortest clock code in the world! Shorter, with wood ?, Shortest clock
I. Introduction
Processing. js is written by John Resig. This is his second masterpiece after Jquery.
Processing. js provides a visual programming language and runtime environment for teaching. By writing a processing program, instructors can present the complex physical, chemical, and mathematical principles to students. For example, you can draw various curves, wave lines, particles, and molecular structures. Of course, you can also draw a group of dynamic figures like swimming in the physiological and health class.
Processing. js is an open programming language that can be used to implement program images, animations, and interactions without using Flash or Java applets.
Processing. js uses JavaScript to draw sharp shapes and operate HTML5 canvas elements to generate image animations.
Processing. js is lightweight, easy to understand, and provides an ideal tool to visualize data, create user interfaces, and develop Web-based games.
| 1234567891011121314151617181920212223242526272829303132333435 | // Global variables Global variableint radius = 50.0;int X, Y;int nX, nY;int delay = 16;// Setup the Processing Canvas initialization settingsvoid setup(){size( 200, 200 );strokeWeight( 10 );frameRate( 15 );X = width / 2;Y = width / 2;nX = X;nY = Y;}// Main draw loop Main painting functionvoid draw(){radius = radius + sin( frameCount / 4 );// Track circle to new destinationX+=(nX-X)/delay;Y+=(nY-Y)/delay;// Fill canvas greybackground( 100 );// Set fill-color to bluefill( 0, 121, 184 );// Set stroke-color whitestroke(255);// Draw circleellipse( X, Y, radius, radius );}// Set circle's next destination action generated when the user moves the mouse over the Canvasvoid mouseMoved(){nX = mouseX;nY = mouseY;} |
| 123456 | void draw() {size(200, 200);background(0); fill(80); noStroke(); ellipse(100, 100, 160, 160); stroke(255);line(100, 100, cos( TWO_PI*second()/60- HALF_PI) * 70 + 100, sin(TWO_PI*second()/60- HALF_PI) * 70 + 100);line(100, 100, cos( TWO_PI*minute()/60- HALF_PI) * 60 + 100, sin(TWO_PI*minute()/60- HALF_PI) * 60 + 100);line(100, 100, cos(TWO_PI*(hour()%12)/12- HALF_PI) * 50 + 100, sin(TWO_PI*(hour()%12)/12- HALF_PI) * 50 + 100);} |
It can be seen that the Code semantics is very strong, with a circle and three lines. This is also one of the purposes of this framework.
Iv. complete code
| 12345678910111213141516 | <!DOCTYPE html><html><head><body><script src="http://files.cnblogs.com/iamzhanglei/processing.js" type="text/javascript"></script><script type="application/processing">void draw() {size(200, 200);background(0); fill(80); noStroke(); ellipse(100, 100, 160, 160); stroke(255);line(100, 100, cos( TWO_PI*second()/60- HALF_PI) * 70 + 100, sin(TWO_PI*second()/60- HALF_PI) * 70 + 100);line(100, 100, cos( TWO_PI*minute()/60- HALF_PI) * 60 + 100, sin(TWO_PI*minute()/60- HALF_PI) * 60 + 100);line(100, 100, cos(TWO_PI*(hour()%12)/12- HALF_PI) * 50 + 100, sin(TWO_PI*(hour()%12)/12- HALF_PI) * 50 + 100);}</script><canvas> Your browser does not support HTML5. Please use Google, IE9, or Firefox. </canvas></body></html> |
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
