Convert Photoshop values to ColorMatrix? - algorithm

Ive edited the following properties of an image in Photoshop, and am looking for the corrosponding Color-Matrices for them. Hue/Saturation/Contrast/Color-Overlay/RGB-Channel Mixer/Levels.
Ive so far solved Hue/Saturation/Contrast. The remaining 3 im not clear about how to start.
_filter.hue = function( rotation ) {
rotation = (rotation || 0)/180 * Math.PI;
var cos = Math.cos(rotation),
sin = Math.sin(rotation),
lumR = 0.213,
lumG = 0.715,
lumB = 0.072;
_filter.colorMatrix([
lumR+cos*(1-lumR)+sin*(-lumR),lumG+cos*(-lumG)+sin*(-lumG),lumB+cos*(-lumB)+sin*(1-lumB),0,0,
lumR+cos*(-lumR)+sin*(0.143),lumG+cos*(1-lumG)+sin*(0.140),lumB+cos*(-lumB)+sin*(-0.283),0,0,
lumR+cos*(-lumR)+sin*(-(1-lumR)),lumG+cos*(-lumG)+sin*(lumG),lumB+cos*(1-lumB)+sin*(lumB),0,0,
0, 0, 0, 1, 0
]);
};
_filter.saturation = function( amount ) {
var x = (amount || 0) * 2/3 + 1;
var y = ((x-1) *-0.5);
_filter.colorMatrix([
x, y, y, 0, 0,
y, x, y, 0, 0,
y, y, x, 0, 0,
0, 0, 0, 1, 0
]);
};
_filter.contrast = function( amount ) {
var v = (amount || 0) + 1;
var o = -128 * (v-1);
_filter.colorMatrix([
v, 0, 0, 0, o,
0, v, 0, 0, o,
0, 0, v, 0, o,
0, 0, 0, 1, 0
]);
};
Here are the filters and input-properties required-
Color-Overlay : HEX-Color, Opacity & BlendMode
RGB-Channel : RGB values for each channel, Constant & BlendMode
Levels : High , Mid & Low values

Related

How to find boundary point using bfs algorithm

I think of the 2D array as a coordinate and try to find a coordinate value with a value of 1.
So far, it's a very easy BFS problem, but what I want to do is look at the following picture.
While I'm looking for 1 or after I've found it all, I would like to know the coordinate values surrounding the boundary in the order of the arrow or the other direction.
What options do I need to add to get those information?
Below is the BFS code that I use now. I can get coordinate values from the BFS function as shown in the second picture.
class Node
{
public int x;
public int y;
public Node(int x, int y)
{
this.x = x;
this.y = y;
}
};
private int[] dx = new int[8] { -1, 0, 1, 0, 1, -1, -1, 1 };
private int[] dy = new int[8] { 0, -1, 0, 1, 1, -1, 1, -1 };
private Queue<Node> q = new Queue<Node>();
bool[,] visit = new bool[15, 15];
int[,] coordinates = new int[15, 15] { { 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 },
{ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 },
{ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 },
{ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 },
{ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 },
{ 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0 },
{ 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0 },
{ 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0 },
{ 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0 },
{ 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0 },
{ 0, 0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 0 },
{ 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0 },
{ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 },
{ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 },
{ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 }};
void BFS(int[,] pixel, int x, int y)
{
q.Enqueue(new Node(x, y));
visit[x, y] = true;
while (q.Count != 0)
{
Node cur = q.Dequeue();
for (int i = 0; i < 8; i++)
{
int r = cur.x + dx[i];
int c = cur.y + dy[i];
if (r >= 0 && c >= 0 && r < 15 && c < 15)
{
if (!visit[r, c] && pixel[r, c] == 1)
{
q.Enqueue(new Node(r, c));
visit[r, c] = true;
}
}
}
}
}
void main()
{
for (int y = 0; y < 15; y++)
{
for (int x = 0; x < 15; x++)
{
if (!visit[x, y] && coordinates[x, y] == 1)
{
BFS(coordinates, x, y);
}
}
}
}
we do not need BFS for finding boundary '1' values. We can simply loop over 2D grid and then for each '1', we can just check whether all of it's 4 adjacent (i.e up, down, left, right) values are '1' or not. If at least one of them is not '1', then it is a boundary point. Thanks!
find a coordinate value with a value of 1
Start by pre-processing the matrix
- Search all 1 values (this can also be done recursively)
- If 1 value does not have a 0 neighbor, it means it it not on edge - change it to 0.
After the pre-processing you are left with only the edge 1 values, and all others are 0.
I would like to know the coordinate values surrounding the boundary in
the order of the arrow or the other direction
To find out if the edge forms a closed loop, and get the nodes in the right order
apply BFS to the pre-processed matrix.
Seek a path from a node of your choice, back to the same node(a loop).

D3 Chord Diagram Not Rendering Correctly

