I was wondering why the following produces a white field where the squares overlap each other:
http://jsfiddle.net/yNTTj/5/
// square 1
ctx.moveTo( 0, 0); // left top
ctx.lineTo(200, 0); // right top
ctx.lineTo(200, 200); // right bottom
ctx.lineTo( 0, 200); // left bottom
ctx.lineTo( 0, 0); // left top
// square 2
ctx.moveTo(100, 100); // left top
ctx.lineTo(100, 300); // left bottom
ctx.lineTo(300, 300); // right bottom
ctx.lineTo(300, 100); // right top
ctx.lineTo(100, 100); // left top
ctx.fill();
So, while the first square is drawn with a path defined clockwise, the second square is drawn with a path defined counterclockwise.
I would expect both to color black, like what happens if we define the order of square 2 the same way: http://jsfiddle.net/yNTTj/6/. Apperantly, however, the overlapping space becomes white (generally speaking, the background color).
If I define a path the other way round, it's basically the same region it's cutting off, so why does it yield a different result when filling?
That type of filling behavior is known as the "non-zero winding rule". Wikipedia has a page on it.
The specification defines that behavior. Search this page of the specification for "winding".
Related
how would a go about drawing the inner blue slice of this circle, to simulate varying stroke weight.
I have tried a approach where i draw the stroke by drawing small circles on each angle of the circle and increasing the radius on certain parts of the circle. But this doesnt give the right result because the circle gets "pixelated" in the edge, and it skews the circle outwards.
There is no easy way to accomplish this. Part of the difficulty is that Canvas, the underlying technology that p5.js uses to draw graphics, doesn't support variable stroke weights either. In Scalable Vector Graphics, which has similar limitations, the best way to accomplish this would be to describe the shape as the outer perimeter, and the perimeter of the inner void, and then fill the shape without any stroke. I think Canvas would support this approach, but I don't think it can be done easily with p5.js because there's now way to jump to a new position when drawing bezier curves with beginShape()/bezierVertex(). However, one way you could do this in p5.js would be to fill the outer shape and then "remove" the inner void. If you want to draw this on top of other existing graphics then the best way is to draw this shape to a separate p5.Graphics object which you then draw to your main canvas with image():
let sprite;
function setup() {
createCanvas(windowWidth, windowHeight);
sprite = createGraphics(100, 100);
sprite.noStroke();
sprite.fill('black');
sprite.angleMode(DEGREES);
sprite.circle(50, 50, 100);
// switch to removing elements from the graphics
sprite.erase();
// Translate and rotate to match the shape you showed in your question
sprite.translate(50, 50);
sprite.rotate(-45);
// Remove a perfect semi circle from one half, producing regular 5px stroke circle
sprite.arc(0, 0, 90, 90, -90, 90);
// Remove a half-ellipse from the other side of the circle, but this time the
// height matches the previous arc, but the width is narrower.
// Note: the angles for this arc overlap the previous removal by a few degrees
// to prevent there from being a visible seam in between the two removed shapes.
sprite.arc(0, 0, 70, 90, 85, 275, OPEN);
}
function draw() {
background('lightgray');
image(sprite, mouseX - 50, mouseY - 50);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
I want to run a for loop that will have a line with a color of brown. This line will get smaller and smaller, but not too small.
The final image will look like this, but with the table top being colored in brown:
//Back wall
fill(102, 102, 102);
rect(50,50,300,300);
//Top Left Corner
line(50,50,0,0);
//Top Right Corner
line(350,50,400,0);
//Bottom Left Corner
line(350,350,400,400);
//Bottom Riight Corner
line(50,350,0,400);
//Table
//Top Left
fill(48, 17, 0);
rect(163,312,3,38);
//Top Right
fill(48, 17, 0);
rect(230,312,3,38);
//Mesa
fill(48, 17, 0);
rect(126,322,142,5);
//Right Side
line(126,322,168,312);
//Top Side
line(234,312,168,312);
//Right Side
line(269,322,232,312);
//Bottom Left Leg
rect(126,327,5,41);
line(126,368,126,322);
//Bottom Right Leg
rect(263,327,5,41);
line(269,368,268,322);
I have tried this for loop:
for(var x = 200; x > 100; x--){
stroke(61, 34, 0);
line(x,200,x,200);
}
The x value will decrease until x = 100. But, it is not showing the the line getting smaller EVEN after making sure the background(); is out of the loop.
P.S. The pieces of code given are separate.
You're only changing the x coordinate of the lines you're drawing, so the line is moving horizontally, not vertically.
If you want the line to move vertically (to color in the table) and horizontally (to make it smaller as it gets "further away"), you'll have to change both the x and y values you pass into the line() function.
But you're making this harder than it needs to be. There is no reason for you to draw a bunch of lines to get this shape. Just use the beginShape() function to draw the polygon directly. Something like this:
beginShape();
vertex(100, 100); //upper-left
vertex(200, 100); //upper-right
vertex(250, 200); //lower-right
vertex(50, 200); //lower=left
endShape(CLOSE);
Note that this is just an example, and you'll have to play around with the values to draw it in the correct location. But the point is that you don't have to use a for loop to draw lines just to draw a polygon.
Since you're trying to draw a 3D scene, you should also note that you can simply use 3D coordinates along with the vertex() function to draw in 3D. No need to try to force the perspective yourself.
I have an arrow with text associated with it. The text overlaps the arrow at certain point. I want the arrow to not visible in the rectangle that is bounded by the text i wrote the following code
AdjustableArrowCap *cap1 = new AdjustableArrowCap(5, 5, true);
Pen *myPen1 = new Pen(Color::Color(0,255,255), width);
myPen->SetCustomEndCap(cap1);
GraphicsPath path;
path.AddLine(point1,point2);
Font font(&FontFamily(L"arial"), 21);
Brush *brush=new SolidBrush(Color::Color(0,255,255,255));
SolidBrush solidBrush(Color(255, 255, 0, 0));
StringFormat format;
format.SetAlignment(StringAlignmentCenter);
format.SetLineAlignment(StringAlignmentCenter);
RectF rectbo;
graph->MeasureString(strdata,wcslen(strdata),&font,PointF::PointF(point2),&rectbo);
graph->DrawLine(myPen,point2,point1);
Region pathRegion(&path);
sta=pathRegion.Intersect(rectbo);
graph->fillRegion(pathRegion,&brush);
graph->DrawString(strdata,wcslen(strdata),&font,point2,&format,brush1);
}
I feel like i m trying to fill up a line with colour which is not possible so how can i make the line invisible.
Instead of drawing the line from the Point2 calculate which corner point or centered edge point (Depending on your design preference) is closest to Point1 then draw the line from there.
I've created a 3D map and I'm labelling points on this map through Sprites. This in itself works fine, except for the positioning of the sprite labels.
Because I'm creating a map the camera can tilt from 0 to 90 degrees, while ideally the label always stays some distance directly above the item it is labelling on the screen. But unfortunately, as sprites are always centred around their origin and that overlaps the item, I have to move the sprite up on the Y world axis and with that the centre location of the sprite changes as the camera is tilted. This looks weird if the item looked at is off centre, and doesn't work too well when the camera is looking straight down.
No jsfiddle handy, but my application at http://leeft.eu/starcitizen/ should give a good impression of what it looks like.
The code of THREE.SpritePlugin suggests to me it should be possible to use "matrixWorld" to shift the sprite some distance up on the screen's Y axis while rendering, but I can't work out how to use that, nor am I entirely sure that's what I need to use in the first place.
Is it possible to shift the sprites up on the screen while rendering, or perhaps change their origin? Or is there maybe some other way I can achieve the same effect?
Three.js r.67
As suggested by WestLangley, I've created a workable solution by changing the sprite position based on the viewing angle though it took me hours to work out the few lines of code needed to get the math working. I've updated my application too, so see that for a live demo.
With the tilt angle phi and the heading angle theta as computed from the camera in OrbitControls.js the following code computes a sprite offset that does exactly what I want it to:
// Given:
// phi = tilt; 0 = top down view, 1.48 = 85 degrees (almost head on)
// theta = heading; 0 = north, < 0 looking east, > 0 looking west
// Compute an "opposite" angle; note the 'YXZ' axis order is important
var euler = new THREE.Euler( phi + Math.PI / 2, theta, 0, 'YXZ' );
// Labels are positioned 5.5 units up the Y axis relative to its parent
var spriteOffset = new THREE.Vector3( 0, -5.5, 0 );
// Rotate the offset vector to be opposite to the camera
spriteOffset.applyMatrix4( new THREE.Matrix4().makeRotationFromEuler( euler ) );
scene.traverse( function ( object ) {
if ( ( object instanceof THREE.Sprite ) && object.userData.isLabel ) {
object.position.copy( spriteOffset );
}
} );
Note for anyone using this code: that the sprite labels are children of the object group they're referring to, and this only sets a local offset from that parent object.
I had a similar problem, but with flat sprites; I put trees on a map and wanted them to rotate in such a way that they'd rotate around their base, rather than their center. To do that, i simply edited the image files of the trees to be twice as tall, with the bottom as just a transparency:
http://imgur.com/ogFxyFw
if you turn the first image into a sprite, it'll rotate around the tree's center when the camera rotates. The second tree will rotate around it's base when the camera rotates.
For your application, if you resize the textbox in such a way that the center of it would be coincide with the star; perhaps by adding a few newlines or editing the height of the sprite
This is very much a hack, but if you will only use sprites in this way, and could tolerate a global change to how sprites were rendered, you could change the following line in the compiled three.js script:
Find (ctrl+F) THREE.SpritePlugin = function, and you'll see:
this.init = function ( renderer ) {
_gl = renderer.context;
_renderer = renderer;
vertices = new Float32Array( [
- 0.5, - 0.5, 0, 0,
0.5, - 0.5, 1, 0,
0.5, 0.5, 1, 1,
- 0.5, 0.5, 0, 1
] );
I changed the definition of the array to the following:
var vertices = new Float32Array( [
- 0.5, - 0.0, 0, 0,
0.5, - 0.0, 1, 0,
0.5, 1.0, 1, 1,
- 0.5, 1.0, 0, 1
] );
And now all my sprites render with the rotation origin at the bottom.
If you use the minified version, search for THREE.SpritePlugin=function and move the cursor right until you find the Float32Array defined, and make the same changes there.
Note: this changes how things render only when using WebGL. For the canvas renderer you'll have to play a function called renderSprite() in the THREE.CanvasRenderer. I suspect playing with these lines will do it:
var dist = 0.5 * Math.sqrt( scaleX * scaleX + scaleY * scaleY ); // allow for rotated sprite
_elemBox.min.set( v1.x - dist, v1.y - dist );
_elemBox.max.set( v1.x + dist, v1.y + dist );
This function will also be a lot more difficult to find in the minified version, since renderSprite() is not an outward facing function, it'll likely be renamed to something obscure and small.
Note 2: I did try making these modifications with "polyfills" (or rather, redefining the SpritePlugin after Three is defined), but it caused major problems with things not being properly defined for some reason. Scoping is also an issue with the "polyfill" method.
Note 3: My version of three.js is r69. So there may be differences above.
I'm stuck on some trivial question and, well, I guess I need help here.
I have two rectangles and it's guaranteed that they have one common point from their 4 base points (upper part of the picture). It's also guaranteed that they are axis-aligned.
I know this common point (which also can be easily deduced), dimensions and the coordinates of these rectangles.
Now, I need to retrieve the coordinates of the rectangles named 1 and 2 and I'm seeking for an easy way to do that (lower part of the picture).
My current implementation relies on many if statements and I suspect I'm too stupid to find a better way.
Thank you.
Update: My current implementation.
Point commonPoint = getCommonPoint(bigRectangle, smallRectangle);
rectangle2 = new Rectangle(smallRectangle.getAdjacentVerticalPoint(commonPoint),
bigRectangle.getOppositePoint(commonPoint));
rectangle1 = new Rectangle(smallRectangle.getAdjacentHorizontalPoint(commonPoint)
bigRectangle.getOppositePoint(commonPoint));
// Now simply adjust one of these rectangles to remove the overlap,
// it's trivial - we take the 'opposite' points for 'small' and 'big'
// rectangles and then use their absolute coordinate difference as
// a fix for either width of 'rectangle2' or height of 'rectangle1'
// (in this situation it's going to be width).
adjustRectangle(rectangle2);
This is refactored, but still methods getCommonPoint and getAdjacent... and getOpposite have many if statements and I thought if this can be done better.
The top and bottom values of Rectangle 1 are the same as the big rectangle. The left and right values of rectangle 2 are the same as the small rectangle. We only need to obtain the left and right values of rectangle 1, and the top and bottom values for rectangle 2. So we only have 2 simple if-statements:
if (bigRectangle.Left == smallRectangle.Left)
left = smallRectangle.Right
right = bigRectangle.Right
else
left = bigRectangle.Left
right = smallRectangle.Left
rectangle1 = new Rectangle(left, bigRectangle.Top, right - left, bigRectangle.Height)
if (bigRectangle.Top == smallRectangle.Top)
top = smallRectangle.Bottom
bottom = bigRectangle.Bottom
else
top = bigRectangle.Top
bottom = smallRectangle.Top
rectangle2 = new Rectangle(smallRectangle.Left, top, smallRectangle.Width, bottom - top)
In the above, the Rectangle constructors takes as inputs: left, top, width, height.
From what I understand, seems like you need to have an if (or switch) statement to determine the orientation of the rectangle, and from there it would just be some easy adding and subtracting:
If you know the coords of the inner blue rectangle (and the dimensions of the rect as a whole), then finding the others should be no problem. One of the R1 and R2 points will always be the same: equal to the adjacent blue rect point. and the others is just a lil math.
Doesn't seem like you can get away from the initial if/switch statement. If the rectangle could only be up or down, then you could just make the offset negative or positive, but it can also be left or right..so you might be stuck there. You can make a -/+ offset for a vertical or horizontal state,but then you'd have to do a check on each calculation
Assuming you had RA and RB as your inputs, and whatever language you're using has a Rectangle class, here's a way to do it with 4 ifs, Math.Min, Math.Max, and Math.Abs:
Rectangle r1, r2; // Note - Rectangle constructor: new Rectangle(X, Y, Width, Height)
if (RA.X = RB.X) {
r1 = new Rectangle(Math.Min(RA.Right, RB.Right), Math.Min(RA.Y, RB.Y), Math.Abs(RA.Width - RB.Width), Math.Max(RA.Height, RB.Height));
if (RA.Y = RB.Y) {
// Intersects Top Left
r2 = new Rectangle(RA.X, Math.Min(RA.Bottom, RB.Bottom), Math.Min(RA.Width, RB.Width), Math.Abs(RA.Height - RB.Height));
} else {
// Intersects Bottom Left
r2 = new Rectangle(RA.X, Math.Max(RA.Bottom, RB.Bottom), Math.Min(RA.Width, RB.Width), Math.Abs(RA.Height - RB.Height));
}
} else {
r1 = new Rectangle(Math.Min(RA.X, RB.X), Math.Min(RA.Y, RB.Y), Math.Abs(RA.Width - RB.Width), Math.Max(RA.Height, RB.Height));
if (RA.Y = RB.Y) {
// Intersects Top Right
r2 = new Rectangle(Math.Max(RA.X, RB.X), Math.Min(RA.Bottom, RB.Bottom), Math.Min(RA.Width, RB.Width), Math.Abs(RA.Height - RB.Height));
} else {
// Intersects Bottom Right
r2 = new Rectangle(Math.Max(RA.X, RB.X), Math.Min(RA.X, RA.Y), Math.Min(RA.Width, RB.Width), Math.Abs(RA.Height - RB.Height));
}
}
This code was written in Notepad so it might have a typo or two, but the logic is sound.