More example docs

docs/examples/00-about-examples.md

@@ -101,6 +101,30 @@ In this section you will find a collection of examples that demonstrate how to u
 
 </div>
 
+### Gradients
+
+<div class="grid cards" markdown>
+
+-   __Linear Gradient__
+
+    ---
+
+    [![Example](./../../docs-assets/php-glfw/examples/vg/gradient_linear_thumb.png)](./vector-graphics/gradient_linear.md)
+
+-   __Radial Gradient__
+
+    ---
+
+    [![Example](./../../docs-assets/php-glfw/examples/vg/gradient_radial_thumb.png)](./vector-graphics/gradient_radial.md)
+
+-   __Gradient Wave__
+
+    ---
+
+    [![Example](./../../docs-assets/php-glfw/examples/vg/gradient_wave_thumb.png)](./vector-graphics/gradient_wave.md)
+
+</div>
+
 ### Images
 
 <div class="grid cards" markdown>
@@ -153,6 +177,18 @@ In this section you will find a collection of examples that demonstrate how to u
 
     [![Example](./../../docs-assets/php-glfw/examples/vg/text_alignment_thumb.png)](./vector-graphics/text_alignment.md)
 
+-   __Text Boxes__
+
+    ---
+
+    [![Example](./../../docs-assets/php-glfw/examples/vg/text_boxes_thumb.png)](./vector-graphics/text_boxes.md)
+
+-   __Colored Words__
+
+    ---
+
+    [![Example](./../../docs-assets/php-glfw/examples/vg/text_color_words_thumb.png)](./vector-graphics/text_color_words.md)
+
 -   __Text with Shadow__
 
     ---

docs/examples/opengl/07-text-rendering.md

@@ -4,7 +4,7 @@ This example shows how to render text using PHP OpenGL. It uses a simple bitmap
 
 !!! note
     This example shows how to implement text rendering with OpenGL from scratch. In most cases you want to use the 
-    VectorGraphics API to render text. See the [**VectorGraphics Text Rendering**](./../user-guide/vector-graphics/text.md).
+    VectorGraphics API to render text. See the [**VectorGraphics Text Rendering**](./../../user-guide/vector-graphics/text.md).
 
 <figure markdown>
   ![Text rendering with OpenGL in PHP](./../../docs-assets/php-glfw/examples/07-text-rendering.png){ width="600" }

docs/examples/vector-graphics/gradient_linear.md

