JavaFX: Blending of 2 images

Blending of 2 images.

If you look at line 36, we are using the difference mode:

top.setBlendMode(BlendMode.DIFFERENCE);

The DIFFERENCE mode is defined as: The darker of the color components from the two inputs are subtracted from the lighter ones to produce the resulting color.

So in the screenshot below, the image in the middle is the blended image.

package pepsichallenge;

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.effect.BlendMode;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.HBox;
import javafx.stage.Stage;

/**
 * Blend a coke can and a pepsi can to find the difference.
 */
public class PepsiChallenge extends Application {

    @Override
    public void start(Stage stage) {
        Image coke = new Image(
                "http://icons.iconarchive.com/icons/michael/coke-pepsi/256/Coca-Cola-Can-icon.png"
        );

        Image pepsi = new Image(
                "http://icons.iconarchive.com/icons/michael/coke-pepsi/256/Pepsi-Can-icon.png"
        );

        ImageView bottom = new ImageView(coke);
        ImageView top = new ImageView(pepsi);
        top.setBlendMode(BlendMode.DIFFERENCE);

        Group blend = new Group(
                bottom,
                top
        );

        HBox layout = new HBox(10);
        layout.getChildren().addAll(
                new ImageView(coke),
                blend,
                new ImageView(pepsi)
        );
        layout.setPadding(new Insets(10));
        stage.setScene(new Scene(layout));
        stage.show();
    }

    public static void main(String[] args) {
        launch();
    }
}

pepsi

JavaFX: Drawing a 3D sphere

This entry is part 55 of 55 in the series JavaFX

Drawing a 3D sphere.

package draw3dsphere;

import javafx.application.Application;
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.SubScene;
import javafx.scene.Group;
import javafx.scene.layout.BorderPane;
import javafx.scene.PerspectiveCamera;
import javafx.scene.PointLight;
import javafx.scene.paint.Color;
import javafx.scene.paint.PhongMaterial;
import javafx.scene.shape.Sphere;
import javafx.scene.transform.Translate;

public class Draw3DSphere extends Application {

    @Override
    public void start(Stage stage) throws Exception {
        // 3D parts
        Group root = new Group();

        Sphere sphere = new Sphere(20);
        PhongMaterial material = new PhongMaterial();
        material.setDiffuseColor(Color.RED);
        material.setSpecularColor(Color.RED);
        sphere.setMaterial(material);
        root.getChildren().add(sphere);

        PointLight light = new PointLight(Color.WHITE);
        // JavaFX axis: left-top-near is minus, right-bottom-far is plus
        light.getTransforms().addAll(new Translate(-100, -100, -100));
        root.getChildren().add(light);

        PerspectiveCamera camera = new PerspectiveCamera(true);
        camera.setFieldOfView(30);
        camera.getTransforms().addAll(new Translate(0, 0, -100));

        SubScene subscene = new SubScene(root, 800, 600);
        subscene.setCamera(camera);

        // 2D controls
        BorderPane pane = new BorderPane();
        pane.setCenter(subscene);

        Scene scene = new Scene(pane, 800, 800);
        stage.setScene(scene);
        stage.show();
    }

    public static void main(String[] args) throws Exception {
        Application.launch(args);
    }
}

sphere

jQuery: A simple slider

This entry is part 33 of 33 in the series jQuery Tutorial

This is a simple jQuery slider and notice how I have used the if else statement to determine the state of the slider.

<!DOCTYPE html>
<html>
    <head>
        <style>
            #hideme { 
                background:#de9a44; 
                width:120px;
                height:25px; 
                display:none; 
            }
        </style>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    </head>
    <body>
        <p>Hover On Me!</p>
        <div id="hideme"><h3>Rock & Roll</h3></div>

        <script>
            $(document.body).hover(function () {
                if ($("#hideme").is(":hidden")) {
                    $("#hideme").slideDown("slow");
                } else {
                    $("#hideme").hide();
                }
            });

        </script>

    </body>
</html>

Try The Code

 

JavaFX: Line and bar chart

This entry is part 54 of 55 in the series JavaFX

When it comes to setting up the bar or line chart, there are a few classes that we can use in JavaFX.  JavaFX provides the line and bar chart objects and in addition, it provides the numberAxis for the x-y axis and also XYChart for plotting the positions of line and bar.

package javafxapplication4;

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.chart.BarChart;
import javafx.scene.chart.CategoryAxis;
import javafx.scene.chart.LineChart;
import javafx.scene.chart.NumberAxis;
import javafx.scene.chart.XYChart;
import javafx.scene.layout.Pane;
import javafx.stage.Stage;

public class JavaFXApplication4 extends Application {


    @Override
    public void start(Stage stage) {

        final NumberAxis xAxis = new NumberAxis();
        final NumberAxis yAxis = new NumberAxis();
        final CategoryAxis cXAxis = new CategoryAxis();

        
        //Declarations of the 2 types of charts
        final BarChart<String, Number> bc = new BarChart<>(cXAxis, yAxis);
        final LineChart<Number, Number> lc = new LineChart<>(xAxis, yAxis);

        //setting up the bar chart
        XYChart.Series series1 = new XYChart.Series();
        series1.getData().add(new XYChart.Data("A", 200));
        series1.getData().add(new XYChart.Data("B", 50));

        //setting up the line chart
        XYChart.Series series2 = new XYChart.Series();
        series2.getData().add(new XYChart.Data(10, 210));
        series2.getData().add(new XYChart.Data(3, 35));

        bc.getData().addAll(series1);
        lc.getData().addAll(series2);

        Pane pane = new Pane();
        pane.getChildren().add(lc);
        pane.getChildren().add(bc);

        bc.setOpacity(0.5);
        
        Scene scene = new Scene(pane, 500, 400);
        stage.setScene(scene);
        stage.show();
    }
    
    public static void main(String[] args) {
        launch(args);
    }
}

chart