Imitating html's flexible rectangle [closed] - c++

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I want to imitate the well-known HTML's great great RECTANGLE. I mean all of the characteristic of the rectangles like borders, border-radius, triangulated quad on corners, etc. I don't like to use any other libraries except mine. I would like to create this one for the sake of learning and experience, and also to use it for the future as a GUI system. I am working on this concept of shuffled rectangles.
It is composed of:
4 GL_TRIANGLES as quadrilateral on corners
4 arcs on corners
4 borders on all sides
And one front big rectangle on the front
And these are the outputs I made so far :)
w/o border-radius
w/ border-radius
So the things I am really really confused with are
Border-sizes
Border-locations
Is it the X, Y's or the W, H's
When to draw or not front-most rectangle
Anything I don't know yet.
...Please comment other things I should include here for clarification. Thanks!
Edit:
Hmm..., Okay as for a minimal question only. I just wanted to implement this stuffs and programmatically compute their values as I change a single attributes of the rectangle.
border-radii-sizes
border-sides
I'm putting too much images here, please please understand me :(
*left-border
*corner
I was thinking of that kind of rectangles positioning and it's really difficult in my head to compute for their coordinates or the sizes base on the set of attributes I'm gonna define on the designing part. For example, If I define the border-radius-top-left to have a value of 50% with its counter part of border-size-left with a certain value, what would be the formula I must consider. Or, must I need to add any component/ private attributes in order to make this thing happen?

Yey!! I have figured it out!!
Please let me SO to discuss my [problem solved] here.
Sorry for my unclassified art :) I made it colorful for property separation.
Explanation:
Arcs w/c serves as corner-radii.
The formula for points (x, y) will be automatically generated here
corner-radii-points (x, y) are the target.
points (x, y) Should be the only one adjusting based on the given radii values.
Curved part of this should be static in position.
Fake borders these are the inner-side-borders.
Properties of this such as [x, y, width, height] will depend on corner-radii-points(x, y) and points(x, y).
Inner quad w/c is the inner-rectangle
This will just serves as cover
Properties of this such as [x1, y1, x2, y2](this is a polygon so I labeled it like that) will depend on points (x, y)
Now I can simply do this:
Designing Part:
int w3 = rect.width >> 3;
int h3 = rect.height >> 3;
rect.setBorderRadius(C_NW, w3, h3);
rect.setBorderRadius(C_NE, w3, h3);
rect.setBorderRadius(C_SE, w3, h3);
rect.setBorderRadius(C_SW, w3, h3);
rect.setColors(C_NW, cc::getColor(COLORS::RED));
rect.setColors(C_NE, cc::getColor(COLORS::GREEN));
rect.setColors(C_SE, cc::getColor(COLORS::BLUE));
rect.setColors(C_SW, cc::getColor(COLORS::YELLOW));
rect.setBorderColor(B_TOP, cc::getColor(COLORS::WHITE));
rect.setBorderColor(B_RIGHT, cc::getColor(COLORS::WHITE));
rect.setBorderColor(B_BOTTOM, cc::getColor(COLORS::GRAY3));
rect.setBorderColor(B_LEFT, cc::getColor(COLORS::GRAY3));
rect.setBorderSize(B_TOP, 20);
rect.setBorderSize(B_RIGHT, 20);
rect.setBorderSize(B_BOTTOM, 20);
rect.setBorderSize(B_LEFT, 20);
Results:
rect is the one with Lightning McQueen image.
Those are the formulas I evaluate base on trial and error.
Also thanks to Sir Mark Garcia for helping me by demonstrating some diagrams, and suggested to use MS Paint for visualization :)
Next problem is masking as you can see that there are non-curved borders and corner radius at the same time, but I won't focus on that at this moment.
If ever someone is interested in this kind of rectangle implementation, you can PM me here and I'll give you the source code.

Related

Offset with LineTo() not working

For a school lesson, I made a simple paint program to draw shapes of different colors. One the exercises wants me to add a cube function to draw with. The exercise want me to draw it using 12 lines using the MoveToEx() and LineTo() functions (which were covered in the primary lesson).
I know how to draw the cube by using offsetting lines to make the shape, but LineTo() doesn't seem to want me to use multiplication or division to find coordinates.
The code for one line goes like this:
int lengthX = pt0.x - pt1.x; // 'pt0' and 'pt1' are POINT structs for
int lengthY = pt0.y - pt1.y; // the start and end points of the line.
// 'pt0' is the point the use presses the
// mouse button, and 'pt1' is where the mouse
// currently is or the point where the user
// lifts up the mouse button.
MoveToEx(hdc, pt0.x, pt0.y, 0);
LineTo(hdc, pt1.x + (lengthX * (1/3)), pt1.y + (lengthy * (1/3)));
The goal of this code is to simple have the line drawn only 2/3 the way to the end point. The problem as far as I currently understand it is when I add (length_ * (1/3)) to the parameter, it seems to just be ignored altogether.
Why is this, and what could I do to fix it.
(Please try to give an answer still using MoveToEx and LineTo(). I understand there may be better ways, but this is for school, so I want to try and stick with the parameters given to me.)