@@ -0,0 +1,20 @@
+# Linear Gradient
+
+This PHP GLFW Vector Graphics example show how to create a linear gradient and apply it to a rectangle.
+
+<figure markdown>
+![Linear Gradient Example (PHP-GLFW VG)](./../../docs-assets/php-glfw/examples/vg/gradient_linear.png){ width="600" }
+</figure>
+
+<div style="text-align: center;" markdown>
+[Check out the Code](https://github.com/mario-deluna/php-glfw/blob/master/examples/vg/gradient_linear.php){ .md-button .md-button--primary }
+</div>
+
+Run this example:
+
+```
+php examples/vg/gradient_linear.php
+```
+
+
+

docs/examples/vector-graphics/gradient_radial.md

@@ -0,0 +1,20 @@
+# Radial Gradient
+
+This example demonstrates how to draw a radial gradient using the PHP GLFW Vector Graphics API.
+
+<figure markdown>
+![Radial Gradient Example (PHP-GLFW VG)](./../../docs-assets/php-glfw/examples/vg/gradient_radial.png){ width="600" }
+</figure>
+
+<div style="text-align: center;" markdown>
+[Check out the Code](https://github.com/mario-deluna/php-glfw/blob/master/examples/vg/gradient_radial.php){ .md-button .md-button--primary }
+</div>
+
+Run this example:
+
+```
+php examples/vg/gradient_radial.php
+```
+
+
+

docs/examples/vector-graphics/gradient_wave.md

@@ -0,0 +1,21 @@
+# Gradient Wave
+
+This PHP GLFW Vector Graphics example shows how a gradient paint can be applied over multiple shapes.
+In this case we are drawing a wave of circles with a linear gradient applied to them.
+
+<figure markdown>
+![Gradient Wave Example (PHP-GLFW VG)](./../../docs-assets/php-glfw/examples/vg/gradient_wave.png){ width="600" }
+</figure>
+
+<div style="text-align: center;" markdown>
+[Check out the Code](https://github.com/mario-deluna/php-glfw/blob/master/examples/vg/gradient_wave.php){ .md-button .md-button--primary }
+</div>
+
+Run this example:
+
+```
+php examples/vg/gradient_wave.php
+```
+
+
+

docs/examples/vector-graphics/text_boxes.md

@@ -0,0 +1,20 @@
+# Text Boxes
+
+This interactive example shows how text boxes can used to render multi-line text.
+
+<figure markdown>
+![Text Boxes Example (PHP-GLFW VG)](./../../docs-assets/php-glfw/user_guide/vg/text/text_box.gif){ width="600" }
+</figure>
+
+<div style="text-align: center;" markdown>
+[Check out the Code](https://github.com/mario-deluna/php-glfw/blob/master/examples/vg/text_boxes.php){ .md-button .md-button--primary }
+</div>
+
+Run this example:
+
+```
+php examples/vg/text_boxes.php
+```
+
+
+

docs/examples/vector-graphics/text_color_words.md

@@ -0,0 +1,21 @@
+# Colored Words
+
+This examples demonstrates how to render a sentence with each word having a different color. To 
+achieve this we have to draw each word separately.
+
+<figure markdown>
+![Colored Words Example (PHP-GLFW VG)](./../../docs-assets/php-glfw/user_guide/vg/text/text_x_advnace.png){ width="600" }
+</figure>
+
+<div style="text-align: center;" markdown>
+[Check out the Code](https://github.com/mario-deluna/php-glfw/blob/master/examples/vg/text_color_words.php){ .md-button .md-button--primary }
+</div>
+
+Run this example:
+
+```
+php examples/vg/text_color_words.php
+```
+
+
+

docs/user-guide/vector-graphics/gradients.md

@@ -36,26 +36,75 @@ This paint can then be applied to all kinds of shapes.
 
 ### Rectangles
 
+
+<figure markdown>
+![PHP-GLFW VectorGraphics Gradient on Rectangle](./../../docs-assets/php-glfw/user_guide/vg/gradients/gradient_rect.png){ width="100%" }
+</figure>
+
+
 ```php
 $vg->beginPath();
 $vg->fillPaint($paint);
 $vg->rect(50, 150, 300, 300);
 $vg->fill();
 ```
 
+### Circles
+
+
 <figure markdown>
-![PHP-GLFW VectorGraphics Gradient on Rectangle](./../../docs-assets/php-glfw/user_guide/vg/gradients/gradient_rect.png){ width="100%" }
+![PHP-GLFW VectorGraphics Gradient on Circle](./../../docs-assets/php-glfw/user_guide/vg/gradients/gradient_circle.png){ width="100%" }
 </figure>
 
-### Circles
-
 ```php
 $vg->beginPath();
 $vg->fillPaint($paint);
 $vg->circle(200, 300, 150);
 $vg->fill();
 ```
 
+Rember the Vector Graphics API is a state machine, so you can reuse the paint object for multiple shapes.
+
+
 <figure markdown>
-![PHP-GLFW VectorGraphics Gradient on Circle](./../../docs-assets/php-glfw/user_guide/vg/gradients/gradient_circle.png){ width="100%" }
-</figure>
+![PHP-GLFW VectorGraphics Gradient on Wave](./../../docs-assets/php-glfw/user_guide/vg/gradients/gradient_wave.gif)
+  <figcaption>Run this <code>php examples/vg/gradient_wave.php</code></figcaption>
+</figure>
+
+```php  
+$waveY = ExampleHelper::WIN_HEIGHT / 2;
+$dotSize = 10;
+$dotDistance = 20;
+$waveLength = 0.1;
+
+$vg->fillPaint($paint);
+
+for($x = 0; $x < ExampleHelper::WIN_WIDTH; $x += $dotDistance) {
+    $value = sin($x * $waveLength / 20 + glfwGetTime());
+    $vg->beginPath();
+    $vg->circle($x, $waveY + $value * 100, $dotSize);
+    $vg->fill();
+}
+```
+
+## Radial Gradients
+
+A radial gradient is created by defining a central point and a radius, resulting in a smooth transition of colors that radiates outward in a circular pattern from the center to the outer edge.
+
+<figure markdown>
+![PHP-GLFW VectorGraphics Gradient on Wave](./../../docs-assets/php-glfw/user_guide/vg/gradients/gradient_radial.png)
+  <figcaption>Run this <code>php examples/vg/gradient_radial.php</code></figcaption>
+</figure>
+
+to create a radial paint:
+
+```php
+$centerX = 300;
+$centerY = 300;
+$innerRadius = 0;
+$outerRadius = 150;
+$color1 = new VGColor(0.051, 0.682, 0.914, 1.0);
+$color2 = new VGColor(0.169, 0.961, 0.596, 1.0);
+
+$paint = $vg->radialGradient($centerX, $centerY, $innerRadius, $outerRadius, $color1, $color2);
+```

examples/06_basic_light.php

@@ -99,7 +99,7 @@
 
 // capture keyboard events to toggle rendering modes
 $wireframe = false;
-glfwSetKeyCallback($window, function ($key, $scancode, $action, $mods) use (&$wireframe) {
+glfwSetKeyCallback($window, function ($key, $scancode, $action, $mods) use (&$wireframe, $window) {
     if ($key == GLFW_KEY_ESCAPE && $action == GLFW_PRESS) {
         glfwSetWindowShouldClose($window, true);
     }

examples/vg/gradient_linear.php

@@ -1,4 +1,10 @@
 <?php
+/**
+ * Linear Gradient
+ * This PHP GLFW Vector Graphics example show how to create a linear gradient and apply it to a rectangle.
+ * 
+ * @category   Gradients
+ */
 /**
  * We utilize the example helpers here to focus on what matter in this specifc example.
  */

examples/vg/gradient_radial.php

@@ -0,0 +1,110 @@
+<?php
+/**
+ * Radial Gradient
+ * This example demonstrates how to draw a radial gradient using the PHP GLFW Vector Graphics API.
+ * 
+ * @category   Gradients
+ */
+/**
+ * We utilize the example helpers here to focus on what matter in this specific example.
+ */
+require __DIR__ . '/../99_example_helpers.php';
+
+use GL\Math\GLM;
+use GL\Math\Vec2;
+use GL\VectorGraphics\{VGAlign, VGContext, VGColor, VGImage};
+
+// ensure mbstring extension is loaded, we need it for the text rendering
+if (!extension_loaded('mbstring')) {
+    throw new \Exception('mbstring extension is required for this example');
+}
+
+$window = ExampleHelper::begin();
+
+// initialize a vector graphics context
+$vg = new VGContext(VGContext::ANTIALIAS);
+
+$gradientCenter = new Vec2(300, 300);
+$gradientRadius = 150.0;
+$gradientColor1 = new VGColor(0.051, 0.682, 0.914, 1.0);
+$gradientColor2 = new VGColor(0.169, 0.961, 0.596, 1.0);
+
+$isDraggingCenter = false;
+$currentMousePos = new Vec2(0, 0);
+
+glfwSetMouseButtonCallback($window, function($button, $action, $mods) use($window, &$isDraggingCenter, $gradientCenter, $currentMousePos) {
+    if ($button == GLFW_MOUSE_BUTTON_LEFT && $action == GLFW_PRESS) {
+        if ($currentMousePos->distanceTo($gradientCenter) < 10) {
+            $isDraggingCenter = true;
+        }
+    } else if ($button == GLFW_MOUSE_BUTTON_LEFT && $action == GLFW_RELEASE) {
+        $isDraggingCenter = false;
+    }
+});
+
+glfwSetScrollCallback($window, function($xOffset, $yOffset) use (&$gradientRadius) {
+    // increase or decrease the radius of the gradient
+    $gradientRadius *= 1 + $yOffset * 0.1;
+    $gradientRadius = min(max($gradientRadius, 10), 1000);
+});
+
+// Main Loop
+// ---------------------------------------------------------------------------- 
+while (!glfwWindowShouldClose($window))
+{
+    // clear
+    glClearColor(0, 0, 0, 1);
+    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT | GL_STENCIL_BUFFER_BIT);
+
+    // fetch the content scale of the window
+    $contentScaleX;
+    $contentScaleY;
+    glfwGetWindowContentScale($window, $contentScaleX, $contentScaleY);
+
+    // begin a new frame using the window size as the viewport size
+    $vg->beginFrame(ExampleHelper::WIN_WIDTH, ExampleHelper::WIN_HEIGHT, $contentScaleX);
+
+    $xpos = 0.0;
+    $ypos = 0.0;
+    glfwGetCursorPos($window, $xpos, $ypos);
+    $currentMousePos->x = $xpos;
+    $currentMousePos->y = $ypos;
+
+    if ($isDraggingCenter) {
+        $gradientCenter->x = $currentMousePos->x;
+        $gradientCenter->y = $currentMousePos->y;
+    }
+
+    // create a radial gradient
+    $gradientPaint = $vg->radialGradient(
+        $gradientCenter->x,
+        $gradientCenter->y,
+        0, // inner radius
+        $gradientRadius, // outer radius
+        $gradientColor1,
+        $gradientColor2
+    );
+
+    // fill the screen with the gradient
+    $vg->beginPath();
+    $vg->rect(50, 150, ExampleHelper::WIN_WIDTH - 100, ExampleHelper::WIN_HEIGHT - 300);
+    $vg->fillPaint($gradientPaint);
+    $vg->fill();
+
+    ExampleHelper::drawPoint($vg, $gradientCenter->x, $gradientCenter->y, 'Center('. round($gradientCenter->x) .', '. round($gradientCenter->y) .')');
+
+    ExampleHelper::drawFuncLabels($vg, 50, 50, [
+        "radialGradient({$gradientCenter->x}, {$gradientCenter->y}, 0, {$gradientRadius}, color1, color2)",
+        "rect(50, 150, ". (ExampleHelper::WIN_WIDTH - 100) .", ". (ExampleHelper::WIN_HEIGHT - 300) .")",
+    ]);
+
+    // end the frame will dispatch all the draw commands to the GPU
+    $vg->endFrame();
+
+    // swap the window's framebuffer and
+    // poll queued window events.
+    glfwSwapBuffers($window);
+    glfwPollEvents();
+}
+
+ExampleHelper::stop($window);