JavaZ

Pendulum wave

Lexi — 2022-03-30T08:43:22Z

https://javaz.graphics/js/javaz.js?jsonSrc=js/json/json_pendulum.txt;renderSrc=js/render/render_pendulum.js

Harmonic waves created by a serie of simple gravity pendulums looked end on.
Gravity	Play/Pause	Reset

`<` `^` `>`	Push the pendulum around with arrow keys. Keyboards only.
	Drag and drop any pendulum

The wave pendulum consists of a series of pendulum with increasing length. All pieces are first pushed upwards out of their stable point and release sideways. The very first few swings are going in line. Then they start to go back and forth at different rates.

This device shows a hypnotic effect by having a series of pendula with increasing time periods, producing the effect of a wave. The visual effect here is enhanced by a rendering based on perlin noise.

You can fully test the pendulum by manipulating it or simply toggling the gravity.

Summer Watch

Lexi — 2022-03-25T07:00:00Z

https://javaz.graphics/js/javaz.js?jsonSrc=js/json/json_summer_watch.txt;renderSrc=js/render/render_summer_watch.js

Swipe your finger or mouse on the watch to view time with figures!

Swipe the fracta!

Lexi — 2022-03-23T07:00:00Z

https://javaz.graphics/js/javaz.js?jsonSrc=js/json/json_swipe_fracta.txt;renderSrc=js/render/render_swipe_fracta.js

Move your finger or mouse across the illustration in any direction.
From Fractal...	To peace !
Latin fractus	Latin pāx
Broken, shattered, having been broken.	A state of tranquility, quiet, and harmony; absence of violence.

нет войне!

Draw it with Post-it®

Lexi — 2022-03-18T11:16:16Z

https://javaz.graphics/js/javaz.js?jsonSrc=js/json/json_post_it_pile.txt

Size	Span	Tenseness

	Alpha	Quantity
on window resize

`<` `^` `>`	Push the Post-it® around with arrow keys. Keyboards only.
	Drag and drop any Post-it®

This illustration is based on Perlin noise, a type of gradient noise developed by Ken Perlin.

This HTML5 canvas might be flickering in Google Chrome since Chromium version 83, but appears to be fixed on more recent versions.

Punching Putin!

Lexi — 2022-03-15T14:58:40Z

https://javaz.graphics/js/javaz.js?jsonSrc=js/json/json_punching_putin.txt

You can grab Putin anywhere you want by using your finger or mouse. Move him, punch him, shake him, throw him against the walls... Yes, it feels good.

Your punching Rate:

Your punching rate will be measured by its regularity and strength.

нет войне! Stop the war!

Circle restlessness

Lexi — 2022-03-01T22:27:13Z

https://javaz.graphics/js/javaz.js?jsonSrc=js/json/json_circle_restlessness.txt

[EN]	[FR]	[DE]
Circle restlessness	Cercle d'agitation	Kreis Unruhe
Interactive digital art	Art numérique interactif	Interaktive digitale Kunst
Interact with the dynamic vector illustration by swipe or mouse.	Interagissez avec l'illustration vectorielle dynamique par le swipe ou la souris.	Interagieren Sie mit der dynamischer Vektorillustration durch Wischen oder Maus.

A 12 letter icon

Lexi — 2022-02-25T20:16:41Z

https://javaz.graphics/js/javaz.js?jsonSrc=js/json/json_ldfunes_motus.txt

HOW TO PLAY / RÉGLES du JEU / SPIELANLEITUNG
[EN]	[FR]	[DE]
12 letters = 12 strokes	12 lettres = 12 traits	12 Buchstaben = 12 Striche
12 strokes are enough to draw this cinema icon. Type the 12 letters of its name to reveal these 12 strokes.	12 traits suffisent pour dessiner cette icône du cinéma. Tapez les 12 lettres de son nom pour faire apparaître ces 12 traits.	12 Striche reichen aus, um diese Kinoikone zu zeichnen. Geben Sie die 12 Buchstaben seines Namens ein, um diese 12 Striche erscheinen zu lassen.

	←		The letter Y is in the word and in the correct spot.
	←		The letter S is in the word but in the wrong spot.
	←		The letter W is not in the word in any spot.

The game of Hairlebrity

Lexi — 2022-02-11T13:38:47Z

https://javaz.graphics/js/javaz.js?jsonSrc=js/json/kinski.txt