Wrap around edge of world with specific customization

i've been looking around to find the best way to have wrap arround edges of a world for the bodies.
I managed to use this topic to do it :
How do I make a Box2D wrap around world?
Using SetTransform() i could make it appear on the other X/Z side.
Now Let's say i have an object for example a simple box 10x10.
If half the box goes beyond upper Y edge i want the portion that goes beyond to appear below with the other part of the box that is still visibile on the upper part to stay there.
To summarize i want a "real wrap arround edge like this used to be done in old games.
I hope i was clear enough...
Edit :
I've added a picture to explain what i mean :
Thanks
I have not used Box2d but I have resolved this problem before in Processing, hopefully the logic translates easily
In Processing a rectangle is drawn as rect(x, y, rectangleWidth, rectangleHeight) at position x, y which represents the top left corner of the rectangle. The rectangle's width and height point right and down from x and y respectively
The idea is to draw the rectangle normally unless the bottom would be off the bottom edge of the viewport (because the rectangle's height points down based on y). If the rectangle is off the bottom edge of the viewport then you instead draw two partial rectangles
In the code below height is the height of your viewport
if (y < height-10)
rect(x, y, 10, 10); // Normal condition, entire rectangle
else {
rect(x, 0, 10, 10-(height-y)); // Top partial rectangle
rect(x, y, 10, height-y); // Bottom partial rectangle
}
Finally i googled a bit found this article on Unity :
http://gamedevelopment.tutsplus.com/articles/create-an-asteroids-like-screen-wrapping-effect-with-unity--gamedev-15055
On Box2D I created 8 ghosts bodies which were positionned as defined in the article.
During Box2D Steps i added some logics to check where my original body is positionned.
When it goes to the edges the Ghost Body appears on the other edge. It works also when the original Body goes on a corder. 4 ghosts bodies will appear on each edges.

Connecting Circles in C++/Excel

This is quite complicated to explain, so I will do my best, sorry if there is anything I missed out, let me know and I will rectify it.
My question is, I have been tasked to draw this shape,
(source: learnersdictionary.com)
This is to be done using C++ to write code that will calculate the points on this shape.
Important details.
User Input - Centre Point (X, Y), number of points to be shown, Font Size (influences radius)
Output - List of co-ordinates on the shape.
The overall aim once I have the points is to put them into a graph on Excel and it will hopefully draw it for me, at the user inputted size!
I know that the maximum Radius is 165mm and the minimum is 35mm. I have decided that my base [Font Size][1] shall be 20. I then did some thinking and came up with the equation.
Radius = (Chosen Font Size/20)*130. This is just an estimation, I realise it probably not right, but I thought it could work at least as a template.
I then decided that I should create two different circles, with two different centre points, then link them together to create the shape. I thought that the INSIDE line will have to have a larger Radius and a centre point further along the X-Axis (Y staying constant), as then it could cut into the outside line.*
*(I know this is not what it looks like on the picture, just my chain of thought as it will still give the same shape)
So I defined 2nd Centre point as (X+4, Y). (Again, just estimation, thought it doesn't really matter how far apart they are).
I then decided Radius 2 = (Chosen Font Size/20)*165 (max radius)
So, I have my 2 Radii, and two centre points.
This is my code so far (it works, and everything is declared/inputted above)
for(int i=0; i<=n; i++) //output displayed to user
{
Xnew = -i*(Y+R1)/n; //calculate x coordinate
Ynew = pow((((Y+R1)*(Y+R1)) - (Xnew*Xnew)), 0.5); //calculate y coordinate
AND
for(int j=0; j<=n; j++)//calculation for angles and output displayed to user
{
Xnew2 = -j*(Y+R2)/((n)+((0.00001)*(n==0))); //calculate x coordinate
Ynew2 = Y*(pow(abs(1-(pow((Xnew2/X),2))),0.5));
if(abs(Ynew2) <= R1)
cout<<"\n("<<Xnew2<<", "<<Ynew2<<")"<<endl;
I am having the problem drawing the crescent moon that I cannot get the two circles to have the same starting point?
I have managed to get the results to Excel. Everything in that regard works. But when i plot the points on a graph on Excel, they do not have the same starting points. Its essentially just two half circles, one smaller than the other (Stops at the Y axis, giving the half doughnut shape).
If this makes sense, I am trying to get two parts of circles to draw the shape as such that they have the same start and end points.
If anyone has any suggestions on how to do this, it would be great, currently all I am getting more a 'half doughnut' shape, due to the circles not being connected.
So. Does anyone have any hints/tips/links they can share with me on how to fix this exactly?
Thanks again, any problems with the question, sorry will do my best to rectify if you let me know.
Cheers
Formular for points on a circle:
(x-h)^2+(y-k)^2=r^2
The center of the circle is at (h/k)
Solving for y
2y1 = k +/- sqrt( -x^2 + 2hx +r^2 - h^2)
So now if the inner circle has its center # h/k , the half-moon will begin # h and will stretch to h - r2
Now you need to solve the endpoint formular for the inner circle and the outter circle and plot it. Per x you should receive 4 points (solve the equation two times, each with two solutions)
I did not implement it, but this would be my train of thought...

Drawing big circles from scratch [closed]

It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.
Closed 10 years ago.
I am new to C++, but the language seems alright to me. As a learning project I have decided to make a minor 2D graphic-engine. It might seem like a hard project, but I have a good idea how to move on.
I havn't really started yet, but I am forming things in my head at the moment, when I came across this problem:
At some point I will have to make a function to draw circles on the screen. My approach to that right now would be something like this:
in a square with sides from (x-r) to (x+r) loop through x and y,
if at each point, the current distance sqr(x^2+y^2) is less than or equal to r
, then draw a pixel at that point.
This would work, if not, dont bother telling me, I'll figure it out. I would of cause only draw this circle if the x+r & y+r is on the screen.
The problem lies in that I will need to draw really big circles sometimes. If for example I need to draw a circle with radius 5000, the (if pixel loop calculations would need loop a total of 10000^2 times). So with a processor at 2Ghz, this single circle would only be able to render 2Ghz/(10000^2) which is ~22 times/s while taking up the whole core (believing it only takes one calculation per pixel, which is nowhere the truth).
Which approach is the correct one now? I guess it has something to do with using the GFX for these simple calculations. If so, can I use OpenGL for C++ for this? I'd like to learn that as well :)
My first C/C++ projects were in fact graphics libraries as well. I did not have OpenGL or DirectX and was using DOS at the time. I learned quite a lot from it, as I constantly found new and better (and faster) ways to draw to the screen.
The problem with modern operating systems is that they don't really allow you to do what I did back then. You cannot just start using the hardware directly. And frankly, these days you don't want to anymore.
You can still draw everything yourself. Have a look at SDL if you want to put your own pixels. This is a C library that you will be able to wrap into your own C++ objects. It works on different platforms (including Linux, Windows, Mac,...) and internally it will make use of things like DirectX or OpenGL.
For real-world graphics, one doesn't just go about drawing one's own pixels. That is not efficient. Or at least not on devices where you cannot use the hardware directly...
But for your purposes, I think SDL is definitely the way to go! Good luck with that.
You don't do graphics by manually drawing pixels to screen, that way madness lies.
What you want to use is either DirectX or OpenGL. I suggest you crack open google and go read, there's a lot to read out there.
Once you've downloaded the libs there's lots of sample projects to take a look at, they'll get you started.
There's two approaches at this point: there's the mathematical way of calculating the vectors that describe a shape with a very large number of sides (i.e it'll look like a circle). Or there's the 'cheating' method of just drawing a texture (i.e a picture) of a circle to the screen with an alpha channel to make the rest of the texture transparent. (The cheating method is easier to code, faster to execute, and produces a better result, although it is less flexible).
If you want to do it mathematically then both of these libraries will allow you to draw lines to screen, so you need to begin your approach from the view of start point and end point of each line, not the individual pixels. i,e you want vector graphics.
I can't do the heavy maths right now, but the vector approach might look a little like this (sudo-code):
in-param: num_of_sides, length_of_side;
float angle = 360 / num_of_sides;
float start_x = 0;
float start_y = 0;
x = startX;
y = startX;
for(int i(0); i < num_of_sides; ++i)
{
float endX, endY;
rotateOffsetByAngle(x, y, x + lenth_of_side, y, angle * i, endX, endY);
drawline(x, y, endX, endY);
x = endX;
y = endY;
}
drawline(float startX, startY, endX, endY)
{
//does code that draws line between the start and end coordinates;
}
rotateOffsetByAngle(float startX, startY, endX, endY, angle, &outX, &outY)
{
//the in-parameters startX, startY and endX, endY describe a line
//we treat this line as the offset from the starting point
//do code that rotates this line around the point startX, startY, by the angle.
//after this rotation is done endX and endY are now at the same
//distance from startX and startY that they were, but rotated.
outX = endX;
outY = endY; //pass these new coordinates back out by reference;
}
In the above code we move around the outside of the circle drawing each individual line around the outside 1 by one. For each line we have a start point and an offset, we then rotate the offset by an angle (this angle increases as we move around the circle). Then we draw the line from the start point to the offset point. Before we begin the next iteration we move the start point to the offset point so the next line starts from the end of the last.
I hope that's understandable.
That is one way to draw a filled circle. It will perform appallingly slowly, as you can see.
Modern graphics is based on abstracting away the lower-level stuff so that it can be optimised; the developer writes drawCircle(x,y,r) and the graphics libary + drivers can pass that all the way down to the chip, which can fill in the appropriate pixels.
Although you are writing in C++, you are not manipulating data closest to the core unless you use the graphics drivers. There are layers of subroutine calls between even your setPixelColour level methods and an actual binary value being passed over the wire; at almost every layer there are checks and additional calculations and routines run. The secret to faster graphics, then, is to reduce the number of these calls you make. If you can get the command drawCircle all the way to the graphics chip, do that. Don't waste a call on a single pixel, when it's as mundane as drawing a regular shape.
In a modern OS, there are layers of graphics processing taking the requests of individual applications like yours and combining them with the windowing, compositing and any other effects. So your command to 'draw to screen' is intermediated by several layers already. What you want to provide to the CPU is the minimum information necessary to offload the calculations to the graphics subsystem.
I would say if you want to learn to draw stuff on the screen, play with canvas and js, as the development cycle is easy and comparatively painless. If you want to learn C++, try project Euler, or draw stuff using existing graphics libraries. If you want to write a 2d graphics library, learn the underlying graphics technologies like DirectX and OpenGL, because they are the way that graphics is done in reality. But they seem so complex, you say? Then you need to learn more C++ first. They are the way they are for some very good reasons, however complex the result is.
As the first answer says, you shouldn't do this yourself for serious work. But if you just want to do this as an example, then could could do something like this: First define a function for drawing line segments on the screen:
void draw_line(int x1, int y1, int x2, int y2);
This should be relatively straightforward to implement: Just find the direction that is changing fastest, and iterate over that direction while using integer logic to find out how much the other dimension should change. I.e., if x is changing faster, then y = (x-x1)*(y2-y1)/(x2-x1).
Then use this function to implement a circle as piecewise line elements:
void draw_circle(int x, int y, int r)
{
double dtheta = 2*M_PI/8/r;
int x1 = x+r, x2, y1 = y, y2;
int n = 2*M_PI/dtheta;
for(int i = 1; i < n; i++)
{
double theta = i*dtheta;
x2 = int(x+r*cos(theta)); y2 = int(y+r*sin(theta));
draw_line(x1, y1, x2, y2);
x1 = x2; y1 = y2;
}
}
This uses floating point logic and trigonometric functions to figure out which line elements best approximate a circle. It is a somewhat crude implementation, but I think any implementation that wants to be efficient for very large circles has to do something like this.
If you are only allowed to use integer logic, one approach could be to first draw a low-resolution integer circle, and then subdivide each selected pixel into smaller pixels, and choose the sub-pixels you want there, and so on. This would scale as N log N, so still slower than the approach above. But you would be able to avoid sin and cos.

IDirectDrawSurface7::BltFast Rect vs. X & Y Co-ords

This DirectX 7 function: http://msdn.microsoft.com/en-us/library/windows/desktop/gg426183(v=vs.85).aspx
The parameters include an LPRECT as well as X and Y co-ordinates. My confusion lies in which take priority; the top left co-ordinate of the rectangle, or the X & Y co-ordinates.
Maybe I'm being a total idiot and they serve different purposes, but I don't understand how. Please be patient with me; I'm certainly not as experienced as 99% of you guys, but I'm getting there slowly.
Thanks.
This was a moronic question.
The rect is the part of the image that you want to render, and the x and y co-ordinates are where you want to render to. The source rectangle, and the destination co-ordinates.
Sorry for being such a fool.