Using the excellent guide by Nadieh Bremer I'm making a stretched chord diagram.
However, with certain data inputs the rendering goes awry.
I've made a demo to demonstrate my issue here:
https://codepen.io/benmayocode/pen/MPEwdr
Specifically, in the .js file lines 269 to 281 file I have:
var respondents = 40,
emptyPerc = 0.4,
emptyStroke = Math.round(respondents*emptyPerc);
var Names = ['BEN', 'ROSE', '', '1', '2', '6', ''];
var matrix = [
[0, 0, 0, 10, 10, 0, 0] ,
[0, 0, 0, 0, 10, 10, 0] ,
[0, 0, 0, 0, 0, 0, 24] ,
[10, 0, 0, 0, 0, 0, 0] ,
[10, 10, 0, 0, 0, 0, 0] ,
[0, 10, 0, 0, 0, 0, 0] ,
[0, 0, 0, 24, 0, 0, 0] ,
];
This renders incorrectly - but if I change it to...
var respondents = 40,
emptyPerc = 0.4,
emptyStroke = Math.round(respondents*emptyPerc);
var Names = ['BEN', 'LIB', 'ROSE', '', '1', '2', '6', ''];
var matrix = [
[0, 0, 0, 0, 10, 10, 0, 0] ,
[0, 0, 0, 0, 0, 10, 0, 0] ,
[0, 0, 0, 0, 0, 10, 10, 0] ,
[0, 0, 0, 0, 0, 0, 0, 24] ,
[10, 0, 0, 0, 0, 0, 0, 0] ,
[10, 10, 10, 0, 0, 0, 0, 0] ,
[0, 0, 10, 0, 0, 0, 0, 0] ,
[0, 0, 0, 0, 24, 0, 0, 0] ,
];
Then it works great. I obviously see the difference between the two blocks of code, but why are they producing different results, and is it possible to modify my code to accommodate both examples?
If you examine the dodgy arc, you will see you can flip it into the right place by altering the sign on the transform from (50,0) to (-50,0). If you then look at the code that assigns the transform, it is
.attr("transform", function(d, i) {
d.pullOutSize = pullOutSize * ( d.startAngle + 0.01 > Math.PI ? -1 : 1);
return "translate(" + d.pullOutSize + ',' + 0 + ")";
});
with a note in the original text to say that "the 0.01 is for rounding errors". Given that the startAngle is already 3.13--i.e. very close to Pi--it looks like this is an edge case where the value fell just the wrong side of the cutoff. Changing the allowable rounding error value to 0.02 puts the arc in the correct place, or you could do something like
d.pullOutSize = pullOutSize * (
// is the start angle less than Pi?
d.startAngle + 0.01 < Math.PI ? 1 :
// if yes, is the end angle also less than Pi?
d.endAngle < Math.PI ? 1 : -1 );
to prevent edge cases like that in your dataset.

VPython Object Revolution

Having to use VPython currently, and I want to make a model of the Solar System.
Currently I have all the Planets and the orbital Rings, however, the actual orbit is what I'm finding very difficult.
GlowScript 2.7 VPython
from visual import *
# Declaring Celestial Body Objects
Sun = sphere(pos = vec(0, 0, 0), radius = 10, color = color.yellow)
Mercury = sphere(pos = vec(25, 0, 0), radius = 2, color = color.green)
Venus = sphere(pos = vec(40, 0, 0), radius = 2.5, color = color.red)
Earth = sphere(pos = vec(50, 0, 0), radius = 2.65, color = color.blue)
Mars = sphere(pos = vec(70, 0, 0), radius = 2.3, color = color.red)
Jupiter = sphere(pos = vec(90, 0, 0), radius = 3, color = color.orange)
Saturn = sphere(pos = vec(105, 0, 0), radius = 2.9, color = color.orange)
Uranus = sphere(pos = vec(117.5, 0, 0), radius = 2.9, color = color.orange)
Neptune = sphere(pos = vec(135, 0, 0), radius = 2.8, color = color.blue)
Pluto = sphere(pos = vec(165, 0, 0), radius = 1.5, color = color.white)
# Declaring Orbital Rings of Celestial Body Objects
Mercury.ring = ring(pos = vec(0, 0, 0), axis = vec(0, 1, 0), size = vec(0.1, Mercury.pos.x * 2, Mercury.pos.x * 2))
Venus.ring = ring(pos = vec(0, 0, 0), axis = vec(0, 1, 0), size = vec(0.1, Venus.pos.x * 2, Venus.pos.x * 2))
Earth.ring = ring(pos = vec(0, 0, 0), axis = vec(0, 1, 0), size = vec(0.1, Earth.pos.x * 2, Earth.pos.x * 2))
Mars.ring = ring(pos = vec(0, 0, 0), axis = vec(0, 1, 0), size = vec(0.1, Mars.pos.x * 2, Mars.pos.x * 2))
Jupiter.ring = ring(pos = vec(0, 0, 0), axis = vec(0, 1, 0), size = vec(0.1, Jupiter.pos.x * 2, Jupiter.pos.x * 2))
Saturn.ring = ring(pos = vec(0, 0, 0), axis = vec(0, 1, 0), size = vec(0.1, Saturn.pos.x * 2, Saturn.pos.x * 2))
Uranus.ring = ring(pos = vec(0, 0, 0), axis = vec(0, 1, 0), size = vec(0.1, Uranus.pos.x * 2, Uranus.pos.x * 2))
Neptune.ring = ring(pos = vec(0, 0, 0), axis = vec(0, 1, 0), size = vec(0.1, Neptune.pos.x * 2, Neptune.pos.x * 2))
Pluto.ring = ring(pos = vec(0, 0, 0), axis = vec(0, 1, 0), size = vec(0.1, Pluto.pos.x * 2, Pluto.pos.x * 2))
# Infinite Loop
while 1 == 1:
Mercury.rotate(angle = radians(360), axis = vec(Mercury.pos.y, Mercury.pos.x, 0), origin = vec(0, 0, 0))
rate(50)
print("Error! Escaped While Loop!")
When I switch out the rotate method with Mercury.rotate(angle = 0.0174533, axis = vec(0, Mercury.pos.x, 0), origin = vec(0, 0, 0)), it properly rotates... yet only for a quarter of the rotation. I've read about everything to do with this, but N/A.
After the quarter revolution, the planet sometimes decides to violently "seizure," when the angle is a larger number. It just seems like a barrier of sorts.
You should write axis=vec(0,1,0). The axis of rotation needs to be always pointing upward.

