How to create a "Concave/Convex Circle Illusion" in OpenGL - c++

Question

This semester, I am taking a Computer Graphics course at school, and our first assignment is to create a concave/convex illusion.
This is an example of what I am supposed to create:
Concave/Convex Circle Illusion
I've tried to work this problem out myself, however I keep getting stuck. I know how to create the gray background, and I know how to create a circle. What I dont know how to do is to make the circle look like the picture. I know how to fill it with a solid color, I just dont know how to fill it with multiple colors and fade it like in the picture.
So here is my C++ code which we run in Visual Studio 15.
#include <cstdlib>
#include <glut.h>
#include <math.h>
const double p = 3.14159/180;
void circle(float r){
glColor3f(1.0,0.0,0.0);
glBegin(GL_LINE_LOOP);
for (int i=100; i <= 460; i++){
double degree = p*i;
double x = cos(degree) * r;
double y = sin(degree) * r;
glVertex2d(x,y);
}
glEnd();
}
/*
//This circle function was my attempt at creating the illusion shown in the picture above.
//I tried to break up the circle into separate pieces and make them each a different color,
//but unfortunately it didnt come out like the picture above.
void circle (float radius){
glColor3f(0.0,0.0,0.0); // black
glBegin(GL_POLYGON);
glVertex2i(21,21);
glVertex2i(25,19);
glVertex2i(28,17);
glVertex2i(32,16);
glVertex2i(36,17);
glVertex2i(40,19);
glVertex2i(43,21);
glEnd();
glColor3f(0.329412,0.329412,0.329412); // dim grey
glBegin(GL_POLYGON);
glVertex2i(21,21);
glVertex2i(19,25);
glVertex2i(17,30);
glVertex2i(48,30);
glVertex2i(46,25);
glVertex2i(43,21);
glEnd();
glColor3f(0.752941,0.752941,0.752941); // grey
glBegin(GL_POLYGON);
glVertex2i(17,30);
glVertex2i(16,35);
glVertex2i(15,40);
glVertex2i(50,40);
glVertex2i(49,35);
glVertex2i(48,30);
glEnd();
glColor3f(0.650024,0.650024,0.650024); // light grey
glBegin(GL_POLYGON);
glVertex2i(15,40);
glVertex2i(16,45);
glVertex2i(17,50);
glVertex2i(48,50);
glVertex2i(49,45);
glVertex2i(50,40);
glEnd();
glColor3f(0.8,0.8,0.8); // very light grey
glBegin(GL_POLYGON);
glVertex2i(17,50);
glVertex2i(20,55);
glVertex2i(45,55);
glVertex2i(48,50);
glEnd();
glColor3f(1.0,1.0,1.0); // white
glBegin(GL_POLYGON);
glVertex2i(20,55);
glVertex2i(23,58);
glVertex2i(25,60);
glVertex2i(28,62);
glVertex2i(32,63);
glVertex2i(36,62);
glVertex2i(40,60);
glVertex2i(43,58);
glVertex2i(45,55);
glEnd();
}
*/
void display(void){
glClear(GL_COLOR_BUFFER_BIT);
glColor3f(0.658824,0.658824,0.658824);
glBegin(GL_POLYGON); //Creates the gray background
glVertex2i(10,10);
glVertex2i(390, 10);
glVertex2i(390,290);
glVertex2i(10,290);
glEnd();
circle(30);
glFlush();
}
void main(int argc, char** argv){
glutInit(&argc, argv);
glutInitDisplayMode(GLUT_SINGLE | GLUT_RGB);
glutInitWindowSize(400, 300);
glutInitWindowPosition(200,100);
glutCreateWindow("Project 1");
glClearColor(0.0,0.0,0.0,0.0);
glMatrixMode(GL_PROJECTION);
glLoadIdentity();
gluOrtho2D(0.0,400.0,0.0,300.0);
glutDisplayFunc(display);
glutMainLoop();
}
So Ive got the majority of the code down, I just cant figure out the coloring of the circle.
Any advice/help that can make the outcome of my code look like the example picture above would be greatly appreciated.
Thanks!

Answer 1

Drawing by glBegin/glEnd sequences is deprecated since several years.
Read about Fixed Function Pipeline and see Vertex Specification and Shader for a state of the art way of rendering.
But, the effect of the picture is achieved by a simple gray color gradient. The background is gray and inside the circle is a linear color gradient from white to black.
glClear, clear the framebuffer by the color which is set by glClearColor.
Set a gray clear color to create a gray background:
glClearColor( 0.5f, 0.5f, 0.5f, 1.0f );
glClear(GL_COLOR_BUFFER_BIT);
To create a color gradient, you have to set the color attribute by glColor3d, before you set the vertex coordinate by glVertex2d. The color is interpolated between the vertices. Use the primitive type GL_TRIANGLE_FAN to create a filled polygon:
const double p = 3.14159/180;
void circle(float r, bool flip ){
glBegin(GL_TRIANGLE_FAN);
glColor3d( 0.5, 0.5, 0.5 );
glVertex2d( 0.0, 0.0 );
for (int i=0; i <= 360; i++)
{
double degree = p*i;
double c = cos( degree );
double s = sin( degree );
double col = s * 0.5 + 0.5;
if ( flip )
col = 1.0 - col;
glColor3d( col, col, col );
glVertex2d( c*r, s*r );
}
glEnd();
}
The draw function may look like this:
void display(void){
glClearColor( 0.5f, 0.5f, 0.5f, 1.0f );
glClear(GL_COLOR_BUFFER_BIT);
glMatrixMode( GL_MODELVIEW );
glLoadIdentity();
for ( int x = 0; x < 2; ++ x )
{
for ( int y = 0; y < 2; ++ y)
{
glPushMatrix();
glTranslated( 120.0 + 160.0*x, 100.0+100*y, 0.0f );
circle(30, x > 0);
glPopMatrix();
}
}
glFlush();
}
Preview: