Monday, December 01, 2008

Sparkling Glass

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
},
]

}
}


Same animation in flash is here : http://www.entheosweb.com/Flash/sparkling_effect.asp

1 comment:

Anonymous said...

Your blog keeps getting better and better! Your older articles are not as good as newer ones you have a lot more creativity and originality now keep it up!