I am trying to modelize a physical problem of photoelasticity on a surface. I succeed to get an array of X,Y - coordinates of the surface and for each points I have a corresponding color in a RGB format. I used Python scatter to plot and the result is already great but there is still some discontinuities because of the lack of resolution that I can not improve :( I just wanted to ask how I can generate the same surface plot in a continuous way (with new "in-between" points for which the color of them have been interpolated with respect to the neighborhood points). I am not necessarily looking for coding it in python, every software is welcome. Thanks!
I wrote this in javascript: https://jsfiddle.net/87nw05kz/
The important part is calculateColor. It finds the inverse square of the distance to each color from the pixel being shaded and it uses that to decide how much that pixel should be effected by each color.
function calculateColor(x, y) {
let total = 0;
for (let i = 0; i < colors.length; i++) {
let c = colors[i];
let d = distance(c.x, c.y, x, y);
if (d === 0) {
return c;
}
d = 1 / (d * d);
c.d = d;
total += d;
}
let r = 0, g = 0, b = 0;
for (let i = 0; i < colors.length; i++) {
let c = colors[i];
let ratio = c.d / total;
r += ratio * c.r;
g += ratio * c.g;
b += ratio * c.b;
}
r = Math.floor(r);
g = Math.floor(g);
b = Math.floor(b);
return {r:r,g:g,b:b};
}
In my simulator I am trying to check every pixel of an arc. There are fixed coordinated of the center ( x & y), radius and the angles of the arc (radius, currentAngle & newAngle), so I am able to fill it with color to represent it to user. But moreover I need to execute some actions over the covered pixels.
What I have tried is:
for (int i = 0; i < newAngle; i++)
for (int j = 0; j < radius; j++) {
Point point = new Point((int)(x + j * Math.cos(currentAngle - Math.toRadians(i))), (int)( y + j * Math.sin(currentAngle - Math.toRadians(i))));
check(point.x, point.y);
I thought it was fine to go changing angles and radiuses, however, as I understood later, many pixels are missed due to the fact that on the border of an arc every degree out of 360 contains more than 1 pixel.
I tried searching the web and found some ways to go through every pixel of the circle. Didn't manage to transform it into the arc pixels.
You can switch from polar coordinates to cartesian and iterate points belonging to segment:
double curCos = Math.cos(currentAngle);
double curSin = Math.sin(currentAngle);
double curTan = curSin/curCos;
double newCos = Math.cos(newAngle);
double newSin = Math.sin(newAngle);
double newTan = newSin/newCos;
double xMax = curCos*radius
double r2 = radius*radius
for(int i=0; i < xMax; i++) {
for(int j=curTan*x; j < newTan*x; j++) {
if(i*i + j*j > r2) {
continue;
}
Point point = new Point(x + i, y + j);
}
}
This code snippet covers only case when newAngle>currentAngle and whole segment lies in first quadrant (area where x>0 and y>0), but you can get the idea how to iterate points and how to generalize the solution for any angles combination.
You need to rasterize you arc - get all colored pixels in order. Famous Bresenham algorithm for circle is intended to do it. Just adapt it for drawing only needed part of the circle.
Yet another option - Midpoint circle algo
I am struggling to bind some text specified coordinates so that when I resize the window the text follows suit. Here is the portion of my code:
for (int i = 0; i < petrolStations.size() / 2; i++) {
int j = i + 1;
Text text1 = new Text(petrolStations.get(i), petrolStations.get(j), "1");
text1.setFont(Font.font("Courier", FontWeight.BOLD, FontPosture.ITALIC, 10));
text1.xProperty().bind(pane.widthProperty().divide(2));
text1.yProperty().bind(pane.heightProperty().divide(2));
pane.getChildren().add(text1);
To explain: petrolStations is an array of coordinates that are used to place a letter 1 on the page.
Here is the current output, as you can see all the 1's are combining in the middle rather than being in their specified coordinates.
EDIT:
I've changed the 1's to circles and managed to scale up the size but I still have the same problem, since all the coordinates are under 100 they sit up the top left, I need them to encompass the whole window and expand and separate as the window is resized larger.
for (int i = 0; i < petrolStations.size() / 2; i++) {
int j = i + 1;
Circle circle1 = new Circle();
circle1.setCenterX(petrolStations.get(i));
circle1.setCenterY(petrolStations.get(j));
circle1.setRadius(1);
circle1.setStroke(Color.BLACK);
circle1.setFill(Color.WHITE);
circle1.setScaleX(3);
circle1.setScaleY(3);
pane.getChildren().add(circle1);
}
http://i.imgur.com/JkV3LiW.png
Why not take the ratio of x and y with respect to the width/height? Take a look at this:
Pane pane = new Pane();
Text text = new Text(250,250,"1");
pane.getChildren().add(text);
double width = 150;
double height = 150;
Scene scene = new Scene(pane, width, height);
double x = 50;
double y = 50;
double xRatio = x / width; //GET THE RATIO
double yRatio = y / width; //GET THE RATIO
text.xProperty().bind(pane.widthProperty().multiply(xRatio));
text.yProperty().bind(pane.heightProperty().multiply(yRatio));
stage.setTitle("Hello World!");
stage.setScene(scene);
stage.show();
When I run this code, the initial state is:
Upon resizing:
I've been trying to teach myself D3.js, but I can't seem to get semantic zoom (zooming positions but not shapes) to work for me.
I've read the d3 zoom docs here, and attempted to functionally copy the svg semantic zoom example code
This is my code:
var X, Y, circle, circles, h, i, j, svg, transform, w, zoom, _i, _j;
w = 1200;
h = 600;
circles = [];
for (j = _i = 0; _i <= 6; j = ++_i) {
for (i = _j = 0; _j <= 12; i = ++_j) {
circles.push({r: 25, cx: i * 50, cy: j * 50});
}
}
X = d3.scale.linear()
.domain([0, 1])
.range([0, 1]);
Y = d3.scale.linear()
.domain([0, 1])
.range([0, 1]);
zoom = d3.behavior.zoom()
.x(X)
.y(Y)
.on("zoom", function() {
return circle.attr("transform", transform);
});
transform = function(d) {
return "translate(" + (X(d.cx)) + ", " + (Y(d.cy)) + ")";
};
svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h)
.call(zoom)
.append("g");
circle = svg.selectAll("circle")
.data(circles)
.enter().append("circle")
.attr("r", function(d) {
return d.r;
}).attr("cx", function(d) {
return d.cx;
}).attr("cy", function(d) {
return d.cy;
}).attr("transform", transform);
Live version at jsfiddle.
This should be pretty simple. I'm creating grid of circles that should exactly touch when no zoom is applied (distance is 50 px, diameter is 50 px). When I zoom in, I expect the circles to spread apart, with the point under the mouse remaining stationary. I expect the zoom to be smooth and linear with applied mouse wheeling. The circles should remain the same size, though, so that they stop touching when I zoom in; they should overlap when I zoom out.
Instead, initially, the circles are spread out exactly twice as far as they should be. When I zoom in and out, the center point is not under the mouse (and moves around depending on how I pan). Zoom is highly nonlinear, asymptotically approaching a scale of 1 (circles touching) as I zoom out, and rapidly accelerating as I zoom in.
This seems really odd, and I can't spot significant differences between my code and the semantic zoom example, which works as expected. I conclude that I don't actually understand how D3 zoom is supposed to work. Can someone sort me out?
Your code is very close to being correct: Working demo.
Use scale to map the location of objects
Instead of saving the exact location of objects in them and then using scales with range and domain set to [0, 1], use the scales to do the mapping for you:
for (j = _i = 0; _i <= 6; j = ++_i) {
for (i = _j = 0; _j <= 12; i = ++_j) {
circles.push({
r: 25,
cx: i,
cy: j,
color: "#000"
});
}
}
X = d3.scale.linear()
.domain([0, 6])
.range([0, w]);
Y = d3.scale.linear()
.domain([0, 12])
.range([0, h]);
The change here is that now D3 knows about the aspect ratio of your viewport and in what proportions it should transform the scales so as to keep the point under the svg static under the mouse. Otherwise, it was trying to zoom in and out of a square, resulting in a jarring experience.
The problem was the initial position of the circles stacking up on the translation.
Live code with the problem pointed out and fixed, and a few other modifications:
var size = 600
var scale = 100
circles = []
for (var j = 0; j<6; j++) {
for (var i = 0; i<6; i++) {
circles.push({x: i*scale, y: j*scale })
}
}
var X = d3.scale.linear()
.domain([0,6*scale])
.range([0,size])
var Y = d3.scale.linear()
.domain([0,6*scale])
.range([0,size])
function transform(d) {
return "translate("+X(d.x)+", "+Y(d.y)+")"
}
var circle /*fwd declaration*/
var zoom = d3.behavior.zoom()
.x(X).y(Y)
.on("zoom", function () {
circle.attr("transform", transform)
})
var svg = d3.select("body").append("svg")
.attr("width", size).attr("height", size)
.call(zoom)
.append("g")
circle = svg.selectAll("circle")
.data(circles)
.enter().append("circle")
.attr("r", 20)
/*the problem was this initial offset interfering with the
translation we were applying, resulting in very strange behavior*/
/* .attr("cx", function (d) {return d.x})
.attr("cy", function (d) {return d.y})*/
.attr("transform", transform)
The "scale" parameter should do nothing, but if you add in those commented lines, it affects the initial position and causes the non-intuitive effects.
The original problems were:
Initial scale appeared to be more zoomed than it should have been.
Zooming out very var produced a noticeable nonlinear asymptotic effect.
Zooming out then panning around, then zooming back in did not work at all like expected, with the diagram sliding under the mouse instead of staying pinned.
All of these are straightforward consequences of the initial position:
The initial distances appeared bigger because we applied their original positions plus the zoom translation.
The nonlinear asymptotic effect was the zoom translation distances going to zero asymptotically (as expected), but the initially applied distances not going to zero, giving the appearance of a nonzero zoom asymptote.
While zoomed out, D3 thinks it's zoomed out more than the user does (because of the extra distances between circles), which means when a pan is applied, the center of the image as D3 tracks it is moving differently than what the user expects, which causes the effect of the zoom center not being under the mouse.
You can play with these effects to understand them by uncommenting the initial position lines and applying the same zoom actions with different scale parameters. Commenting them causes the circles to initially be all at screen-space 0,0, so that only the zoom distance translation is applied, which is what we want.
Props to musically_ut's answer for suggesting the smaller world-space coordinate scale, which shouldn't have made any difference, but did, which helped me identify the problem.
I am looking for an algorithm or help developing one for creating a tie-dye pattern in a 2-dimensional canvas. I will be using HTML Canvas (via fabric.js) or SVG and JavaScript, but I'm open to examples in any 2D graphics package, like Processing.
I would draw concentric rings of different colors, and then go around radially and offset them. Here's some pseudo-code for drawing concentric rings:
const kRingWidth = 10;
const centerX = maxX / 2;
const centerY = maxY / 2;
for (y = 0; y < maxY; y++)
{
for (x = 0; x < maxX; x++)
{
// Get the color of a concentric ring - assume rings are 10 pixels wide
deltaX = x - centerX;
deltaY = y - centerY;
distance = sqrt (deltaX * deltaX + deltaY * deltaY);
whichRing = int(distance / kRingWidth);
setPixel(x, y, myColorTable [ whichRing ]); // set the pixel based on a color look-up table
}
}
Now, to get the offsets, you can perturb the distance based on the angle of (x, y) to the x axis. I'd generate a random noise table with, say 360 entries (one per degree - you could try more or fewer to see how it looks). So after calculating the distance, try something like this:
angle = atan2(y, x); // This is arctangent of y/x - be careful when x == 0
if (angle < 0) angle += 2.0 * PI; // Make it always positive
angle = int(angle * 180 / PI); // This converts from radians to degrees and to an integer
distance += noiseTable [ angle ]; // Every pixel at this angle will get offset by the same amount.