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: Adding circle to line group

This entry is part 52 of 55 in the series JavaFX

For purpose of demonstration, we see how easy it is to add another drawing to the line group.

The main line that we are using is

group.getChildren().add(circle);

This put the circle to be in the same group as the line group.

package drawing;

import javafx.application.*;
import javafx.stage.*;
import javafx.scene.*;
import javafx.scene.shape.*;
import javafx.scene.paint.*;

public class Drawing extends Application {

    @Override
    public void start(Stage stage) {

        Group group = new Group();

        // The background grid
        for (int i = 0; i < 400; i += 20) {
            Line hline = new Line(i, 0, i, 360);
            hline.setStroke(Color.LIGHTGRAY);
            Line vline = new Line(0, i, 400, i);
            vline.setStroke(Color.DARKBLUE);
            group.getChildren().addAll(hline, vline);
        }
        
        Circle circle = new Circle(200, 180, 75);
        circle.setStroke(Color.BLACK);
        circle.setFill(null);
        circle.setStrokeWidth(3);
        group.getChildren().add(circle);

        // Create the scene and the stage
        Scene scene = new Scene(group, 400, 360);
        stage.setScene(scene);
        stage.setTitle("Grid Lines and Circle");
        stage.show();
    }

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

}

group1

JavaFX: Generating grid lines using group

This entry is part 51 of 55 in the series JavaFX

Using  group, we can create 2 separate set of lines making them to look like grids.

Here the grids are formed by 2 groups of horizontal and vertical lines.

package drawing;

import javafx.application.*;
import javafx.stage.*;
import javafx.scene.*;
import javafx.scene.shape.*;
import javafx.scene.paint.*;

public class Drawing extends Application {

    @Override
    public void start(Stage stage) {

        Group group = new Group();

        // The background grid
        for (int i = 0; i < 400; i += 20) {
            Line hline = new Line(i, 0, i, 360);
            hline.setStroke(Color.LIGHTGRAY);
            Line vline = new Line(0, i, 400, i);
            vline.setStroke(Color.DARKBLUE);
            group.getChildren().addAll(hline, vline);
        }

        // Create the scene and the stage
        Scene scene = new Scene(group, 400, 360);
        stage.setScene(scene);
        stage.setTitle("Grid Lines");
        stage.show();
    }

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

}

gridlines

JavaFX: Putting drawings into group

This entry is part 49 of 55 in the series JavaFX

A group is an ObservableList and will take on the collective bounds of its children and is not directly resizable.

In another words, will will be able to set the absolute positions of the drawings if we put them into group.  So this allows us to better control the positions of the drawings.

package drawing;

import javafx.application.*;
import javafx.stage.*;
import javafx.scene.*;
import javafx.scene.shape.*;
import javafx.scene.paint.*;

public class Drawing extends Application {

    @Override
    public void start(Stage stage) {

        Group group = new Group();

        Rectangle rect = new Rectangle(150, 100, 200, 150);
        rect.setStroke(Color.BLACK);
        rect.setFill(null);
        rect.setStrokeWidth(1);
        group.getChildren().add(rect);

        Circle circle = new Circle(150, 250, 75);
        circle.setStroke(Color.BLACK);
        circle.setFill(null);
        circle.setStrokeWidth(3);
        group.getChildren().add(circle);

        Scene scene = new Scene(group, 400, 400);
        stage.setScene(scene);
        stage.setTitle("Codecrawl.com");
        stage.show();
    }

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

group

 

CSS3 Selectors: Groups of selectors

This entry is part 3 of 40 in the series CSS3 Selectors

A comma-separated list of selectors represents the union of all elements selected by each of the individual selectors in the list.

In this example, we condense three rules with identical declarations into one. Thus,

h1 { font-family: sans-serif }
h2 { font-family: sans-serif }
h3 { font-family: sans-serif }

is equivalent to:

h1, h2, h3 { font-family: sans-serif }
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Codecrawl.com</title>
    <style>
        h1, h2, h3 { font-family: sans-serif }
    </style>
</head>
<body>
<h1>Country Music</h1>
<h2>Taylor Swift</h2>
<h3>Hot Country Girl</h3>

<p> Taylor Swift moved to Nashville, Tennessee, at the age of 14 to pursue a career in country music.</p>
</body>
</html>