HOW TO PLAY / RÉGLES du JEU / SPIELANLEITUNG
[EN]	[FR]	[DE]
Give him a haircutt!	Offrez-lui une coupe de cheveux!	Geben Sie ihm einen Haarschnitt!
He played bald the role of Count Dracula in the movie "Nosferatu". Find his name and give him a haircut.	Il a joué chauve le rôle du Comte Dracula dans le film "Nosferatu". Trouvez-lui son nom et offrez-lui une coupe de cheveux.	Er spielte glatzköpfig die Rolle des Grafen Dracula im Film „Nosferatu“. Finden Sie seinen Namen und geben Sie ihm einen Haarschnitt.

	←		The letter Y is in the word and in the correct spot.
	←		The letter S is in the word but in the wrong spot.
	←		The letter W is not in the word in any spot.

What they teach in these acting schools is incredible, hair-raising crap. The Actors Studio in America is supposed to be the worst. There the students learn how to be natural - that is, they flop around, pick their noses, scratch their balls. This bullshit is known as "method acting." How can you "teach" someone to be an actor? How can you teach someone how and what to feel and how to express it? How can someone teach me how to laugh or cry? How to be glad and how to be sad? What pain is, or despair or happiness? What poverty and hunger are? What hate and love are? What desire is, and fulfillment? No, I don't want to waste my time with these arrogant morons.

— Klaus Kinski Source: Kinski Uncut : The Autobiography of Klaus Kinski (1996), p. 59
Source: https://quotepark.com/authors/klaus-kinski/

A nine letter icon

Lexi — 2022-02-03T21:00:00Z

https://javaz.graphics/js/javaz.js?jsonSrc=js/json/hitchcock_aldeguer.txt

HOW TO PLAY / RÉGLES du JEU / SPIELANLEITUNG
[EN]	[FR]	[DE]
9 letters = 9 strokes	9 lettres = 9 traits	9 Buchstaben = 9 Striche
9 strokes are enough to draw this cinema icon. Type the 9 letters of its name to reveal these 9 strokes.	9 traits suffisent pour dessiner cette icône du cinéma. Tapez les 9 lettres de son nom pour faire apparaître ces 9 traits.	9 Striche reichen aus, um diese Kinoikone zu zeichnen. Geben Sie die 9 Buchstaben seines Namens ein, um diese 9 Striche erscheinen zu lassen.

	←		The letter Y is in the word and in the correct spot.
	←		The letter S is in the word but in the wrong spot.
	←		The letter W is not in the word in any spot.

Courtesy of (c) Joaquim Aldeguer, caricaturist/illustrator based in Spain. See more from Aldeguer on Instagram or Facebook

Dynamic coloring

Lexi — 2022-01-31T07:00:00Z

https://javaz.graphics/js/javaz.js?jsonSrc=js/json/json_eiffel_7.txt;renderSrc=js/render/render_eiffel_7.js


	A dynamic colored Eiffel tower with an afterimage effect

The dynamic coloring is one of the most obvious display of JavaZ's permanent animation loop. It updates both the motion of the Eiffel Tower and the whole render, which includes the coloring. Frame after frame, all render settings depend on a single variable, the id returned from a Javascript Window Object and generated by JavaZ animation loop: setTimeout().

	toggle the gravity force (off by default) to drop the structure to the ground
	play and pause the animation loop (on by default)
	reset or reload the complete graphic

JavaZ animation loop

animate_canvas() is the function which runs the animation code. This function first updates the state of the canvas element. Then it confers this update to the canvas context in order to draw it. animate_canvas() then iterates its own first steps simply by calling itself back again, hence generating an infinite recursion [1].

function animate_canvas() { if (clearRect){context.clearRect(0,0,width,height);} update_canvas(); render_canvas(context); t = setTimeout(animate_canvas, 35); }

JavaZ calls animate_canvas(), which in turn calls update_canvas(). This function updates the current state on the canvas. Meanwhile, if required by a "clearRect" boolean, the clearRect() method clears the whole canvas element or the specified pixels within a given rectangle [2].
once the update completed, render_canvas(context) draws the updated state of the canvas element.
Then, JavaZ calls the setTimeout() function. The setTimeout() method calls a function, namely its own calling function, after a lapsetime by default of 25 milliseconds (40 frames per second). The setTimeout() is normally executed only once. As it directly causes animate_canvas() to be carried out again, it generates a loop unless something 's done to stop it.

If a repeated executions is needed, the setInterval() method ist normally used in Javascript. But JavaZ uses instead the id returned from the setTimeout() method as a time variable (t). This allows JavaZ to update the canvas according to time and to enjoy the benefit of it. The time variable allows to:

indirectly set the number of frames per second through the setTimeout() method,
pause or stop the animation by clearing out and reseting the id of the setTimeout() method,
reset the canvas state on reload or resize of the window (responsiveness),
trigger an event at some point. No need to code an additional stopwatch.

[1] This is quite a common thing in fractals

[2] By jumping out the clearRect() method, JavaZ can apply graphic effects like the afterimage (ghost or shadow) effect in this JavaZ illustration.