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:

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

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:

JavaZ implements specific features:

Nevertheless:

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,

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:

As for now:

Goodbye JPEG! Au revoir GIF! Aufwiedersehen PNG!