Escrevendo pixel por pixel de um Canvas

Já falamos aqui sobre o Canvas e um uso básico do mesmo. Hoje vamos mostrar um pouco mais desse poderoso node, mostrando como manipular os pontos de imagem ou o pixel.O pixel representa cada ponto da sua tela e cada ponto tem uma cor RGB (vermelho, verde e azul), adicionalmente também a opacidade do ponto, mas hoje só falaremos do RGB.

Escrevendo pixel a pixel usando o Canvas

Ao criar o canvas, temos que acessar o Graphics2d se quisermos trabalhar nele. O mesmo Graphics2d permite acesso a uma classe do tipo PixelWriter e com ela podemos configurar a cor de cada pixel de um canvas! Veja o exemplo mais básico possível que gera um canvas com pixels aleatórios:

	import java.util.Random;
	import javafx.application.Application;
	import javafx.scene.Scene;
	import javafx.scene.canvas.Canvas;
	import javafx.scene.image.PixelWriter;
	import javafx.scene.layout.StackPane;
	import javafx.scene.paint.Color;
	import javafx.stage.Stage;
	public class Main extends Application {
	private static final int WIDTH = 800;
	private static final int HEIGHT = 600;
	public static void main(String[] args) {
	launch();
	}
	@Override
	public void start(Stage stage) throws Exception {
	Canvas canvas = new Canvas(WIDTH, HEIGHT);
	PixelWriter pixelWriter = canvas.getGraphicsContext2D().getPixelWriter();
	Random random = new Random();
	for (int i = 0; i < WIDTH; i++) {
	for (int j = 0; j < HEIGHT; j++) {
	float r = random.nextFloat();
	float g = random.nextFloat();
	float b = random.nextFloat();
	pixelWriter.setColor(i, j, Color.color(r, g, b));
	}
	}
	stage.setScene(new Scene(new StackPane(canvas), WIDTH, HEIGHT));
	stage.setTitle("Manipulando Pixel a Pixel de um canvas");
	stage.show();
	}
	}

view raw Main.java hosted with ❤ by GitHub

O código é simples:

- Inicialmente criamos um canvas e pegamos o pixel writer dele;

- Há um for de for que passará por cada posição do canvas - indo até a largura e a altura da aplicação;

- Nesse for de for criamos valores aleatórios para R (vermelho), G (verde) e B (azul);

- Então escrevemos o pixel usando o PixelWriter com uma cor que criamos a partir dos valores aleatórios;

- Por fim temos toda a já conhecida parte do JavaFX, que é de criar uma scene, uma raiz.

O resultado é algo similar ao seguinte sempre com valores aleatórios ao executar a aplicação:

Temos bastante pontos cinza, pois o ponto cinza equivale a valores iguais de RGB! 

Olhem mais um exemplo bacana:

Veja o código

	import javafx.application.Application;
	import javafx.scene.Scene;
	import javafx.scene.canvas.Canvas;
	import javafx.scene.canvas.GraphicsContext;
	import javafx.scene.image.PixelWriter;
	import javafx.scene.layout.StackPane;
	import javafx.scene.paint.Color;
	import javafx.stage.Stage;
	import static java.lang.Math.*;
	public class Vermelhao extends Application {
	private static final float WIDTH = 800;
	private static final float HEIGHT = 600;
	public static void main(String[] args) {
	launch();
	}
	@Override
	public void start(Stage stage) throws Exception {
	System.out.println(sqrt(pow(0 - 400, 2) + pow(0 - 300, 2)));
	Canvas canvas = new Canvas(WIDTH, HEIGHT);
	GraphicsContext ctx = canvas.getGraphicsContext2D();
	final PixelWriter pixelWriter = ctx.getPixelWriter();
	double maiorDistancia = sqrt(pow(0 - 800, 2) + pow(0 - 600, 2)) / 2;
	for (int i = 0; i < WIDTH; i++) {
	for (int j = 0; j < HEIGHT; j++) {
	double d = Math.sqrt(Math.pow((WIDTH / 2) - i, 2) + Math.pow((HEIGHT / 2) - j, 2));
	d = d / maiorDistancia;
	pixelWriter.setColor(i, j, Color.color(1 - d, 0, 0));
	}
	}
	stage.setTitle("Manipulando Pixel a Pixel de um canvas");
	stage.show();
	stage.setScene(new Scene(new StackPane(canvas), WIDTH, HEIGHT));
	}
	}

view raw Vermelhao.java hosted with ❤ by GitHub

Bem, essa foi uma postagem rápida. Pretendo criar algo bacana com isso, então precisava introduzir essa classe. Até mais, pessoal!