Déformations par déplacement des pixels en JavaFX - 3 avril 2009
Rétroliens
Rétrolien spécifique pour ce billet
Pas de rétroliens
Mon blog technique, artistique, d’humeur... Continuer »
Encore une applet JavaFX pour répondre dans les forums Sun: Effect FloatMap (see this thread if you don't read French!). J'aime bien ces questions me permettant d'explorer quelques coins méconnus (par moi) de l'API.
Ici, il s'agissait d'une question sur FloatMap, m'amenant à m'intéresser à DisplacementMap.
J'ai commencé à écrire un peu de code, basé sur l'exemple de l'API, à le copier pour faire des variations, puis, comme je fais souvent, horrifié de voir une répétition, j'ai généralisé et factorisé le code.
/* * Showing the effects of the various FloatMaps on DisplacementMaps. * * Author: Philippe Lhoste <PhiLho(a)GMX.net> http://Phi.Lho.free.fr * * Copyright notice: See the PhiLhoSoftLicence.txt file for details. * This file is distributed under the zlib/libpng license. * Copyright (c) 2009 Philippe Lhoste / PhiLhoSoft */ /* File history: * 1.00.000 -- 2009/03/23 (PL) -- Creation */ /* Copyright notice: For details, see the following file: http://Phi.Lho.free.fr/softwares/PhiLhoSoft/PhiLhoSoftLicence.txt This program is distributed under the zlib/libpng license. Copyright (c) 2009 Philippe Lhoste / PhiLhoSoft */ import javafx.stage.Stage; import javafx.scene.Scene; import javafx.scene.Node; import javafx.scene.CustomNode; import javafx.scene.Group; import javafx.scene.Cursor; import javafx.scene.image.Image; import javafx.scene.image.ImageView; import javafx.scene.layout.*; // HBox, VBox... import javafx.scene.paint.*; // Color, LinearGradient, RadialGradient... import javafx.scene.shape.*; // Line, Rectangle, Circle, Ellipse... import javafx.scene.text.*; // Text, Font... import javafx.scene.transform.*; // Transform, Transalte, Rotate, Scale... import javafx.scene.effect.*; // Blend, DisplacementMap, XxxBlur, XxxShadow, Reflection... import javafx.animation.*; // Timeline, KeyFrame, KeyValue... import javafx.animation.transition.*; // AnimationPath, Transition, XxxTransition, OrientationType import javafx.scene.input.KeyCode; import javafx.scene.input.KeyEvent; import javafx.scene.input.MouseButton; import javafx.scene.input.MouseEvent; import java.lang.Math; import java.util.Random; import java.util.ArrayList; def W = 220; def H = 70; def M = 10; def BANNER_NB = 6; def bTestWrap = false; var maps: FloatMap[] = for (i in [ 0 ..< BANNER_NB ]) FloatMap { width: W height: H } for (x in [ 0 ..< W ]) { var angle = Math.PI * x / 50.0; var v = Math.sin(angle) / 20.0; for (y in [ 0 ..< H]) { maps[0].setSamples(x, y, 0, 0); maps[1].setSamples(x, y, v); maps[2].setSamples(x, y, 0, v); maps[3].setSamples(x, y, v, v); var sq = Math.sqrt(x * x + y * y); maps[4].setSamples(x, y, (115 - sq) / 115.0); maps[5].setSamples(x, y, 0, ((x as Number) / H) * ((y as Number) / W) * 4.7); } } class Banner extends CustomNode { var message: String; override protected function create(): Node { println(message); Group { content: [ Rectangle { x: 0, y: 0 width: W height: H fill: LinearGradient { startX: 0.0, startY: 0.0, endX: 10.0, endY: 0.0 proportional: false cycleMethod: CycleMethod.REFLECT, stops: [ Stop { offset: 0.0, color: Color.BLUE } Stop { offset: 1.0, color: Color.LIGHTBLUE } ] } } Text { x: 25, y: H / 1.6 content: message fill: Color.YELLOW font: Font.font(null, FontWeight.BOLD, 36); } ] } } } var messages = [ "Reference", "Accordion", "Wavy Text", "Dizzy Text", "OxoXoxO", "XoxOxoX" ]; Stage { title: "Displacement Maps" visible: true scene: Scene { width: W + 2 * M height: BANNER_NB * (H + M) fill: Color.web('#00BABE') content: for (groupIdx in [ 0 ..< BANNER_NB ]) Group { effect: DisplacementMap { mapData: maps[groupIdx], wrap: bTestWrap } cache: true translateX: M translateY: M + groupIdx * H content: Banner { message: messages[groupIdx] } } } }
Ça manque un peu de commentaires... J'espère que c'est assez clair. J'utilise des imports assez génériques dans mes tests, n'utilisant pas NetBeans qui fourni sans doute automatiquement les imports nécessaires.
De façon amusante, FloatMap offre quatre bandes, mais DisplacementMap n'en utilise que deux (x et y). Je suppose que les deux autres anticipent des effets futurs (3D ? temps ?) voire personnalisés.
Une petite copie d'écran pour avoir une idée du résultat final.
J'ai pas compris pourquoi la vague est plus accentuée en bas qu'en haut...
Je suis tout fier que Jim Weaver ait fait un commentaire élogieux sur ce petit test !
© PhiLho / PhiLhoSoft | Site principal Design par PhiLho (basé sur un template de ceejay/Carl Galloway) | Motorisé par SerendipityAdmin