tutorials/02-rectangle/RectangleTutorial.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Rectangle Tutorial"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Welcome to the tutorial on how to draw a rectangle using the new QtGui based OpenGL api of PySide2.\n",
    "\n",
    "As we have mentioned on the first tutorial on how to draw the `Hello Triangle`. I will be giving only the relative parts of the code and explain the differences rather than commenting everything.\n",
    "\n",
    "Let's see the final output of our application"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "CompletedProcess(args=['python', 'app.py'], returncode=0)"
      ]
     },
     "execution_count": 2,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "import subprocess\n",
    "\n",
    "subprocess.run([\"python\", \"app.py\"])"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Not so bad right !"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "I am skipping the code on the window holding the gl widget. \n",
    "\n",
    "Here is the constructor of our gl widget."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "class RectangleGL(QOpenGLWidget):\n",
    "    \"Texture loading opengl widget\"\n",
    "\n",
    "    def __init__(self, parent=None):\n",
    "        \"Constructor\"\n",
    "        QOpenGLWidget.__init__(self, parent)\n",
    "        tutoTutoDir = os.path.dirname(__file__)\n",
    "        tutoPardir = os.path.join(tutoTutoDir, os.pardir)\n",
    "        tutoPardir = os.path.realpath(tutoPardir)\n",
    "        mediaDir = os.path.join(tutoPardir, \"media\")\n",
    "        shaderDir = os.path.join(mediaDir, \"shaders\")\n",
    "        #\n",
    "        availableShaders = [\"rectangle\", \"triangle\"]\n",
    "        self.shaders = {\n",
    "            name: {\n",
    "                \"fragment\": os.path.join(shaderDir, name + \".frag\"),\n",
    "                \"vertex\": os.path.join(shaderDir, name + \".vert\")\n",
    "            } for name in availableShaders\n",
    "        }\n",
    "        self.core = \"--coreprofile\" in QCoreApplication.arguments()\n",
    "\n",
    "        # opengl data related\n",
    "        self.context = QOpenGLContext()\n",
    "        self.program = QOpenGLShaderProgram()\n",
    "        self.vao = QOpenGLVertexArrayObject()\n",
    "        self.vbo = QOpenGLBuffer(QOpenGLBuffer.VertexBuffer)\n",
    "        \n",
    "        # ############ Diff 1 ##########################\n",
    "        # this is the novelty in this code. We specify #\n",
    "        # indices of triangles that would made up      #\n",
    "        # our rectangle. Notice its data type          #\n",
    "        self.indices = np.array([\n",
    "            0, 1, 3,  # first triangle\n",
    "            1, 2, 3  # second triangle\n",
    "        ], dtype=ctypes.c_uint)\n",
    "\n",
    "        # vertex data of the panel that would hold the image\n",
    "        \n",
    "        self.vertexData = np.array([\n",
    "            # corners of the rectangle\n",
    "            0.5,  0.5,  0.0,  # top right\n",
    "            0.5,  -0.5, 0.0,  # bottom right\n",
    "            -0.5, -0.5, 0.0,  # bottom left\n",
    "            -0.5, 0.5,  0.0,  # top left\n",
    "        ], dtype=ctypes.c_float)\n",
    "\n",
    "        self.rectColor = QVector4D(0.0, 1.0, 1.0, 0.0)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "As you can see it is fairly close to the constructor of the triangle widget.\n",
    "The initialization is exactly the same as triangle widget so we are skipping that entirely.\n",
    "\n",
    "Let's see the drawing function."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    " def paintGL(self):\n",
    "        \"paint gl\"\n",
    "        funcs = self.context.functions()\n",
    "        # clean up what was drawn\n",
    "        funcs.glClear(pygl.GL_COLOR_BUFFER_BIT)\n",
    "\n",
    "        # bind texture\n",
    "        vaoBinder = QOpenGLVertexArrayObject.Binder(self.vao)\n",
    "        self.program.bind()\n",
    "\n",
    "        # draw stuff\n",
    "        ########## Diff #############\n",
    "        # This is another drawing function in opengl\n",
    "        # Notice that its signature is from OpenGL ES 2\n",
    "        \n",
    "        funcs.glDrawElements(\n",
    "            pygl.GL_TRIANGLES,\n",
    "            self.indices.size,\n",
    "            pygl.GL_UNSIGNED_INT,\n",
    "            self.indices.tobytes())\n",
    "            # VoidPtr(self.indices.tobytes() * ctypes.sizeof(ctypes.c_uint)))\n",
    "        vaoBinder = None\n",
    "        self.program.release()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "- The first parameter is the drawing mode.\n",
    "- The second is the number of elements that is to be drawn, since the indice specifies the index of an element that is to be drawn, it is equal to the size of indices.\n",
    "- We specify the type of the elements of indices\n",
    "- We specify the data of indices. \n",
    "\n",
    "If we want to follow documentation more closely we can also use the commented line instead of the final parameter which creates the void pointer to data of the indices"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "That's it now you know how to draw a rectangle in opengl api of pyside2"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.7.3"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}