coter

How to read pixel color?

Recommended Posts

I have a image, it should not be displayed on the screen.  But I need the color values of certain pixels. Exists in pixi analog getPixel from as3? 

 

If pixi doesn't exist a worthy counterpart, then the second question is how to translate a color value from a context.getimageData().data in the format 0x00000000, suitable for graphics.beginFill() ?

Share this post


Link to post
Share on other sites

getImageData is a Uint8ClampedArray of [R,G,B,A, R,G,B,A, ...] values. The format that graphics takes in a number that represents the RGB value. So 0xRRGGBB.

You can use a utility in pixi designed specifically to take an array [R, G, B] and give you 0xRRGGBB: https://github.com/pixijs/pixi.js/blob/master/src/core/utils/index.js#L56-L65

Share this post


Link to post
Share on other sites

getImageData is a Uint8ClampedArray of [R,G,B,A, R,G,B,A, ...] values. The format that graphics takes in a number that represents the RGB value. So 0xRRGGBB.

You can use a utility in pixi designed specifically to take an array [R, G, B] and give you 0xRRGGBB: https://github.com/pixijs/pixi.js/blob/master/src/core/utils/index.js#L56-L65

 

And why does PIXI.utils.rgb2hex([255,255,255]) returns -16777471 is 000000?

Share this post


Link to post
Share on other sites

Because rgb2hex is for working with normalized colors, those util functions were made to work with WebGL values.

The [R, G, B] array expects each value to be in the range [0, 1]. You can either normalize your [R,G,B] array (by dividing each value by 255) or use a different formula to calculate the number:

((rgb[0] << 16) + (rgb[1] << 8) + rgb[2])

Share this post


Link to post
Share on other sites

Hello!

I want to use png image as a height map for an isometric pixel game. I don't need to display it. I only need to load it and read pixel values in form of [r,g,b,a]. There are libs like png.js, which has png.getPixel(x,y). But I believe PIXI already has all I need for that. How can I do it? Instance of what class should I use? Or is there a way to convert a png image to a typed array? Or may be all this is a bad idea?

Share this post


Link to post
Share on other sites

Its better to use pure 2d context for that. Create a canvas, use `getImageData` . If you use it wiht pixi loader you can get canvas either in "texture.baseTexture.source" (v4) or in "texture.baseTexture.resource.source" (v5).

Yes, PixiJS does not cover everything that 2d context does, its better to know how it works. I used context2d with pixi webgl many times https://pixijs.io/examples/?v=v5.0.0-rc.2#/textures/gradient-resource.js

Some people take images from loader, make bitmaps from them and use them for interaction :)

P.S. You've missed, this thread is not related to your problem. It happens.

Share this post


Link to post
Share on other sites

Thank you!
I wrote a class to handle height maps from png images!

class HMap {
	constructor(img, offsetX = 0, offsetY = 0){
		this._w = img.width
		this._h = img.height
		this._offsetX = offsetX
		this._offsetY = offsetY
		this._data = this._getData(img)
	}

	_getData(img){
		const canvas = document.createElement('canvas')
		canvas.width = this._w
		canvas.height = this._h
		const context = canvas.getContext('2d', { alpha: false })
		context.drawImage(img, 0, 0, this._w, this._h)
		return context.getImageData(0, 0, this._w, this._h).data
	}

	pixel(x, y){
		if (
			x < this._offsetX ||
			x >= this._offsetX + this._w ||
			y < this._offsetY ||
			y >= this._offsetY + this._h
		) return [this._data[0], this._data[1], this._data[2]]
		const i = (y - this._offsetY) * this._w * 4 + (x - this._offsetX) * 4
		return [this._data[i], this._data[i+1], this._data[i+2]]
	}
}

And I get img from "PIXI.loader.resources['height_map.png'].data"! Is it ok? I could not find anything about "texture.baseTexture.source" or "texture.baseTexture.resource.source" in docs or source files.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.