|Click or touch to add new white points.
JavaZ will instantly draw the smoothest curve through all these points! 
- JavaZ is a Browser-Based Drawing App that uses graphic web technologies. JavaZ draws on the fly dynamic images and interactive illustrations ready to be embedded in webpages.
The JAVAZ project
Like the artist paints on a canvas with brushes and oil, the web designer draws in html  pages with code. This was made possible by the graphics technologies enabled by modern browsers. In addition, the code gives him the ability to create his own creative tools. The main purpose of JavaZ is to enjoy this astute and ingenious browser-based graphics capabilities.
As partly shown in the illustration above, the app resulting from the JavaZ project is:
|Responsive||Ready for opendatas|
A JavaZ picture is worth a thousand words
JavaZ is object-oriented, its code is using JS objects to generate creation tools. JavaZ architecture is determined by the choice of the right objects and the organization of the interaction between them.
This website has a specific section to illustrate step by step JavaZ ’s creation tools  :
|Pinning & swinging *|
|Give it a push! *|
|Dynamic masking *|
|Oscillation & swaying|
|Dynamic versatile rendering
JavaZ combines these
creation tools to generate very distinctive graphics of its own.
Browsers are drawing machines
In modern web pages, a drawable region can be declared through the HTML5
<canvas> element. This area is provided by HTML5, the latest HTML version. The HTML5
var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d");
JavaZ, like any HTML5 canvas application, enjoys ubiquitous browser and platform support in addition to widespread webpage support, as nearly 90% of websites have ported to HTML5 .
What’s under the hood?
|Ubiquitous. JavaZ can edit its graphics in any browser, without specific proprietary software program.||Vector based. JavaZ graphics always look nice and crisp, because no matter what size it is, the algorithms are used to work out the shapes in the image, with the values being scaled as it gets bigger.|
JavaZ implements specific features:
|Javaz is interactive and self animated. JavaZ has a built-in animation loop and is well suited for interactive use and physically-based modeling.||JavaZ uses multi-layered rendering, like any modern design app.|
|JavaZ uses JSON, a text format for storing and sending datas over a network. JSON is self-describing and easy to understand. JSON data can easily be sent between computers, and used by any programming language.||JavaZ can draw simple geometrical shapes as provided by the basic canvas API, but also authoring curves and complex shapes. It can for instance fit curves through points.|
|JavaZ is pure JS. That means it is JS library free, jQuery free and not modular to remains compatible with older browsers.||JavaZ is fully web responsive in order to suit different screen widths and resolutions.|
|JavaZ is no « easy to implement » framework , and can not be considered actually as a library. Mainly because it has not already a consistent and clean programming interface.|
|Canvas logic and rendering happens on the same thread as user interaction. The (sometimes heavy) computations involved in animations can harm the app’s real and perceived performance.|
JavaZ, an App for « CODesigner » or « JAVArtist »
Don’t design and code, make code to new design.
The most common and popular images published on the internet by designers or illustrators are raster graphics. These graphics, best used for creating photos, are stored as a two-dimentionnal grid of colored square pixels in raster graphics formats: JPEG, GIF, PNG. They are not interactive, poorly self-animated and responsive to a limited extent.
A much less popular alternative offers more versatility: Scripts graphics or vector graphics. These are not made up of a specific number of dots. Images are stored as a set of geometric shapes (such as points, lines, curves, and polygons) and instructions . A script design is digital art that is rendered by a computer using a mathematical formula.
Any illustrator, draftsman, cartoonist or designer who knows how to code can take advantage of these web technologies. With code and scripts, he may add new dimensions to his graphics, like physics simulation, fine reactive animation, interactivity with viewers, webpages or open datas… It is not just drawing, it is a design engineering too.
The example above shows how a self-animated graphics can react to direct touch or mouse input from the viewer or buttons inputs inside the webpage. It adapts itself to calculate the smoothest curve through succeding drawn points. Even resized on the fly, the graphics will stay sharp and neat.
A CODesigner, a graphic designer who knows how to code, does not walk on two separate legs. The two fields, that of graphics and mathematics, are sometimes so intertwined that this double competence becomes only one, that of finding a new graphic application to mathematical concepts, concepts which are already at the source of many calculations in graphics. This is particularly the case with graphic renderings by fourier transformations, or that provided by the Poincaré Conjecture ... A very simple example is the construction of a curve using Spline-Interpolation. This method can be customized to build your own custom curves, to draw curves in the form of clouds, braces ... and therefore new, diverse and complex shapes.
From Codesigner’s point of view, it is quite clear that the tools popularized by the sometimes monopolistic situation of proprietary but unavoidable applications in the field of graphic design has led to both a certain mathematical indigence and a certain standardization of creative methods. Working as a CODesigner allows you to break free from this framework and explore new graphic territories.
Abstract ideas, pure mathematical concepts, shapes, colors and time are among the ingredients with which a CODEsigner works. To design is to discover relationships and to make arrangements and rearrangements among these ingredients.
Can I embed a JavaZ canvas to my website?
Everytime the canvas is available, a HTML code with the script tag will be published at the footer of the canvas embedding webpage.
- copy the HTML code with the
- paste the
<script>element near the bottom of your HTML file, for instance at the end of the body section.
By default, the canvas will be then inserted directly into the body, as first child, unless you have added a
<div id="javaz"></div> where you want the canvas to be embedded.
The JavaZ canvas is fully responsive and will adapt itself to the room left in the DOM.
Just one more thing…
Programming JavaZ, I was struck by the fact I encountered a bunch of french mathematician along the way:
- Loup Verlet and his Verlet integration for stable animation
- Pierre Béziers and the Bezier curves. This parametric curve is essential to computer graphics. Pierre Béziers used it in the 1960s for designing curves for the bodywork of Renault cars.
- Jean-Baptiste Joseph Fourier and his fourier transform…
Without these froggies, it just would have been impossible… Tous mes respects et merci!
New JavaZ features to come:
- pointer events upgrade.
- audio implementation.
- pointing at the mouse’s pointer with
- motion path Animation (animate an element relative to the x, y and angle values of an Curve/ path element).
- Line drawing animation using the ’stroke-dashoffset’ property.
- Line drawing using Fourier transforms
- SVG parsing capabilities
… and so many other stuff!
As for now:
Goodbye JPEG! Au revoir GIF! Aufwiedersehen PNG!