The JavaZ project

What is JavaZ?

JavaZ is a drawing application for creating dynamic and interactive internet images.

Click or touch to add new white points.
JavaZ will instantly draw the smoothest curve through all these points! [1]

Play/Pause

Reset

JavaZ

\ˈdʒɑ.vəz\

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 [2] 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:

Interactive Self-animated
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 [3] :

The JavaZ project
Creation tool
Gravitationnal drawing massPoint
Pinning & swinging * massPoint
Give it a push! * massPoint
Dynamic masking * massPoint
Geometrical drawing -----mathPoint--------------
Engineering drawing /\/\/\/\/\/junction/\/\/\/\/\/
Dynamic cropping
environment
Oscillation & swaying engine
Dynamic versatile rendering

render
* Forthcoming

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 <canvas> element is an API [4], a programming interface. It can be accessed only through a coding language full of drawing functions: Javascript.

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");

JavaScript (JS) is the third most popular programming language and was initially created to “make web pages alive”. JS programs are called scripts. They can be written right in a web page’s HTML and run automatically as the page loads.

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 [5].

What’s under the hood?

JavaZ mostly inherits from the specs of Javascript and the HTML5 canvas element:

Versatile and beginner-friendly. Javascript is the world’s most popular scripting language for front-end web developer. Open source. JavaZ uses exclusively free basic resources and operates system free and mobile friendly.
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.

Nevertheless:

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 [6]. A script design is digital art that is rendered by a computer using a mathematical formula.

The HTML5 <canvas> element inherits from vector graphics and the tremendous versatility of JavaScript, allowing for interactive and dynamically generated graphics, graphs, animations, games, and image composition.

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?

Yes,

...and it is as simple as adding a FB like button.

Everytime the canvas is available, a HTML code with the script tag will be published at the footer of the canvas embedding webpage.

  1. copy the HTML code with the <script> element.
  2. 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.

<!DOCTYPE html>
<html>
<head></head>
<body>
 
/*
your HTML code
*/
 
<div id="javaz"></div>
 
/*
your HTML code
*/
 
<script type="text/javascript" src="https://javaz.graphics/squelettes/js/javaz.js?jsonSrc=squelettes/json/json_autoCurve.txt;renderSrc=squelettes/render/render_autoCurve.js;CrossOrigin=true" defer>
 
</body>
</html>

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!

What’s next?

New JavaZ features to come:

  • massPoint particles collision.
  • pointer events upgrade.
  • audio implementation.
  • pointing at the mouse’s pointer with arc.tan()
  • 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!

[1Other javaz features are also available in this illustration, but you can find out for yourself

[2HTML stands for Hypertext Markup Language, is the document format used for web pages

[3Technical mathematical explanations and notions are kept to a minimum if not crucial to understanding the subject.

[4An API is a set of features and rules that exist inside a software program (the application) enabling interaction with it through software - as opposed to a human user interface. The API can be seen as a simple contract (the interface) between the application offering it and other items, such as third party software or hardware.

[5HTML5 Canvas can be accessed from desktops , tablets , and smartphones .

[6Script graphics areideal for logos. A typical script or vector file is a printable text that describes both straight and curved paths