APS Excellence in Physics Education Award
November 2019

Education Prize Logo
Science SPORE Prize
November 2011

NSF Logo
The Open Source Physics Project is supported by NSF DUE-0442581.

Is there ByteRaster Object example for EJSS5.1 (javascript)? post and replies

Return to the Is there ByteRaster Object example for EJSS5.1 (javascript)? thread
Login to post to this thread

How to use "ByteRaster" (javascript)
Chi-Feng Lin
28 Posts

Dear All

I try some parameters, but still don't know how to use "ByteRaster".

my test source file is attached.

Please give some clues, thanks a lot.

Attached File: Raster20150113.zip

Replies to How to use "ByteRaster" (javascript)

Re: How to use "ByteRaster" (javascript) -
Chi-Feng Lin
28 Posts

Reply by myself.

Now, I know how to set a matrix for "ByteRaster", but don't know how to define "Numcolors" and "colors" in "ByteRaster".

Attached File: Raster20150121.zip

Re: Re: How to use "ByteRaster" (javascript) -
lookang Avatar
222 Posts

yes, it is difficult for me to do this properly as well as i have some java scalarfield objects that could perhaps use this and a alternative display method for scalar field.

perhaps you can look at this?

keep posting your updates!

OSP@SG blog
OSP@SG Digital Library

Re: How to use "ByteRaster" (javascript) -
Francisco Esquembre
228 Posts

OK. Sorry for the delay. Here are some hints and a working example.

A ByteRaster is a 2D element to visualise a 2D array of ints using a color code. The color code can be a predefined palette or a number of colors that you specify.

If you palette has n colors, the Data int[][] array must contain values from 0 to n-1.

The NumColors is what I call n above.

The Default palette is a range of shades from red to blue, if I am not wrong. You can choose the following Strings:
play with the values to see what they mean.

Alternatively, you can specify an array of HTML colors with NumColors in it. (A color in HTML is a String, such as "rgb(255,0,0)" - which equals "red".)

Finally, changing Data does not automatically updates the display (because it is time-consuming), unless the AutoUpdate is set to true.

See the example attached.

Hope this helps.


Attached File: ejss_src_ByteRasterDemo.zip

Re: Re: How to use "ByteRaster" (javascript) -
Chi-Feng Lin
28 Posts

Dear Paco

Your advice really helped me a lot.

and I try an array of HTML colors and upload a example file, in case someone need.

I also thank lookang's information.

Attached File: Raster20150123.zip

Re: Re: How to use "ByteRaster" (javascript) -
Chi-Feng Lin
28 Posts

Dear Paco

I am trying some parameters in  "ByteRaster".

There is a question in [Position and Size]. I can define "SizeX" that I want. For example, define SizeX= 10 , the "ByteRaster" length of x is 10. When I changed or typed some value in "SizeY", but nothing happened.

What am I doing wrong?  

Please see attached file.

Many thanks.

I am trying to display stress distribution in specific size (beam or plate) .  Can "ByteRaster" or  "Mesh2D" do that?

Attached File: Raster20150127.zip

Re: Re: Re: How to use "ByteRaster" (javascript) -
Francisco Esquembre
228 Posts

Dear Chi-Feng

In 1 to 1 scale, ByteRaster assumes that each entry in your data array corresponds to one pixel.

Change the size X or Y just resizes each pixel to be larger. But it seems pixels can only be enlarged equally in both X and Y directions.

Hence, if you have 3 columns per each row in your data matrix, then your byteraster image is always going to be 3 times wider than higher.

This is what I concluded from my closer examination.


Re: Re: Re: Re: How to use "ByteRaster" (javascript) -
Chi-Feng Lin
28 Posts

Dear Paco

I found a rule about the width and height of ByteRaster.

1. In PlottingPanel, SquareAspect choose "ture".

2. Focus on data [x][y], SizeX, SizeY

3. choose minimum value  from   SizeX/x   and   SizeY/y

4. mininum value * x = width,  mininum value * y = height

for example

x=3, y= 7, SizeX=10, SizeY=15

SizeX/x = 10/3 = 3.3333
SizeY/y = 15/7 = 2.1429 ===> minimum

width = 2.1429*3 =6.4286 ,   height = 2.1429*7 = 15

Attached File: Raster20150130.zip

Re: Re: Re: Re: Re: How to use "ByteRaster" (javascript) -
Chi-Feng Lin
28 Posts

Dear All

I did a test example that a simple beam is subjected to a force P.

"ByteRaster" displays the stress distribution of the beam.

Attached File: ejss_model_Raster20150203.zip

Re: Re: Re: Re: Re: Re: How to use "ByteRaster" (javascript) -
Francisco Esquembre
228 Posts

Nice one.

Now that I did the Mesh2D example, maybe you an use Mesh to do this better.

The Mesh2DExample uses a sophisticated domain, but rectangular domains are easy (actually easier) to build.


OSP Projects:
Open Source Physics - EJS Modeling
Physlet Physics
Physlet Quantum Physics
STP Book