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.
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 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.
This is most likely a math issue. I have a line geometry that feeds its vertices positions to an arrow helper. The arrow helper runs normalize() on its direction vector to render its output. If I lay them over each other in the view the arrow vector shoots upward while the line is perfectly drawing to the right of the screen. I am expecting the arrow helper to be in sync with the line geometry.
var origin = new THREE.Vector3(0, 10, 0);
var direction = new THREE.Vector3(80, 10, 0);
direction.normalize();
/*
direction after its normalized
Object
x: 0.9922778767136676
y: 0.12403473458920845
z: 0
*/
http://jsbin.com/nazapabaxaco/1/edit?html,js,output
Mathematically this is actually correct for the arrow helper vector. But its not the expected result. If I increase the distance X to say 500 the two converge again but not completely, they are still out of sync and just shooting apart at a really long distance.
The vector in use would be coming from a moving object and not the camera's unproject method so the points need to remain dynamically fed into.
You compute the direction vector by subtracting one line segment endpoint from the other, and then normalizing.
Please check this neat piece of code I found:
glEnable(GL_LINE_SMOOTH);
glColor4ub(0, 0, 0, 150);
mmDrawCircle( ccp(100, 100), 20, 0, 50, NO);
glLineWidth(40);
ccDrawLine(ccp(100, 100), ccp(100 + 100, 100));
mmDrawCircle( ccp(100+100, 100), 20, 0, 50, NO);
where mmDrawCircle and ccDrawLine just draws these shapes [FILLED] somehow... (ccp means a point with the given x, y coordinates respectively).
My problem .... Yes, you guessed it, The line overlaps with the circle, and both are translucent (semi transparent). So, the final shape is there, but the overlapping part becomes darker and the overall shape looks ugly.. i.e, I would be fine if I was drawing with 255 alpha.
Is there a way to tell OpenGL to render one of the shapes in the overlapping parts??
(The shape is obviously a rectangle with rounded edges .. half-circles..)
You could turn on GL_DEPTH_TEST and render the line first and a little closer to the camera. When you then render the circle below, the fragments of the line won't be touched.
(You can also use the stencil buffer for an effect like this).
Note that this might still look ugly. If you want to use anti-aliasing you should think quite hard on which blending modes you apply and in what order you render the primitives.
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".