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.
2. Core Function view sourceprint?
01 |
// Global variables global variable |
07 |
// Setup the processing canvas initialization settings |
18 |
// Main draw loop main painting function |
21 |
radius = radius + sin( frameCount / 4 ); |
23 |
// Track circle to new destination |
30 |
// Set fill-color to blue |
33 |
// Set stroke-color white |
37 |
ellipse( X, Y, radius, radius ); |
41 |
// Set Circle's next destination action generated when the user moves the mouse over the canvas |
3. the world's shortest clock code was born view sourceprint?
2 |
size(200, 200);background(0); fill(80); noStroke(); ellipse(100, 100, 160, 160); stroke(255); |
3 |
line(100, 100, cos( TWO_PI*second()/60- HALF_PI) * 70 + 100, sin(TWO_PI*second()/60- HALF_PI) * 70 + 100); |
4 |
line(100, 100, cos( TWO_PI*minute()/60- HALF_PI) * 60 + 100, sin(TWO_PI*minute()/60- HALF_PI) * 60 + 100); |
5 |
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.
4. Complete Code view sourceprint?
05 |
<script src="http://files.cnblogs.com/iamzhanglei/processing.js" type="text/javascript"></script> |
06 |
<script type="application/processing"> |
08 |
size(200, 200);background(0); fill(80); noStroke(); ellipse(100, 100, 160, 160); stroke(255); |
09 |
line(100, 100, cos( TWO_PI*second()/60- HALF_PI) * 70 + 100, sin(TWO_PI*second()/60- HALF_PI) * 70 + 100); |
10 |
line(100, 100, cos( TWO_PI*minute()/60- HALF_PI) * 60 + 100, sin(TWO_PI*minute()/60- HALF_PI) * 60 + 100); |
11 |
line(100, 100, cos(TWO_PI*(hour()%12)/12- HALF_PI) * 50 + 100, sin(TWO_PI*(hour()%12)/12- HALF_PI) * 50 + 100); |
14 |
<canvas> Your browser does not support HTML5. Please use Google, ie9, or Firefox. </canvas> |
5. Online demonstration
Your browser does not support HTML5. Please use Google, ie9 or Firefox ··
