background preloader

Processing.js

Processing.js
Basic Syntax A brief look at the structure of a Processing sketch reveals how easy it is to program interactive visualizations. As with any language, you begin by defining your global variables. The next step is to create your draw() function, which controls the behavior of each frame in your animation. To the right is a basic example of Processing.js in action. // Global variablesfloat radius = 50.0;int X, Y;int nX, nY;int delay = 16; // Setup the Processing Canvasvoid setup(){ size( 200, 200 ); strokeWeight( 10 ); frameRate( 15 ); X = width / 2; Y = height / 2; nX = X; nY = Y; } // Main draw loopvoid draw(){ radius = radius + sin( frameCount / 4 ); // Track circle to new destination X+=(nX-X)/delay; Y+=(nY-Y)/delay; // Fill canvas grey background( 100 ); // Set fill-color to blue fill( 0, 121, 184 ); // Set stroke-color white stroke(255); // Draw circle ellipse( X, Y, radius, radius ); } // Set circle's next destinationvoid mouseMoved(){ nX = mouseX; nY = mouseY; } Using Processing Related:  interacción-animación-kinect

Workshop / Chrome Experiments Unfortunately, either your web browser or your graphics card doesn't support WebGL. We recommend you try it again with Google Chrome. Interactivo Gráficos 3D Curso Con Three.js y WebGL When does the course begin? This class is self paced. You can begin whenever you like and then follow your own pace. It’s a good idea to set goals for yourself to make sure you stick with the course. How long will the course be available? This class will always be available! How do I know if this course is for me? Take a look at the “Class Summary,” “What Should I Know,” and “What Will I Learn” sections above. Can I skip individual videos? Yes! How much does this cost? It’s completely free! What are the rules on collaboration? Collaboration is a great way to learn. Why are there so many questions? Udacity classes are a little different from traditional courses. What should I do while I’m watching the videos? Learn actively!

FlowingData | Data Visualization, Infographics, and Statistics Processing.org Introduction to Circos, Features and Uses // CIRCOS Circular Genome Data Visualization Breathing Wall: projection mapping onto a moving surface using a depth camera Wouldn't it be nice if we could sense information about the surface of objects at our fingertips? The way we touch objects, how firm we press them and generally how we move info the physical space can all be reflected onto the surface of the surrounding environment. Through this project I am going to show how to do a real time projection mapping onto the surface. This project is part of an interactive art installation, about which you can find more information here: The main objective of the projection mapping is to project Contour Lines for displaying spatial information about the surface in real time. For whom can this project be useful? Why topographic lines? In “Breathing Wall 2.0” since the rods moved the surface, information about the surface was constantly changing. So the procedure I used is as follows:

BVH Importador This software ("the Software Product") and accompanying documentation is licensed and not sold. This Software Product is protected by copyright laws and treaties, as well as laws and treaties related to other forms of intellectual property. The author owns intellectual property rights in the Software Product. Acceptance YOU ACCEPT AND AGREE TO BE BOUND BY THE TERMS OF THIS AGREEMENT BY SELECTING THE "ACCEPT" OPTION AND DOWNLOADING THE SOFTWARE PRODUCT OR BY INSTALLING, USING, OR COPYING THE SOFTWARE PRODUCT. License Grant This Agreement entitles you to install and use one copy of the Software Product. Restrictions on Transfer Without first obtaining the express written consent of the author, you may not assign your rights and obligations under this Agreement, or redistribute, encumber, sell, rent, lease, sublicense, or otherwise transfer your rights to the Software Product. Limitation of Remedies and Damages Any claim must be made within the applicable warranty period.

50 grandes sitios web de scroll parallax | Diseño web | Bloq Creativa Today's advanced web technologies make it possible to create remarkable effects in the browser. While these effects can be gimmicky, when employed in the right way they can result in a distinctive and memorable website. One fairly recent web design trend is parallax scrolling, which involves the background moving at a slower rate to the foreground, creating a 3D effect as you scroll down the page. It can sometimes be overwhelming, but when used sparingly it can provide a nice, subtle element of depth. You'll find more advice in our pro tips for building parallax websites post. But to show how it should be done, we've collected together sites that employ the technique to good effect. The 41 greatest free web fonts 01. A-dam designs original boxer briefs and shorts for men with character, using GOTS-certified organic cotton and hand-made by people with fair wages and normal working hours. 02. 03. Choose a website builder: 16 top tools 04. 05. 06. 07. 08. 09. 10. 11. 12. 13. 14. 15. 16. 17.

Related: