Create texture image

assets/images/data_oriented_design_diagram.svg

@@ -0,0 +1,81 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="600" height="450" xmlns="http://www.w3.org/2000/svg">
+  <!-- Data-Oriented Design Diagram -->
+  <style>
+    .data-array { fill: #e6f2ff; stroke: #0066cc; stroke-width: 2; }
+    .system { fill: #e6ffe6; stroke: #339933; stroke-width: 2; }
+    .oop-class { fill: #ffe6e6; stroke: #cc0000; stroke-width: 2; }
+    .text { font-family: Arial; font-size: 14px; text-anchor: middle; }
+    .small-text { font-family: Arial; font-size: 12px; text-anchor: middle; }
+    .title-text { font-family: Arial; font-size: 16px; font-weight: bold; text-anchor: middle; }
+    .main-title { font-family: Arial; font-size: 20px; font-weight: bold; text-anchor: middle; }
+    .arrow { stroke: #555; stroke-width: 2; marker-end: url(#arrowhead); }
+    .vs-text { font-family: Arial; font-size: 18px; font-weight: bold; text-anchor: middle; }
+  </style>
+
+  <!-- Arrow marker definition -->
+  <defs>
+    <marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
+      <polygon points="0 0, 10 3.5, 0 7" fill="#555" />
+    </marker>
+  </defs>
+
+  <text x="300" y="30" class="main-title">Data-Oriented Design</text>
+
+  <!-- Left side: Object-Oriented Approach -->
+  <text x="150" y="60" class="title-text">Object-Oriented Approach</text>
+
+  <!-- OOP Classes -->
+  <rect x="50" y="80" width="200" height="100" rx="5" class="oop-class" />
+  <text x="150" y="100" class="title-text">GameObject 1</text>
+  <text x="150" y="125" class="small-text">position: (10, 20, 30)</text>
+  <text x="150" y="145" class="small-text">rotation: (0, 45, 0)</text>
+  <text x="150" y="165" class="small-text">scale: (1, 1, 1)</text>
+
+  <rect x="50" y="190" width="200" height="100" rx="5" class="oop-class" />
+  <text x="150" y="210" class="title-text">GameObject 2</text>
+  <text x="150" y="235" class="small-text">position: (50, 0, 10)</text>
+  <text x="150" y="255" class="small-text">rotation: (90, 0, 0)</text>
+  <text x="150" y="275" class="small-text">scale: (2, 2, 2)</text>
+
+  <rect x="50" y="300" width="200" height="100" rx="5" class="oop-class" />
+  <text x="150" y="320" class="title-text">GameObject 3</text>
+  <text x="150" y="345" class="small-text">position: (0, 10, 50)</text>
+  <text x="150" y="365" class="small-text">rotation: (0, 180, 0)</text>
+  <text x="150" y="385" class="small-text">scale: (1, 3, 1)</text>
+
+  <!-- VS text -->
+  <text x="300" y="225" class="vs-text">VS</text>
+
+  <!-- Right side: Data-Oriented Approach -->
+  <text x="450" y="60" class="title-text">Data-Oriented Approach</text>
+
+  <!-- Data Arrays -->
+  <rect x="350" y="80" width="200" height="60" rx="5" class="data-array" />
+  <text x="450" y="100" class="title-text">Positions Array</text>
+  <text x="450" y="125" class="small-text">[10,20,30, 50,0,10, 0,10,50, ...]</text>
+
+  <rect x="350" y="150" width="200" height="60" rx="5" class="data-array" />
+  <text x="450" y="170" class="title-text">Rotations Array</text>
+  <text x="450" y="195" class="small-text">[0,45,0, 90,0,0, 0,180,0, ...]</text>
+
+  <rect x="350" y="220" width="200" height="60" rx="5" class="data-array" />
+  <text x="450" y="240" class="title-text">Scales Array</text>
+  <text x="450" y="265" class="small-text">[1,1,1, 2,2,2, 1,3,1, ...]</text>
+
+  <!-- Systems -->
+  <rect x="350" y="300" width="200" height="40" rx="5" class="system" />
+  <text x="450" y="325" class="title-text">Transform System</text>
+
+  <rect x="350" y="350" width="200" height="40" rx="5" class="system" />
+  <text x="450" y="375" class="title-text">Physics System</text>
+
+  <!-- Arrows from data to systems -->
+  <line x1="450" y1="140" x2="450" y2="300" class="arrow" />
+  <line x1="450" y1="210" x2="450" y2="300" class="arrow" />
+  <line x1="450" y1="280" x2="450" y2="300" class="arrow" />
+
+  <!-- Explanation -->
+  <text x="150" y="420" class="text">Objects with mixed data types</text>
+  <text x="450" y="420" class="text">Contiguous arrays of same data type</text>
+</svg>