Sparkling on glass...

Friday Nov 28, 2008

What to achieve: A sparkling glass(beer glasses are clean and shiny before beer get served) like this.

 So, our aim is to make those sparkling effect on glass. Here is the code in JavaFX(things are little hard coded but better for understanding):

  
package sample;

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.text.Text;
import javafx.scene.text.Font;
import javafx.scene.image.ImageView;
import javafx.scene.image.Image;
import javafx.scene.shape.Rectangle;
import javafx.scene.paint.Color;
import javafx.scene.input.MouseEvent;
import javafx.scene.transform.Rotate;
import javafx.scene.shape.Polygon;
import javafx.animation.Timeline;
import javafx.animation.KeyFrame;
import javafx.animation.Interpolator;
import javafx.scene.shape.Circle;
import  javafx.scene.Group;
/**
 * @author Vaibhav
 */

var r = 0.0;
var t = Timeline {
    repeatCount: Timeline.INDEFINITE
    keyFrames: [
        KeyFrame {
            time: 3s
            canSkip: true
            values: [
                r => 360.0 tween Interpolator.EASEBOTH
            ]
        }
    ]
}
t.play();
var op = 1.0;
var t1 = Timeline {
    repeatCount: Timeline.INDEFINITE
    keyFrames: [
        KeyFrame {
            time: 3s
            canSkip: true
            values: [
                op => 0.0 tween Interpolator.EASEBOTH
            ]
        }
    ]
}
t1.play();

Stage {
    title: "Sparkling on Glass"
    width: 250
    height: 480
    scene: Scene {
        fill: Color.BLACK
        content: [
            ImageView {
                image: Image {
                    url: "{__DIR__}wineglass.png"
                }
            }
            Polygon {
                rotate: bind r;
                translateX: 130
                translateY: 100
                scaleX: 0.5
                scaleY: 0.5
                points: [ 0,0, 2,-50, 4,0, 54,2,4,4,2,54,0,4,-50,2]
                fill: Color.WHITE
                opacity: bind op
            },
            Polygon {
                rotate: 45;
                scaleX: 0.25
                scaleY: 0.25
                translateX: 130
                translateY: 100
                points: [ 0,0, 2,-50, 4,0, 54,2,4,4,2,54,0,4,-50,2]
                fill: Color.WHITE
                opacity: bind 1 - op
            },
            Polygon {
                rotate: bind r;
                translateX: 50
                translateY: 50
                scaleX: 0.5
                scaleY: 0.5
                points: [ 0,0, 2,-50, 4,0, 54,2,4,4,2,54,0,4,-50,2]
                fill: Color.WHITE
                opacity: bind op
            },
            Polygon {
                rotate: 45;
                scaleX: 0.25
                scaleY: 0.25
                translateX: 50
                translateY: 50
                points: [ 0,0, 2,-50, 4,0, 54,2,4,4,2,54,0,4,-50,2]
                fill: Color.WHITE
                opacity: bind 1 - op
            },
            Polygon {
                rotate: bind r;
                translateX: 30

                translateY: 120
                scaleX: 0.5
                scaleY: 0.5
                points: [ 0,0, 2,-50, 4,0, 54,2,4,4,2,54,0,4,-50,2]
                fill: Color.WHITE
                opacity: bind op
            },
            Polygon {
                rotate: 45;
                scaleX: 0.25
                scaleY: 0.25
                translateX: 30
                translateY: 120
                points: [ 0,0, 2,-50, 4,0, 54,2,4,4,2,54,0,4,-50,2]
                fill: Color.WHITE
                opacity: bind 1 - op
            },
        ]

    }
} 

Like this post? | | | |

Posted at 02:04PM Nov 28, 2008 by vaibhavc in Java
Tags: animation effect javafx