-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
110 lines (109 loc) · 56 KB
/
Copy pathindex.html
File metadata and controls
110 lines (109 loc) · 56 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Examples - C++ Mode for Processing</title>
<style>* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #111; background: #fff; }
a { color: #111; text-decoration: none; }
nav { border-bottom: 1px solid #e0e0e0; padding: 0 2rem; display: flex; align-items: center; justify-content: space-between; height: 60px; position: sticky; top: 0; background: #fff; z-index: 100; }
.hamburger { background: none; border: none; cursor: pointer; font-size: 22px; padding: 4px 8px; display: none; }
.layout { display: flex; min-height: calc(100vh - 60px); }
.sidebar-outer { width: 220px; min-width: 220px; border-right: 1px solid #e0e0e0; display: flex; flex-direction: column; position: sticky; top: 60px; height: calc(100vh - 60px); }
#site-sidebar { padding: 1.5rem 1.5rem 1rem; border-bottom: 1px solid #e0e0e0; display: flex; flex-direction: column; }
#site-sidebar a { font-size: 14px; color: #555; padding: 0.4rem 0; display: block; }
#site-sidebar a:hover { color: #111; }
#site-sidebar a.active { color: #111; font-weight: 500; }
.sidebar-examples { flex: 1; overflow-y: auto; }
.section-header { display: flex; justify-content: space-between; align-items: center; padding: 0.85rem 1.5rem; font-size: 13px; font-weight: 600; color: #111; cursor: pointer; border-bottom: 1px solid #e0e0e0; user-select: none; }
.section-header:hover { background: #f8f8f8; }
.arrow { font-size: 11px; color: #aaa; }
.category { margin-bottom: 0.25rem; }
.category-title { font-size: 11px; font-weight: 600; color: #aaa; text-transform: uppercase; letter-spacing: 0.08em; padding: 0.75rem 1.5rem 0.25rem; }
.category a { display: block; font-size: 13px; color: #555; padding: 0.3rem 1.5rem; }
.category a:hover { color: #111; background: #f8f8f8; }
.category a.active { color: #111; font-weight: 500; background: #f4f4f4; }
.content { flex: 1; padding: 3rem 4rem; max-width: 900px; }
.content h1 { font-size: 1.8rem; font-weight: 600; margin-bottom: 0.75rem; color: #e8b400; }
.preview-wrap { border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; margin-bottom: 2rem; display: block; max-width: 100%; width: fit-content; }
.preview-wrap iframe { display: block; border: none; max-width: 100%; }
.code-block { background: #f8f8f8; border-radius: 8px; overflow: hidden; }
.code-header { padding: 0.75rem 1.25rem; border-bottom: 1px solid #e0e0e0; font-size: 12px; color: #888; font-family: monospace; display: flex; align-items: center; justify-content: space-between; }
.copy-btn { font-size: 12px; color: #555; background: #fff; border: 1px solid #ddd; border-radius: 4px; padding: 3px 10px; cursor: pointer; font-family: inherit; }
.copy-btn:hover { background: #f0f0f0; }
.copy-btn.copied { color: #090; border-color: #090; }
pre { padding: 1.5rem; font-family: "SF Mono","Fira Code",monospace; font-size: 13px; line-height: 1.7; overflow-x: auto; white-space: pre; }
.welcome h1 { font-size: 1.8rem; font-weight: 600; margin-bottom: 1rem; }
.welcome p { color: #555; line-height: 1.8; max-width: 500px; }
footer { border-top: 1px solid #e0e0e0; padding: 2rem; text-align: center; font-size: 13px; color: #888; }
.footer-contact { margin-top: 0.4rem; font-size: 12px; }
.footer-contact a { color: #aaa; border-bottom: 1px solid transparent; }
.footer-contact a:hover { color: #111; border-bottom-color: #111; }
.footer-sep { color: #ccc; margin: 0 0.5rem; }
@media (max-width: 768px) {
.hamburger { display: block; }
.sidebar-outer { position: fixed; top: 60px; left: -240px; width: 240px; height: calc(100vh - 60px); background: #fff; z-index: 200; transition: left 0.25s ease; box-shadow: 2px 0 12px rgba(0,0,0,0.08); }
.sidebar-outer.open { left: 0; }
.content { padding: 2rem 1.25rem; }
.preview-wrap { max-width: 100%; }
pre { font-size: 12px; }
}
.gallery-intro { margin-bottom: 2.5rem; }
.gallery-intro h1 { font-size: 1.8rem; font-weight: 600; margin-bottom: 0.5rem; color: #e8b400; }
.gallery-intro p { color: #555; }
.gallery-section-group { margin-bottom: 2rem; }
.gallery-section-title { font-size: 1.4rem; font-weight: 700; margin-bottom: 1.5rem; padding-bottom: 0.75rem; border-bottom: 2px solid #111; color: #e8b400; }
.gallery-section { margin-bottom: 3rem; }
.gallery-section h2 { font-size: 1.1rem; font-weight: 600; margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid #e0e0e0; color: #b8860b; }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1.25rem; }
.gallery-card { display: block; }
.gallery-thumb { width: 100%; background: #111; border-radius: 6px; overflow: hidden; border: 1px solid #e0e0e0; line-height: 0; }
.gallery-thumb img { width: 100%; height: auto; display: block; }
.gallery-thumb-missing { width: 100%; aspect-ratio: 16/9; background: #1a1a1a; }
.gallery-card-title { font-size: 13px; color: #555; margin-top: 0.5rem; text-align: center; }
.gallery-card:hover .gallery-thumb { border-color: #aaa; }
.gallery-card:hover .gallery-card-title { color: #111; }
</style>
</head>
<body>
<nav id="site-nav">
<button class="hamburger" onclick="document.querySelector('.sidebar-outer').classList.toggle('open')">☰</button>
</nav>
<div class="layout">
<div class="sidebar-outer">
<div id="site-sidebar">
<a href="../libraries">Libraries</a>
<a href="../reference">Reference</a>
<a href="../examples" class="active">Examples</a>
<a href="../about">About</a>
</div>
<div class="sidebar-examples"><div class="section-header" onclick="toggleSection('basics')"><span>Basics</span><span class="arrow" id="basics-arrow">▾</span></div><div id="basics-section" style="display:block"><div class="category"><div class="category-title">Arrays</div><a href="array.html" >Array</a><a href="array-2d.html" >Array 2D</a><a href="array-objects.html" >Array Objects</a></div><div class="category"><div class="category-title">Camera</div><a href="move-eye.html" >Move Eye</a><a href="perspective.html" >Perspective</a><a href="perspective-vs-ortho.html" >Perspective vs Ortho</a></div><div class="category"><div class="category-title">Color</div><a href="brightness.html" >Brightness</a><a href="color-variables.html" >Color Variables</a><a href="hue.html" >Hue</a><a href="radial-gradient.html" >Radial Gradient</a><a href="relativity.html" >Relativity</a><a href="saturation.html" >Saturation</a><a href="simple-linear-gradient.html" >Simple Linear Gradient</a></div><div class="category"><div class="category-title">Control</div><a href="conditionals-1.html" >Conditionals 1</a><a href="conditionals-2.html" >Conditionals 2</a><a href="embedding-iteration.html" >Embedding Iteration</a><a href="iteration.html" >Iteration</a><a href="logical-operators.html" >Logical Operators</a></div><div class="category"><div class="category-title">Data</div><a href="characters-strings.html" >Characters Strings</a><a href="datatype-conversion.html" >Datatype Conversion</a><a href="integers-floats.html" >Integers Floats</a><a href="true-false.html" >True False</a><a href="variable-scope.html" >Variable Scope</a><a href="variables.html" >Variables</a></div><div class="category"><div class="category-title">Forms</div><a href="bezier.html" >Bezier</a><a href="pie-chart.html" >Pie Chart</a><a href="points-and-lines.html" >Points and Lines</a><a href="primitives-3d.html" >Primitives 3D</a><a href="regular-polygon.html" >Regular Polygon</a><a href="shape-primitives.html" >Shape Primitives</a><a href="star.html" >Star</a><a href="triangle-strip.html" >Triangle Strip</a></div><div class="category"><div class="category-title">Image</div><a href="alpha-mask.html" >Alpha Mask</a><a href="background-image.html" >Background Image</a><a href="create-image.html" >Create Image</a><a href="load-and-display-image.html" >Load and Display Image</a><a href="pointillism.html" >Pointillism</a><a href="request-image.html" >Request Image</a><a href="transparency.html" >Transparency</a></div><div class="category"><div class="category-title">Input</div><a href="clock.html" >Clock</a><a href="constrain.html" >Constrain</a><a href="easing.html" >Easing</a><a href="keyboard.html" >Keyboard</a><a href="keyboard-functions.html" >Keyboard Functions</a><a href="milliseconds.html" >Milliseconds</a><a href="mouse-1d.html" >Mouse 1D</a><a href="mouse-2d.html" >Mouse 2D</a><a href="mouse-functions.html" >Mouse Functions</a><a href="mouse-press.html" >Mouse Press</a><a href="mouse-signals.html" >Mouse Signals</a><a href="storing-input.html" >Storing Input</a></div><div class="category"><div class="category-title">Lights</div><a href="directional.html" >Directional</a><a href="mixture.html" >Mixture</a><a href="mixture-grid.html" >Mixture Grid</a><a href="on-off.html" >On Off</a><a href="reflection.html" >Reflection</a><a href="spot.html" >Spot</a></div><div class="category"><div class="category-title">Math</div><a href="additive-wave.html" >Additive Wave</a><a href="arctangent.html" >Arctangent</a><a href="distance-1d.html" >Distance 1D</a><a href="distance-2d.html" >Distance 2D</a><a href="double-random.html" >Double Random</a><a href="graphing-2d-equations.html" >Graphing 2D Equations</a><a href="increment-decrement.html" >Increment Decrement</a><a href="linear-interpolation.html" >Linear Interpolation</a><a href="noise-1d.html" >Noise 1D</a><a href="noise-2d.html" >Noise 2D</a><a href="noise-3d.html" >Noise 3D</a><a href="noise-wave.html" >Noise Wave</a><a href="operator-precedence.html" >Operator Precedence</a><a href="polar-to-cartesian.html" >Polar to Cartesian</a><a href="random.html" >Random</a><a href="random-gaussian.html" >Random Gaussian</a><a href="sine.html" >Sine</a><a href="sine-cosine.html" >Sine Cosine</a><a href="sine-wave.html" >Sine Wave</a></div><div class="category"><div class="category-title">Objects</div><a href="composite-objects.html" >Composite Objects</a><a href="inheritance.html" >Inheritance</a><a href="multiple-constructors.html" >Multiple Constructors</a><a href="objects.html" >Objects</a></div><div class="category"><div class="category-title">Shape</div><a href="disable-style.html" >Disable Style</a><a href="get-child.html" >Get Child</a><a href="load-and-display-a-shape-illustration.html" >Load and Display a Shape Illustration</a><a href="load-and-display-an-obj-shape.html" >Load and Display an OBJ shape</a><a href="scale-shape-illustration.html" >Scale Shape Illustration</a><a href="shape-vertices.html" >Shape Vertices</a></div><div class="category"><div class="category-title">Structure</div><a href="coordinates.html" >Coordinates</a><a href="create-graphics.html" >Create Graphics</a><a href="functions.html" >Functions</a><a href="loop.html" >Loop</a><a href="no-loop.html" >No Loop</a><a href="recursion.html" >Recursion</a><a href="redraw.html" >Redraw</a><a href="setup-and-draw.html" >Setup and Draw</a><a href="statements-and-comments.html" >Statements and Comments</a><a href="width-and-height.html" >Width and Height</a></div><div class="category"><div class="category-title">Transform</div><a href="arm.html" >Arm</a><a href="rotate.html" >Rotate</a><a href="rotate-1.html" >Rotate 1</a><a href="rotate-push-pop.html" >Rotate Push Pop</a><a href="scale.html" >Scale</a><a href="translate.html" >Translate</a></div><div class="category"><div class="category-title">Typography</div><a href="letters.html" >Letters</a><a href="text-rotation.html" >Text Rotation</a><a href="words.html" >Words</a></div><div class="category"><div class="category-title">Web</div><a href="loading-images.html" >Loading Images</a><a href="loading-urls.html" >Loading URLs</a></div></div><div class="section-header" onclick="toggleSection('topics')"><span>Topics</span><span class="arrow" id="topics-arrow">▾</span></div><div id="topics-section" style="display:block"><div class="category"><div class="category-title">Advanced Data</div><a href="arraylist-of-objects.html" >ArrayList of objects</a><a href="intlist-lottery-example.html" >IntList Lottery example</a><a href="loading-json-data.html" >Loading JSON Data</a><a href="loading-tabular-data.html" >Loading Tabular Data</a></div><div class="category"><div class="category-title">Animation</div><a href="animated-sprite.html" >Animated Sprite</a><a href="sequential.html" >Sequential</a></div><div class="category"><div class="category-title">Cellular Automata</div><a href="game-of-life.html" >Game Of Life</a><a href="wolfram.html" >Wolfram</a></div><div class="category"><div class="category-title">Drawing</div><a href="continuous-lines.html" >Continuous Lines</a><a href="pattern.html" >Pattern</a><a href="pulses.html" >Pulses</a></div><div class="category"><div class="category-title">File Io</div><a href="load-file1.html" >Load File1</a><a href="load-file2.html" >Load File2</a><a href="save-one-image.html" >Save One Image</a></div><div class="category"><div class="category-title">Fractals And L-Systems</div><a href="koch.html" >Koch</a><a href="mandelbrot.html" >Mandelbrot</a><a href="penrose-snowflake.html" >Penrose Snowflake</a><a href="penrose-tile.html" >Penrose Tile</a><a href="pentigree.html" >Pentigree</a><a href="tree.html" >Tree</a></div><div class="category"><div class="category-title">Gui</div><a href="button.html" >Button</a><a href="handles.html" >Handles</a><a href="rollover.html" >Rollover</a><a href="scrollbar.html" >Scrollbar</a></div><div class="category"><div class="category-title">Image Processing</div><a href="blur.html" >Blur</a><a href="brightness-pixels.html" >Brightness Pixels</a><a href="convolution.html" >Convolution</a><a href="edge-detection.html" >Edge Detection</a><a href="histogram.html" >Histogram</a><a href="pixel-array.html" >Pixel Array</a></div><div class="category"><div class="category-title">Interaction</div><a href="follow1.html" >Follow1</a><a href="follow2.html" >Follow2</a><a href="follow3.html" >Follow3</a><a href="reach1.html" >Reach1</a><a href="reach2.html" >Reach2</a><a href="reach3.html" >Reach3</a><a href="tickle.html" >Tickle</a></div><div class="category"><div class="category-title">Motion</div><a href="bounce.html" >Bounce</a><a href="bouncy-bubbles.html" >Bouncy Bubbles</a><a href="brownian.html" >Brownian</a><a href="circle-collision.html" >Circle Collision</a><a href="linear.html" >Linear</a><a href="morph.html" >Morph</a><a href="moving-on-curves.html" >Moving On Curves</a><a href="reflection1.html" >Reflection1</a><a href="reflection2.html" >Reflection2</a></div><div class="category"><div class="category-title">Simulate</div><a href="flocking.html" >Flocking</a><a href="forces-with-vectors.html" >Forces With Vectors</a><a href="multiple-particle-systems.html" >Multiple Particle Systems</a><a href="simple-particle-system.html" >Simple Particle System</a><a href="smoke-particle-system.html" >Smoke Particle System</a></div><div class="category"><div class="category-title">Vectors</div><a href="acceleration-with-vectors.html" >Acceleration With Vectors</a><a href="bouncing-ball.html" >Bouncing Ball</a><a href="vector-math.html" >Vector Math</a></div></div></div>
</div>
<div class="content"><div class="gallery-intro"><h1>Examples</h1></div><div class="gallery-section-group"><h1 class="gallery-section-title">Basics</h1><div class="gallery-section"><h2>Arrays</h2><div class="gallery-grid"><a class="gallery-card" href="array.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Basics/arrays/array.png" alt="Array" loading="lazy"></div><div class="gallery-card-title">Array</div></a><a class="gallery-card" href="array-2d.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Basics/arrays/array-2d.png" alt="Array 2D" loading="lazy"></div><div class="gallery-card-title">Array 2D</div></a><a class="gallery-card" href="array-objects.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Basics/arrays/array-objects.png" alt="Array Objects" loading="lazy"></div><div class="gallery-card-title">Array Objects</div></a></div></div><div class="gallery-section"><h2>Camera</h2><div class="gallery-grid"><a class="gallery-card" href="move-eye.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Basics/camera/move-eye.png" alt="Move Eye" loading="lazy"></div><div class="gallery-card-title">Move Eye</div></a><a class="gallery-card" href="perspective.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Basics/camera/perspective.png" alt="Perspective" loading="lazy"></div><div class="gallery-card-title">Perspective</div></a><a class="gallery-card" href="perspective-vs-ortho.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Basics/camera/perspective-vs-ortho.png" alt="Perspective vs Ortho" loading="lazy"></div><div class="gallery-card-title">Perspective vs Ortho</div></a></div></div><div class="gallery-section"><h2>Color</h2><div class="gallery-grid"><a class="gallery-card" href="brightness.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Basics/color/brightness.png" alt="Brightness" loading="lazy"></div><div class="gallery-card-title">Brightness</div></a><a class="gallery-card" href="color-variables.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Basics/color/color-variables.png" alt="Color Variables" loading="lazy"></div><div class="gallery-card-title">Color Variables</div></a><a class="gallery-card" href="hue.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Basics/color/hue.png" alt="Hue" loading="lazy"></div><div class="gallery-card-title">Hue</div></a><a class="gallery-card" href="radial-gradient.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Basics/color/radial-gradient.png" alt="Radial Gradient" loading="lazy"></div><div class="gallery-card-title">Radial Gradient</div></a><a class="gallery-card" href="relativity.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Basics/color/relativity.png" alt="Relativity" loading="lazy"></div><div class="gallery-card-title">Relativity</div></a><a class="gallery-card" href="saturation.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Basics/color/saturation.png" alt="Saturation" loading="lazy"></div><div class="gallery-card-title">Saturation</div></a><a class="gallery-card" href="simple-linear-gradient.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Basics/color/simple-linear-gradient.png" alt="Simple Linear Gradient" loading="lazy"></div><div class="gallery-card-title">Simple Linear Gradient</div></a></div></div><div class="gallery-section"><h2>Control</h2><div class="gallery-grid"><a class="gallery-card" href="conditionals-1.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Basics/control/conditionals-1.png" alt="Conditionals 1" loading="lazy"></div><div class="gallery-card-title">Conditionals 1</div></a><a class="gallery-card" href="conditionals-2.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Basics/control/conditionals-2.png" alt="Conditionals 2" loading="lazy"></div><div class="gallery-card-title">Conditionals 2</div></a><a class="gallery-card" href="embedding-iteration.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Basics/control/embedding-iteration.png" alt="Embedding Iteration" loading="lazy"></div><div class="gallery-card-title">Embedding Iteration</div></a><a class="gallery-card" href="iteration.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Basics/control/iteration.png" alt="Iteration" loading="lazy"></div><div class="gallery-card-title">Iteration</div></a><a class="gallery-card" href="logical-operators.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Basics/control/logical-operators.png" alt="Logical Operators" loading="lazy"></div><div class="gallery-card-title">Logical Operators</div></a></div></div><div class="gallery-section"><h2>Data</h2><div class="gallery-grid"><a class="gallery-card" href="characters-strings.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Basics/data/characters-strings.png" alt="Characters Strings" loading="lazy"></div><div class="gallery-card-title">Characters Strings</div></a><a class="gallery-card" href="datatype-conversion.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Basics/data/datatype-conversion.png" alt="Datatype Conversion" loading="lazy"></div><div class="gallery-card-title">Datatype Conversion</div></a><a class="gallery-card" href="integers-floats.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Basics/data/integers-floats.png" alt="Integers Floats" loading="lazy"></div><div class="gallery-card-title">Integers Floats</div></a><a class="gallery-card" href="true-false.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Basics/data/true-false.png" alt="True False" loading="lazy"></div><div class="gallery-card-title">True False</div></a><a class="gallery-card" href="variable-scope.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Basics/data/variable-scope.png" alt="Variable Scope" loading="lazy"></div><div class="gallery-card-title">Variable Scope</div></a><a class="gallery-card" href="variables.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Basics/data/variables.png" alt="Variables" loading="lazy"></div><div class="gallery-card-title">Variables</div></a></div></div><div class="gallery-section"><h2>Forms</h2><div class="gallery-grid"><a class="gallery-card" href="bezier.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Basics/forms/bezier.png" alt="Bezier" loading="lazy"></div><div class="gallery-card-title">Bezier</div></a><a class="gallery-card" href="pie-chart.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Basics/forms/pie-chart.png" alt="Pie Chart" loading="lazy"></div><div class="gallery-card-title">Pie Chart</div></a><a class="gallery-card" href="points-and-lines.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Basics/forms/points-and-lines.png" alt="Points and Lines" loading="lazy"></div><div class="gallery-card-title">Points and Lines</div></a><a class="gallery-card" href="primitives-3d.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Basics/forms/primitives-3d.png" alt="Primitives 3D" loading="lazy"></div><div class="gallery-card-title">Primitives 3D</div></a><a class="gallery-card" href="regular-polygon.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Basics/forms/regular-polygon.png" alt="Regular Polygon" loading="lazy"></div><div class="gallery-card-title">Regular Polygon</div></a><a class="gallery-card" href="shape-primitives.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Basics/forms/shape-primitives.png" alt="Shape Primitives" loading="lazy"></div><div class="gallery-card-title">Shape Primitives</div></a><a class="gallery-card" href="star.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Basics/forms/star.png" alt="Star" loading="lazy"></div><div class="gallery-card-title">Star</div></a><a class="gallery-card" href="triangle-strip.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Basics/forms/triangle-strip.png" alt="Triangle Strip" loading="lazy"></div><div class="gallery-card-title">Triangle Strip</div></a></div></div><div class="gallery-section"><h2>Image</h2><div class="gallery-grid"><a class="gallery-card" href="alpha-mask.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Basics/image/alpha-mask.png" alt="Alpha Mask" loading="lazy"></div><div class="gallery-card-title">Alpha Mask</div></a><a class="gallery-card" href="background-image.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Basics/image/background-image.png" alt="Background Image" loading="lazy"></div><div class="gallery-card-title">Background Image</div></a><a class="gallery-card" href="create-image.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Basics/image/create-image.png" alt="Create Image" loading="lazy"></div><div class="gallery-card-title">Create Image</div></a><a class="gallery-card" href="load-and-display-image.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Basics/image/load-and-display-image.png" alt="Load and Display Image" loading="lazy"></div><div class="gallery-card-title">Load and Display Image</div></a><a class="gallery-card" href="pointillism.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Basics/image/pointillism.png" alt="Pointillism" loading="lazy"></div><div class="gallery-card-title">Pointillism</div></a><a class="gallery-card" href="request-image.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Basics/image/request-image.png" alt="Request Image" loading="lazy"></div><div class="gallery-card-title">Request Image</div></a><a class="gallery-card" href="transparency.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Basics/image/transparency.png" alt="Transparency" loading="lazy"></div><div class="gallery-card-title">Transparency</div></a></div></div><div class="gallery-section"><h2>Input</h2><div class="gallery-grid"><a class="gallery-card" href="clock.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Basics/input/clock.png" alt="Clock" loading="lazy"></div><div class="gallery-card-title">Clock</div></a><a class="gallery-card" href="constrain.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Basics/input/constrain.png" alt="Constrain" loading="lazy"></div><div class="gallery-card-title">Constrain</div></a><a class="gallery-card" href="easing.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Basics/input/easing.png" alt="Easing" loading="lazy"></div><div class="gallery-card-title">Easing</div></a><a class="gallery-card" href="keyboard.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Basics/input/keyboard.png" alt="Keyboard" loading="lazy"></div><div class="gallery-card-title">Keyboard</div></a><a class="gallery-card" href="keyboard-functions.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Basics/input/keyboard-functions.png" alt="Keyboard Functions" loading="lazy"></div><div class="gallery-card-title">Keyboard Functions</div></a><a class="gallery-card" href="milliseconds.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Basics/input/milliseconds.png" alt="Milliseconds" loading="lazy"></div><div class="gallery-card-title">Milliseconds</div></a><a class="gallery-card" href="mouse-1d.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Basics/input/mouse-1d.png" alt="Mouse 1D" loading="lazy"></div><div class="gallery-card-title">Mouse 1D</div></a><a class="gallery-card" href="mouse-2d.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Basics/input/mouse-2d.png" alt="Mouse 2D" loading="lazy"></div><div class="gallery-card-title">Mouse 2D</div></a><a class="gallery-card" href="mouse-functions.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Basics/input/mouse-functions.png" alt="Mouse Functions" loading="lazy"></div><div class="gallery-card-title">Mouse Functions</div></a><a class="gallery-card" href="mouse-press.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Basics/input/mouse-press.png" alt="Mouse Press" loading="lazy"></div><div class="gallery-card-title">Mouse Press</div></a><a class="gallery-card" href="mouse-signals.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Basics/input/mouse-signals.png" alt="Mouse Signals" loading="lazy"></div><div class="gallery-card-title">Mouse Signals</div></a><a class="gallery-card" href="storing-input.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Basics/input/storing-input.png" alt="Storing Input" loading="lazy"></div><div class="gallery-card-title">Storing Input</div></a></div></div><div class="gallery-section"><h2>Lights</h2><div class="gallery-grid"><a class="gallery-card" href="directional.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Basics/lights/directional.png" alt="Directional" loading="lazy"></div><div class="gallery-card-title">Directional</div></a><a class="gallery-card" href="mixture.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Basics/lights/mixture.png" alt="Mixture" loading="lazy"></div><div class="gallery-card-title">Mixture</div></a><a class="gallery-card" href="mixture-grid.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Basics/lights/mixture-grid.png" alt="Mixture Grid" loading="lazy"></div><div class="gallery-card-title">Mixture Grid</div></a><a class="gallery-card" href="on-off.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Basics/lights/on-off.png" alt="On Off" loading="lazy"></div><div class="gallery-card-title">On Off</div></a><a class="gallery-card" href="reflection.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Basics/lights/reflection.png" alt="Reflection" loading="lazy"></div><div class="gallery-card-title">Reflection</div></a><a class="gallery-card" href="spot.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Basics/lights/spot.png" alt="Spot" loading="lazy"></div><div class="gallery-card-title">Spot</div></a></div></div><div class="gallery-section"><h2>Math</h2><div class="gallery-grid"><a class="gallery-card" href="additive-wave.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Basics/math/additive-wave.png" alt="Additive Wave" loading="lazy"></div><div class="gallery-card-title">Additive Wave</div></a><a class="gallery-card" href="arctangent.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Basics/math/arctangent.png" alt="Arctangent" loading="lazy"></div><div class="gallery-card-title">Arctangent</div></a><a class="gallery-card" href="distance-1d.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Basics/math/distance-1d.png" alt="Distance 1D" loading="lazy"></div><div class="gallery-card-title">Distance 1D</div></a><a class="gallery-card" href="distance-2d.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Basics/math/distance-2d.png" alt="Distance 2D" loading="lazy"></div><div class="gallery-card-title">Distance 2D</div></a><a class="gallery-card" href="double-random.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Basics/math/double-random.png" alt="Double Random" loading="lazy"></div><div class="gallery-card-title">Double Random</div></a><a class="gallery-card" href="graphing-2d-equations.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Basics/math/graphing-2d-equations.png" alt="Graphing 2D Equations" loading="lazy"></div><div class="gallery-card-title">Graphing 2D Equations</div></a><a class="gallery-card" href="increment-decrement.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Basics/math/increment-decrement.png" alt="Increment Decrement" loading="lazy"></div><div class="gallery-card-title">Increment Decrement</div></a><a class="gallery-card" href="linear-interpolation.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Basics/math/linear-interpolation.png" alt="Linear Interpolation" loading="lazy"></div><div class="gallery-card-title">Linear Interpolation</div></a><a class="gallery-card" href="noise-1d.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Basics/math/noise-1d.png" alt="Noise 1D" loading="lazy"></div><div class="gallery-card-title">Noise 1D</div></a><a class="gallery-card" href="noise-2d.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Basics/math/noise-2d.png" alt="Noise 2D" loading="lazy"></div><div class="gallery-card-title">Noise 2D</div></a><a class="gallery-card" href="noise-3d.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Basics/math/noise-3d.png" alt="Noise 3D" loading="lazy"></div><div class="gallery-card-title">Noise 3D</div></a><a class="gallery-card" href="noise-wave.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Basics/math/noise-wave.png" alt="Noise Wave" loading="lazy"></div><div class="gallery-card-title">Noise Wave</div></a><a class="gallery-card" href="operator-precedence.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Basics/math/operator-precedence.png" alt="Operator Precedence" loading="lazy"></div><div class="gallery-card-title">Operator Precedence</div></a><a class="gallery-card" href="polar-to-cartesian.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Basics/math/polar-to-cartesian.png" alt="Polar to Cartesian" loading="lazy"></div><div class="gallery-card-title">Polar to Cartesian</div></a><a class="gallery-card" href="random.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Basics/math/random.png" alt="Random" loading="lazy"></div><div class="gallery-card-title">Random</div></a><a class="gallery-card" href="random-gaussian.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Basics/math/random-gaussian.png" alt="Random Gaussian" loading="lazy"></div><div class="gallery-card-title">Random Gaussian</div></a><a class="gallery-card" href="sine.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Basics/math/sine.png" alt="Sine" loading="lazy"></div><div class="gallery-card-title">Sine</div></a><a class="gallery-card" href="sine-cosine.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Basics/math/sine-cosine.png" alt="Sine Cosine" loading="lazy"></div><div class="gallery-card-title">Sine Cosine</div></a><a class="gallery-card" href="sine-wave.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Basics/math/sine-wave.png" alt="Sine Wave" loading="lazy"></div><div class="gallery-card-title">Sine Wave</div></a></div></div><div class="gallery-section"><h2>Objects</h2><div class="gallery-grid"><a class="gallery-card" href="composite-objects.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Basics/objects/composite-objects.png" alt="Composite Objects" loading="lazy"></div><div class="gallery-card-title">Composite Objects</div></a><a class="gallery-card" href="inheritance.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Basics/objects/inheritance.png" alt="Inheritance" loading="lazy"></div><div class="gallery-card-title">Inheritance</div></a><a class="gallery-card" href="multiple-constructors.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Basics/objects/multiple-constructors.png" alt="Multiple Constructors" loading="lazy"></div><div class="gallery-card-title">Multiple Constructors</div></a><a class="gallery-card" href="objects.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Basics/objects/objects.png" alt="Objects" loading="lazy"></div><div class="gallery-card-title">Objects</div></a></div></div><div class="gallery-section"><h2>Shape</h2><div class="gallery-grid"><a class="gallery-card" href="disable-style.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Basics/shape/disable-style.png" alt="Disable Style" loading="lazy"></div><div class="gallery-card-title">Disable Style</div></a><a class="gallery-card" href="get-child.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Basics/shape/get-child.png" alt="Get Child" loading="lazy"></div><div class="gallery-card-title">Get Child</div></a><a class="gallery-card" href="load-and-display-a-shape-illustration.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Basics/shape/load-and-display-a-shape-illustration.png" alt="Load and Display a Shape Illustration" loading="lazy"></div><div class="gallery-card-title">Load and Display a Shape Illustration</div></a><a class="gallery-card" href="load-and-display-an-obj-shape.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Basics/shape/load-and-display-an-obj-shape.png" alt="Load and Display an OBJ shape" loading="lazy"></div><div class="gallery-card-title">Load and Display an OBJ shape</div></a><a class="gallery-card" href="scale-shape-illustration.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Basics/shape/scale-shape-illustration.png" alt="Scale Shape Illustration" loading="lazy"></div><div class="gallery-card-title">Scale Shape Illustration</div></a><a class="gallery-card" href="shape-vertices.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Basics/shape/shape-vertices.png" alt="Shape Vertices" loading="lazy"></div><div class="gallery-card-title">Shape Vertices</div></a></div></div><div class="gallery-section"><h2>Structure</h2><div class="gallery-grid"><a class="gallery-card" href="coordinates.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Basics/structure/coordinates.png" alt="Coordinates" loading="lazy"></div><div class="gallery-card-title">Coordinates</div></a><a class="gallery-card" href="create-graphics.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Basics/structure/create-graphics.png" alt="Create Graphics" loading="lazy"></div><div class="gallery-card-title">Create Graphics</div></a><a class="gallery-card" href="functions.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Basics/structure/functions.png" alt="Functions" loading="lazy"></div><div class="gallery-card-title">Functions</div></a><a class="gallery-card" href="loop.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Basics/structure/loop.png" alt="Loop" loading="lazy"></div><div class="gallery-card-title">Loop</div></a><a class="gallery-card" href="no-loop.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Basics/structure/no-loop.png" alt="No Loop" loading="lazy"></div><div class="gallery-card-title">No Loop</div></a><a class="gallery-card" href="recursion.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Basics/structure/recursion.png" alt="Recursion" loading="lazy"></div><div class="gallery-card-title">Recursion</div></a><a class="gallery-card" href="redraw.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Basics/structure/redraw.png" alt="Redraw" loading="lazy"></div><div class="gallery-card-title">Redraw</div></a><a class="gallery-card" href="setup-and-draw.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Basics/structure/setup-and-draw.png" alt="Setup and Draw" loading="lazy"></div><div class="gallery-card-title">Setup and Draw</div></a><a class="gallery-card" href="statements-and-comments.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Basics/structure/statements-and-comments.png" alt="Statements and Comments" loading="lazy"></div><div class="gallery-card-title">Statements and Comments</div></a><a class="gallery-card" href="width-and-height.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Basics/structure/width-and-height.png" alt="Width and Height" loading="lazy"></div><div class="gallery-card-title">Width and Height</div></a></div></div><div class="gallery-section"><h2>Transform</h2><div class="gallery-grid"><a class="gallery-card" href="arm.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Basics/transform/arm.png" alt="Arm" loading="lazy"></div><div class="gallery-card-title">Arm</div></a><a class="gallery-card" href="rotate.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Basics/transform/rotate.png" alt="Rotate" loading="lazy"></div><div class="gallery-card-title">Rotate</div></a><a class="gallery-card" href="rotate-1.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Basics/transform/rotate-1.png" alt="Rotate 1" loading="lazy"></div><div class="gallery-card-title">Rotate 1</div></a><a class="gallery-card" href="rotate-push-pop.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Basics/transform/rotate-push-pop.png" alt="Rotate Push Pop" loading="lazy"></div><div class="gallery-card-title">Rotate Push Pop</div></a><a class="gallery-card" href="scale.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Basics/transform/scale.png" alt="Scale" loading="lazy"></div><div class="gallery-card-title">Scale</div></a><a class="gallery-card" href="translate.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Basics/transform/translate.png" alt="Translate" loading="lazy"></div><div class="gallery-card-title">Translate</div></a></div></div><div class="gallery-section"><h2>Typography</h2><div class="gallery-grid"><a class="gallery-card" href="letters.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Basics/typography/letters.png" alt="Letters" loading="lazy"></div><div class="gallery-card-title">Letters</div></a><a class="gallery-card" href="text-rotation.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Basics/typography/text-rotation.png" alt="Text Rotation" loading="lazy"></div><div class="gallery-card-title">Text Rotation</div></a><a class="gallery-card" href="words.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Basics/typography/words.png" alt="Words" loading="lazy"></div><div class="gallery-card-title">Words</div></a></div></div><div class="gallery-section"><h2>Web</h2><div class="gallery-grid"><a class="gallery-card" href="loading-images.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Basics/web/loading-images.png" alt="Loading Images" loading="lazy"></div><div class="gallery-card-title">Loading Images</div></a><a class="gallery-card" href="loading-urls.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Basics/web/loading-urls.png" alt="Loading URLs" loading="lazy"></div><div class="gallery-card-title">Loading URLs</div></a></div></div></div><div class="gallery-section-group"><h1 class="gallery-section-title">Topics</h1><div class="gallery-section"><h2>Advanced Data</h2><div class="gallery-grid"><a class="gallery-card" href="arraylist-of-objects.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Topics/advanced_data/arraylist-of-objects.png" alt="ArrayList of objects" loading="lazy"></div><div class="gallery-card-title">ArrayList of objects</div></a><a class="gallery-card" href="intlist-lottery-example.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Topics/advanced_data/intlist-lottery-example.png" alt="IntList Lottery example" loading="lazy"></div><div class="gallery-card-title">IntList Lottery example</div></a><a class="gallery-card" href="loading-json-data.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Topics/advanced_data/loading-json-data.svg" alt="Loading JSON Data" loading="lazy"></div><div class="gallery-card-title">Loading JSON Data</div></a><a class="gallery-card" href="loading-tabular-data.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Topics/advanced_data/loading-tabular-data.svg" alt="Loading Tabular Data" loading="lazy"></div><div class="gallery-card-title">Loading Tabular Data</div></a></div></div><div class="gallery-section"><h2>Animation</h2><div class="gallery-grid"><a class="gallery-card" href="animated-sprite.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Topics/animation/animated-sprite.png" alt="Animated Sprite" loading="lazy"></div><div class="gallery-card-title">Animated Sprite</div></a><a class="gallery-card" href="sequential.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Topics/animation/sequential.png" alt="Sequential" loading="lazy"></div><div class="gallery-card-title">Sequential</div></a></div></div><div class="gallery-section"><h2>Cellular Automata</h2><div class="gallery-grid"><a class="gallery-card" href="game-of-life.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Topics/cellular_automata/game-of-life.png" alt="Game Of Life" loading="lazy"></div><div class="gallery-card-title">Game Of Life</div></a><a class="gallery-card" href="wolfram.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Topics/cellular_automata/wolfram.png" alt="Wolfram" loading="lazy"></div><div class="gallery-card-title">Wolfram</div></a></div></div><div class="gallery-section"><h2>Drawing</h2><div class="gallery-grid"><a class="gallery-card" href="continuous-lines.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Topics/drawing/continuous-lines.png" alt="Continuous Lines" loading="lazy"></div><div class="gallery-card-title">Continuous Lines</div></a><a class="gallery-card" href="pattern.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Topics/drawing/pattern.png" alt="Pattern" loading="lazy"></div><div class="gallery-card-title">Pattern</div></a><a class="gallery-card" href="pulses.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Topics/drawing/pulses.png" alt="Pulses" loading="lazy"></div><div class="gallery-card-title">Pulses</div></a></div></div><div class="gallery-section"><h2>File Io</h2><div class="gallery-grid"><a class="gallery-card" href="load-file1.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Topics/file_io/load-file1.svg" alt="Load File1" loading="lazy"></div><div class="gallery-card-title">Load File1</div></a><a class="gallery-card" href="load-file2.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Topics/file_io/load-file2.svg" alt="Load File2" loading="lazy"></div><div class="gallery-card-title">Load File2</div></a><a class="gallery-card" href="save-one-image.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Topics/file_io/save-one-image.png" alt="Save One Image" loading="lazy"></div><div class="gallery-card-title">Save One Image</div></a></div></div><div class="gallery-section"><h2>Fractals And L-Systems</h2><div class="gallery-grid"><a class="gallery-card" href="koch.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Topics/fractals_and_l-systems/koch.png" alt="Koch" loading="lazy"></div><div class="gallery-card-title">Koch</div></a><a class="gallery-card" href="mandelbrot.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Topics/fractals_and_l-systems/mandelbrot.png" alt="Mandelbrot" loading="lazy"></div><div class="gallery-card-title">Mandelbrot</div></a><a class="gallery-card" href="penrose-snowflake.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Topics/fractals_and_l-systems/penrose-snowflake.png" alt="Penrose Snowflake" loading="lazy"></div><div class="gallery-card-title">Penrose Snowflake</div></a><a class="gallery-card" href="penrose-tile.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Topics/fractals_and_l-systems/penrose-tile.png" alt="Penrose Tile" loading="lazy"></div><div class="gallery-card-title">Penrose Tile</div></a><a class="gallery-card" href="pentigree.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Topics/fractals_and_l-systems/pentigree.png" alt="Pentigree" loading="lazy"></div><div class="gallery-card-title">Pentigree</div></a><a class="gallery-card" href="tree.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Topics/fractals_and_l-systems/tree.png" alt="Tree" loading="lazy"></div><div class="gallery-card-title">Tree</div></a></div></div><div class="gallery-section"><h2>Gui</h2><div class="gallery-grid"><a class="gallery-card" href="button.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Topics/gui/button.png" alt="Button" loading="lazy"></div><div class="gallery-card-title">Button</div></a><a class="gallery-card" href="handles.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Topics/gui/handles.png" alt="Handles" loading="lazy"></div><div class="gallery-card-title">Handles</div></a><a class="gallery-card" href="rollover.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Topics/gui/rollover.png" alt="Rollover" loading="lazy"></div><div class="gallery-card-title">Rollover</div></a><a class="gallery-card" href="scrollbar.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Topics/gui/scrollbar.png" alt="Scrollbar" loading="lazy"></div><div class="gallery-card-title">Scrollbar</div></a></div></div><div class="gallery-section"><h2>Image Processing</h2><div class="gallery-grid"><a class="gallery-card" href="blur.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Topics/image_processing/blur.png" alt="Blur" loading="lazy"></div><div class="gallery-card-title">Blur</div></a><a class="gallery-card" href="brightness-pixels.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Topics/image_processing/brightness-pixels.png" alt="Brightness Pixels" loading="lazy"></div><div class="gallery-card-title">Brightness Pixels</div></a><a class="gallery-card" href="convolution.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Topics/image_processing/convolution.png" alt="Convolution" loading="lazy"></div><div class="gallery-card-title">Convolution</div></a><a class="gallery-card" href="edge-detection.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Topics/image_processing/edge-detection.png" alt="Edge Detection" loading="lazy"></div><div class="gallery-card-title">Edge Detection</div></a><a class="gallery-card" href="histogram.html"><div class="gallery-thumb"><div class="gallery-thumb-missing"></div></div><div class="gallery-card-title">Histogram</div></a><a class="gallery-card" href="pixel-array.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Topics/image_processing/pixel-array.png" alt="Pixel Array" loading="lazy"></div><div class="gallery-card-title">Pixel Array</div></a></div></div><div class="gallery-section"><h2>Interaction</h2><div class="gallery-grid"><a class="gallery-card" href="follow1.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Topics/interaction/follow1.png" alt="Follow1" loading="lazy"></div><div class="gallery-card-title">Follow1</div></a><a class="gallery-card" href="follow2.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Topics/interaction/follow2.png" alt="Follow2" loading="lazy"></div><div class="gallery-card-title">Follow2</div></a><a class="gallery-card" href="follow3.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Topics/interaction/follow3.png" alt="Follow3" loading="lazy"></div><div class="gallery-card-title">Follow3</div></a><a class="gallery-card" href="reach1.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Topics/interaction/reach1.png" alt="Reach1" loading="lazy"></div><div class="gallery-card-title">Reach1</div></a><a class="gallery-card" href="reach2.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Topics/interaction/reach2.png" alt="Reach2" loading="lazy"></div><div class="gallery-card-title">Reach2</div></a><a class="gallery-card" href="reach3.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Topics/interaction/reach3.png" alt="Reach3" loading="lazy"></div><div class="gallery-card-title">Reach3</div></a><a class="gallery-card" href="tickle.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Topics/interaction/tickle.png" alt="Tickle" loading="lazy"></div><div class="gallery-card-title">Tickle</div></a></div></div><div class="gallery-section"><h2>Motion</h2><div class="gallery-grid"><a class="gallery-card" href="bounce.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Topics/motion/bounce.png" alt="Bounce" loading="lazy"></div><div class="gallery-card-title">Bounce</div></a><a class="gallery-card" href="bouncy-bubbles.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Topics/motion/bouncy-bubbles.png" alt="Bouncy Bubbles" loading="lazy"></div><div class="gallery-card-title">Bouncy Bubbles</div></a><a class="gallery-card" href="brownian.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Topics/motion/brownian.png" alt="Brownian" loading="lazy"></div><div class="gallery-card-title">Brownian</div></a><a class="gallery-card" href="circle-collision.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Topics/motion/circle-collision.png" alt="Circle Collision" loading="lazy"></div><div class="gallery-card-title">Circle Collision</div></a><a class="gallery-card" href="linear.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Topics/motion/linear.png" alt="Linear" loading="lazy"></div><div class="gallery-card-title">Linear</div></a><a class="gallery-card" href="morph.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Topics/motion/morph.png" alt="Morph" loading="lazy"></div><div class="gallery-card-title">Morph</div></a><a class="gallery-card" href="moving-on-curves.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Topics/motion/moving-on-curves.png" alt="Moving On Curves" loading="lazy"></div><div class="gallery-card-title">Moving On Curves</div></a><a class="gallery-card" href="reflection1.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Topics/motion/reflection1.png" alt="Reflection1" loading="lazy"></div><div class="gallery-card-title">Reflection1</div></a><a class="gallery-card" href="reflection2.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Topics/motion/reflection2.png" alt="Reflection2" loading="lazy"></div><div class="gallery-card-title">Reflection2</div></a></div></div><div class="gallery-section"><h2>Simulate</h2><div class="gallery-grid"><a class="gallery-card" href="flocking.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Topics/simulate/flocking.png" alt="Flocking" loading="lazy"></div><div class="gallery-card-title">Flocking</div></a><a class="gallery-card" href="forces-with-vectors.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Topics/simulate/forces-with-vectors.png" alt="Forces With Vectors" loading="lazy"></div><div class="gallery-card-title">Forces With Vectors</div></a><a class="gallery-card" href="multiple-particle-systems.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Topics/simulate/multiple-particle-systems.png" alt="Multiple Particle Systems" loading="lazy"></div><div class="gallery-card-title">Multiple Particle Systems</div></a><a class="gallery-card" href="simple-particle-system.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Topics/simulate/simple-particle-system.png" alt="Simple Particle System" loading="lazy"></div><div class="gallery-card-title">Simple Particle System</div></a><a class="gallery-card" href="smoke-particle-system.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Topics/simulate/smoke-particle-system.png" alt="Smoke Particle System" loading="lazy"></div><div class="gallery-card-title">Smoke Particle System</div></a></div></div><div class="gallery-section"><h2>Vectors</h2><div class="gallery-grid"><a class="gallery-card" href="acceleration-with-vectors.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Topics/vectors/acceleration-with-vectors.png" alt="Acceleration With Vectors" loading="lazy"></div><div class="gallery-card-title">Acceleration With Vectors</div></a><a class="gallery-card" href="bouncing-ball.html"><div class="gallery-thumb"><div class="gallery-thumb-missing"></div></div><div class="gallery-card-title">Bouncing Ball</div></a><a class="gallery-card" href="vector-math.html"><div class="gallery-thumb"><img src="../assets/examples_thumbs/Topics/vectors/vector-math.png" alt="Vector Math" loading="lazy"></div><div class="gallery-card-title">Vector Math</div></a></div></div></div></div>
</div>
<footer>
<p>C++ Mode for Processing</p>
<p class="footer-contact">
<span class="footer-sep">·</span>
<a href="https://discord.gg/vShSrPegJT">Discord</a>
</p>
</footer>
<script>function copyCode() {
navigator.clipboard.writeText(document.getElementById('code-pre').innerText).then(() => {
const btn = document.querySelector('.copy-btn');
btn.textContent = 'Copied!'; btn.classList.add('copied');
setTimeout(() => { btn.textContent = 'Copy'; btn.classList.remove('copied'); }, 2000);
});
}
function toggleSection(name) {
const sec = document.getElementById(name+'-section');
const arrow = document.getElementById(name+'-arrow');
const open = sec.style.display !== 'none';
sec.style.display = open ? 'none' : 'block';
arrow.textContent = open ? '▸' : '▾';
}</script>
<script src="../assets/nav.js"></script>
</body>
</html>