Setting Bounds on Vars in Halide Funcs

I have a 3x3 Convolution Function defined like this
conv(x, y) = 0;
conv(x, y) += kernel(r.x, r.y) * in(x + r.x - 1, y + r.y - 1);
Size of the input buffer is 16 x 16
If I want to execute it with padding I can directly do
in = Halide::BoundaryConditions::constant_exterior(in_buffer, 0, 0, 16, 0, 16)
But I have to execute without padding and so I am trying to manually set the bounds on the function like this
conv.bound(x, 1, 14);
conv.bound(y, 1, 14);
This returns an error message
Error:
Bounds given for convolution in y (from 1 to 14) do not cover required region (from 0 to 15)
What should I do to set bounds on a Var in Func?
I think you need not to manually set the bounds using the *.bound function. Try this one:
Halide::Func conv("conv"), kernelF("kernel"), in("in");
Halide::Var x("x"), y("y");
Halide::RDom r(0, 3, 0, 3,"r");
in = Halide::BoundaryConditions::constant_exterior(in_buffer, 0,
0, 16, 0, 16);
kernelF = Halide::BoundaryConditions::constant_exterior(kernel_buffer, 0,
0, 3, 0, 3);
conv(x, y) = 0.0f;
conv(x, y) += kernelF(r.x, r.y) * in(x + r.x, y + r.y);
//conv.print_loop_nest();
Halide::Buffer<float_t> outputBuf = conv.realize(14, 14);
Look, we can set the bounds directly in *.realize() arguments, i.e. 14=16-3+1; Also, note that the convolution anchors are at the top-left of kernels.

How to rotate (after a 90 degrees rotation in x axis ) in the new coordinates on the y axis in openGL es 2.0

I'm rotation a cube 90 degrees in x axis, after that I want to rotate in another 90 degrees in y axis but it does get the expected(from me) result since it was rotated before
I'd like rotation to happen lets say in world coordinates ... My current code I think is resetting the identity matrix but if I remove that line nothing renders.Here is my code:
public void onDrawFrame(GL10 arg0) {
// GLES20.glEnable(GLES20.GL_TEXTURE_CUBE_MAP);
GLES20.glClear(GLES20.GL_COLOR_BUFFER_BIT | GLES20.GL_DEPTH_BUFFER_BIT);
GLES20.glUseProgram(iProgId);
cubeBuffer.position(0);
GLES20.glVertexAttribPointer(iPosition, 3, GLES20.GL_FLOAT, false, 0, cubeBuffer);
GLES20.glEnableVertexAttribArray(iPosition);
texBuffer.position(0);
GLES20.glVertexAttribPointer(iTexCoords, 3, GLES20.GL_FLOAT, false, 0, texBuffer);
GLES20.glEnableVertexAttribArray(iTexCoords);
GLES20.glActiveTexture(GLES20.GL_TEXTURE0);
GLES20.glBindTexture(GLES20.GL_TEXTURE_CUBE_MAP, iTexId);
GLES20.glUniform1i(iTexLoc, 0);
Matrix.setIdentityM(m_fIdentity, 0);
if(rotating == true)
{
rotate();
}
Matrix.rotateM(m_fIdentity, 0, -xAngle, 0, 1, 0);
Matrix.rotateM(m_fIdentity, 0, -yAngle, 1, 0, 0);
Matrix.multiplyMM(m_fVPMatrix, 0, m_fViewMatrix, 0, m_fIdentity, 0);
Matrix.multiplyMM(m_fVPMatrix, 0, m_fProjMatrix, 0, m_fVPMatrix, 0);
// Matrix.translateM(m_fVPMatrix, 0, 0, 0, 1);
GLES20.glUniformMatrix4fv(iVPMatrix, 1, false, m_fVPMatrix, 0);
GLES20.glDrawElements(GLES20.GL_TRIANGLES, 36, GLES20.GL_UNSIGNED_SHORT, indexBuffer);
// GLES20.glDisable(GLES20.GL_TEXTURE_CUBE_MAP);
}

Resources