1<!doctype html> 2<html lang="en"> 3<head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width,initial-scale=1"> 6 <title>Draw2Think: Harnessing Geometry Reasoning through Constraint Engine Interaction</title> 7 <meta name="description" content="Draw2Think recasts geometric reasoning as agentic interaction with the GeoGebra constraint engine: a frozen VLM proposes typed actions, the engine verifies each one, and the canvas becomes a checkable intermediate state."> 8 <meta property="og:title" content="Draw2Think: Harnessing Geometry Reasoning through Constraint Engine Interaction"> 9 <meta property="og:description" content="A training-free constraint-agentic harness wrapping a frozen VLM around a dynamic-geometry engine. Each action is engine-verified; the canvas is a checkable intermediate state."> 10 <meta property="og:image" content="assets/fig1_overview.png"> 11 <meta property="og:type" content="website"> 12 <meta name="twitter:card" content="summary_large_image"> 13 <link rel="preconnect" href="https://fonts.googleapis.com"> 14 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 15 <link href="https://fonts.googleapis.com/css?family=Google+Sans:400,500,600,700" rel="stylesheet"> 16 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&
16family=JetBrains+Mono:wght@400;500&family=Noto+Sans:wght@500;600;700&family=Source+Serif+4:wght@400;600&display=swap" rel="stylesheet"> 17 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/academicons.min.css"> 18 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"> 19 <link rel="stylesheet" href="assets/style.css"> 20
20<script src="https://www.geogebra.org/apps/deployggb.js" defer></script>
20 21</head> 22<body> 23<!-- Synchronous anti-flash: if the URL already has the focus hash 24 (e.g. when arriving from an arXiv figure's href), tag body with 25 the focus class BEFORE the rest of the document parses. That 26 way the existing body.focus-paradigms CSS hides the hero / TL;DR 27 / other sections from the very first paint, so the reader never 28 sees a flash of the full page before the focus view settles. -->
29<script> 30 if (location.hash === '#focus=paradigms') { 31 document.body.classList.add('focus-paradigms'); 32 } 33</script>
33 34 35<!-- âââ STICKY TOP NAV âââââââââââââââââââââââââââââââââââââââââââ --> 36<nav class="topnav" aria-label="Page sections"> 37 <div class="container topnav-row"> 38 <a href="#top" class="brand">Draw2Think</a> 39 <div class="topnav-links"> 40 <a href="#top" class="topnav-top" aria-label="Back to top"> 41 <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> 42 <line x1="5" y1="5" x2="19" y2="5"/> 43 <polyline points="7 13 12 8 17 13"/> 44 <line x1="12" y1="9" x2="12" y2="20"/> 45 </svg> 46 <span class="topnav-top-label">Top</span> 47 </a> 48 <a href="#overview">Overview</a> 49 <a href="#method">Loop</a> 50 <a href="#demo">Walk-through</a> 51 <a href="#insights">Insights</a> 52 <a href="#mechanisms">Mechanisms</a> 53 <a href="#future">Future</a> 54 <a href="#bibtex">BibTeX</a> 55 </div> 56 </div> 57</nav> 58 59<!-- âââ HERO âââââââââââââââââââââââââââââââââââââââââââââââââââââââ --> 60<header class="hero" id="top"> 61 <div class="container narrow"> 62 <h1 class="title"> 63 Draw2Think:<br> 64 <span class="subtitle">Harnessing Geometry Reasoning through Constraint Engine Interaction</span> 65 </h1> 66 67 <div class="authors"> 68 <span class="author"><a href="https://chengdobbs.github.io">Juncheng Hu</a><sup>1,2,3</sup></span> 69 <span class="author"><a href="https://scholar.google.com/citations?user=WrJKEzEAAAAJ">Jiawei Du</a><sup>2,3</sup></span> 70 <span class="author"><a href="https://zhangxin-xd.github.io/">Xin Zhang</a><sup>2,3</sup></span> 71 <span class="author"><a href="https://joeyzhouty.github.io/">Joey Tianyi Zhou</a><sup>2,3</sup></span> 72 </div> 73 <div class="affiliations"> 74 <span><sup>1</sup>National University of Singapore</span> 75 <span><sup>2</sup>Centre for Frontier AI Research, A*STAR</span> 76 <span><sup>3</sup>Institute of High Performance Computing, A*STAR</span> 77 </div> 78 <div class="contact"> 79 <code>[email protected]</code> 80 · 81 <code>{dujw, zhangx7, Joey_Zhou}@a-star.edu.sg</code> 82 </div> 83 84 <nav class="buttons"> 85 <a class="btn" href="https://arxiv.org/pdf/2605.20743" aria-label="Paper PDF"> 86 <span class="paper-icon" aria-hidden="true"> 87 <i class="far fa-file"></i> 88 <span class="paper-icon-badge">PDF</span> 89 </span> 90 Paper 91 </a> 92 <a class="btn" href="https://arxiv.org/abs/2605.20743" aria-label="arXiv preprint"> 93 <i class="ai ai-arxiv" aria-hidden="true"></i> 94 arXiv 95 </a> 96 <a class="btn" href="https://github.com/draw2think/harness-geometry" aria-label="Source code on GitHub"> 97 <i class="fab fa-github" aria-hidden="true"></i> 98 Code 99 </a> 100 <a class="btn" href="#" data-link="slides" aria-label="Presentation slides"> 101 <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> 102 <path d="M2 3h20"/> 103 <path d="M21 3v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V3"/> 104 <path d="M8 21l4-4 4 4"/> 105 <line x1="12" y1="17" x2="12" y2="21"/> 106 </svg> 107 Slides 108 </a> 109 <a class="btn" href="#" data-link="poster" aria-label="Poster"> 110 <i class="fas fa-image" aria-hidden="true"></i> 111 Poster 112 </a> 113 <a class="btn" href="#" data-link="video" aria-label="Project video"> 114 <i class="fas fa-play-circle" aria-hidden="true"></i> 115 Video 116 </a> 117 </nav> 118 119 <!-- Hero asset: canvas demo video/GIF. PLACEHOLDER â commented out 120 until the final asset + caption are recorded. Uncomment and 121 drop the real mp4/gif into assets/ to restore. 122 <figure class="hero-media"> 123 <video class="hero-video" autoplay loop muted playsinline poster="assets/fig1_overview.png"> 124 <source src="assets/demo_canvas.mp4" type="video/mp4"> 125 <img src="assets/demo_canvas.gif" alt="Draw2Think: GeoGebra canvas evolving through engine-verified actions"> 126 </video>
127 <figcaption> 128 A frozen VLM proposes typed ToolSpecs; the GeoGebra engine accepts or rejects each one; 129 the canvas accumulates as a checkable intermediate state. 130 </figcaption> 131 </figure> 132 --> 133 134 </div> 135</header> 136 137<!-- âââ TL;DR ââââââââââââââââââââââââââââââââââââââââââââââââââââââ --> 138<section class="band tldr"> 139 <div class="container narrow"> 140 <h2 class="band-title">TL;DR</h2> 141 <ul class="tldr-list"> 142 <li> 143 <strong>Geometry needs checkable state.</strong> 144 Text traces, rendered sketches, and generated scripts can expose intermediate 145 work while leaving construction-time validity outside the loop. 146 Draw2Think makes the canvas itself the working memory. 147 </li> 148 <li> 149 <strong>The engine verifies during construction.</strong> 150 A frozen VLM proposes typed ToolSpecs; the engine executes or rejects them; 151 exact observations return before the model commits to the next step. 152 Tool calls become checked premises for subsequent reasoning. 153 </li> 154 <li> 155 <strong>We find that grounding is selective.</strong> 156 External grounding pays off when construction, measurement, or state tracking 157 is the bottleneck. On saturated textbook-style problems, forcing a canvas 158 can impose cost without adding evidence; that boundary is part of the result. 159 </li> 160 </ul> 161 </div> 162</section> 163 164<!-- âââ OVERVIEW ââââââââââââââââââââââââââââââââââââââââââââââââââ --> 165<section class="band" id="overview"> 166 <div class="container"> 167 <h2>Overview: Four Paradigms for Externalizing Geometry Reasoning</h2> 168 <!-- Focus button: SIBLING of .paradigms inside .container so it 169 participates in NO grid layout. Anchored to .container's 170 top-right corner via absolute positioning (see CSS). Toggles 171 URL hash `#focus=paradigms`. --> 172 <button class="paradigms-zoom-btn" type="button" aria-label="Focus on the four paradigms (fullscreen view)"> 173 <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> 174 <polyline points="15 3 21 3 21 9"/> 175 <polyline points="9 21 3 21 3 15"/> 176 <line x1="21" y1="3" x2="14" y2="10"/> 177 <line x1="3" y1="21" x2="10" y2="14"/> 178 </svg> 179 <span>Focus</span> 180 </button> 181 <div class="paradigms"> 182 <!-- Col 1: Visual Artifacts --> 183 <article class="paradigm" data-flavor="visual" tabindex="0"> 184 <header class="paradigm-head"> 185 <span class="paradigm-icon"> 186 <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> 187 <rect x="3" y="4" width="18" height="14" rx="2"/> 188 <path d="M3 16l5-4 4 3 5-5 4 4"/> 189 </svg> 190 </span> 191 <h3>Visual Artifacts</h3> 192 </header> 193 <!-- Encapsulated in Shadow DOM (defined in assets/js/visual-flow.js). 194 Hover triggers a multi-wave clarification animation on the 195 rendered bitmap, with two orbital flow streaks circling its 196 border + an L-return on the LEFT back to the prompt. --> 197 <visual-flow class="paradigm-flow"></visual-flow> 198 <div class="paradigm-badge">Perceptual feedback<span class="paradigm-badge-sub">rendered image / bitmap</span></div> 199 <p class="paradigm-caveat"> 200 <span class="caveat-emoji caveat-emoji-anim emoji-cry" role="img" aria-label="cry"></span> 201 pixel approximation; <br/> no engine-exact certificate. 202 </p> 203 </article> 204 205 <!-- Col 2: Textual Traces --> 206 <article class="paradigm" data-flavor="text" tabindex="0"> 207 <header class="paradigm-head"> 208 <span class="paradigm-icon"> 209 <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> 210 <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/> 211 <line x1="8" y1="9" x2="16" y2="9"/> 212 <line x1="8" y1="13" x2="14" y2="13"/> 213 </svg> 214 </span> 215 <h3>Textual Traces</h3> 216 </header> 217 <!-- Encapsulated in Shadow DOM (defined in assets/js/textual-flow.js). 218 Each of the 4 reasoning traces lives in its own block with a 219 dashed self-reflect curve on the right; hover streams a flow 220 streak through all 5 arrows in sequence. --> 221 <textual-flow class="paradigm-flow"></textual-flow> 222 <div class="paradigm-badge">Internal self-check<span class="paradigm-badge-sub">reasoning trace in text</span></div> 223 <p class="paradigm-caveat">
224 <span class="caveat-emoji caveat-emoji-anim emoji-cry" role="img" aria-label="cry"></span> 225 intermediate text lacks <br/> exact validation 226 </p> 227 </article> 228 229 <!-- Col 3: Executable Scripts --> 230 <article class="paradigm" data-flavor="code" tabindex="0"> 231 <header class="paradigm-head"> 232 <span class="paradigm-icon"> 233 <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> 234 <polyline points="16 18 22 12 16 6"/> 235 <polyline points="8 6 2 12 8 18"/> 236 </svg> 237 </span> 238 <h3>Executable Scripts</h3> 239 </header> 240 <div class="paradigm-flow"> 241 <!-- Top 5 code tiles with title + simultaneous char-by-char 242 streaming, triggered when the col-3 flow reaches the 243 Code/script block (web component, see code-tiles.js). --> 244 <code-tiles></code-tiles> 245 <!-- 4-block horizontal code pipeline (web component, see 246 assets/js/code-flow.js). Renders: VLM/agent â Code/script â 247 Execute/render ⢠Post-hoc check, with two dashed feedback 248 arcs swinging back from Execute and Post-hoc into VLM. --> 249 <code-flow></code-flow> 250 </div> 251 <div class="paradigm-badge">Post-hoc verification<span class="paradigm-badge-sub">code / configuration / scripts</span></div> 252 <p class="paradigm-caveat"> 253 <span class="caveat-emoji caveat-emoji-anim emoji-cry" role="img" aria-label="cry"></span> 254 geometry checked after generation; <br/> 255 no per-action engine feedback 256 </p> 257 </article> 258 259 <!-- Col 4: Constraint-Agentic Harness (Draw2Think) --> 260 <article class="paradigm paradigm-ours" data-flavor="ours" tabindex="0"> 261 <header class="paradigm-head"> 262 <h3>Constraint-Agentic Harness <span class="paradigm-star" aria-hidden="true">★</span></h3> 263 <span class="paradigm-mine">Draw2Think <span class="paradigm-mine-tag">(ours)</span></span> 264 </header> 265 <!-- Encapsulated in Shadow DOM (defined in assets/demo.js) so 266 extensions can't leak CSS into the diagram. Styles live in 267 the shadow tree; the host element is just <d2t-diagram>. --> 268 <d2t-diagram class="paradigm-flow"></d2t-diagram> 269 <div class="paradigm-badge paradigm-badge-ours"><span class="caveat-emoji caveat-emoji-anim emoji-grin" role="img" aria-label="grin"></span>Typed actions · Exact verdicts · Reusable canvas</div> 270 </article> 271 272 </div> 273 274 <p class="lead"> 275 Prior routes externalize intermediate geometry as <em>visual artifacts</em>, 276 <em>textual traces</em>, or <em>executable scripts</em> — each surfaces a 277 state while leaving geometric validity uncertified during construction. 278 <strong>Draw2Think</strong> adds a fourth route: a <em>constraint-agentic 279 harness</em> where a frozen VLM selects typed ToolSpecs, the GeoGebra engine 280 updates an engine-valid canvas state, and structured observations return 281 after each action. The distinction is less about externalizing state than 282 about <em>when verification enters the loop</em>. 283 </p> 284 </div> 285</section> 286 287<!-- âââ METHOD âââââââââââââââââââââââââââââââââââââââââââââââââââ --> 288<section class="band alt" id="method"> 289 <div class="container narrow"> 290 <h2>The Propose-Draw-Verify Loop</h2> 291 <p> 292 Draw2Think wraps a frozen VLM around a dynamic-geometry engine via typed 293 ToolSpecs. In dynamic geometry systems such as GeoGebra, construction commands 294 enforce geometric relationships <em>algebraically</em> rather than by coordinate 295 approximation. Each accepted action is therefore engine-checkable, while the 296 model still chooses the construction strategy. 297 </p> 298 299 <ol class="loop"> 300 <li>
301 <span class="loop-tag">Propose</span> 302 The VLM reads the problem and current canvas snapshot, then emits one or more typed ToolSpec calls 303 (e.g., <code>line_through_perpendicular</code>, <code>circle_through_center</code>). 304 </li> 305 <li> 306 <span class="loop-tag">Draw</span> 307 GeoGebra executes the call algebraically. Invalid or degenerate configurations 308 surface as engine errors rather than silent approximations. 309 </li> 310 <li> 311 <span class="loop-tag">Verify</span> 312 Structured observations (exact lengths, angles, intersections, error 313 messages) return to the model and ground the next step. 314 </li> 315 </ol> 316 317 <p class="caption-note"> 318 Two properties become separately auditable: 319 <strong>Construction Fidelity</strong> (model-level: did the canvas realize 320 the intended configuration?) and 321 <strong>Measurement Faithfulness</strong> (engine-level: are exact values and 322 relations preserved by canvas constraints?). 323 </p> 324 </div> 325</section> 326 327<!-- âââ LIVE DEMO âââââââââââââââââââââââââââââââââââââââââââââââ --> 328<section class="band" id="demo"> 329 <div class="container"> 330 <h2>Live walk-through</h2> 331 <p class="lead"> 332 Five real Draw2Think trajectories from four datasets. Pick a problem below — 333 <strong>hover or click any <em>Engine command</em> step</strong>; the 334 model response (left), engine output (right), and live canvas (below) all 335 snap to that step in lock-step. For multi-turn problems, the turn tabs at 336 the top of the command column scroll the active turn into view. 337 </p> 338 339 <div class="demo-card" data-demo="geometry3k_2103"> 340 <header class="demo-banner"> 341 <div class="demo-banner-text"> 342 <!-- Bench / problem selector: pills sit IN the banner where 343 the meta pills used to live. Each button is one demo; 344 clicking re-fetches assets/demos/<demo-id>.json + re-renders. --> 345 <div class="demo-selector" id="demo-selector" role="tablist" aria-label="Choose demo problem"> 346 <button type="button" data-demo-id="geometry3k_2103" class="active"> 347 <span class="pill-bench">Geo3K</span> 348 <span class="pill-id">#2103</span> 349 <span class="pill-tag">trapezoid</span> 350 </button> 351 <button type="button" data-demo-id="pgps9k_152"> 352 <span class="pill-bench">PGPS9K</span> 353 <span class="pill-id">#152</span> 354 <span class="pill-tag">3-turn retry</span> 355 </button> 356 <button type="button" data-demo-id="geometry3k_2856"> 357 <span class="pill-bench">Geo3K</span> 358 <span class="pill-id">#2856</span> 359 <span class="pill-tag">CAS + verify</span> 360 </button> 361 <button type="button" data-demo-id="geometry3k_2171"> 362 <span class="pill-bench">Geo3K</span> 363 <span class="pill-id">#2171</span> 364 <span class="pill-tag">CAS only, no canvas</span> 365 </button> 366 <button type="button" data-demo-id="geogoal_00006"> 367 <span class="pill-bench">GeoGoal</span> 368 <span class="pill-id">#00006</span> 369 <span class="pill-tag">14-turn retry</span> 370 </button> 371 <button type="button" data-demo-id="customize_draw_sketch"> 372 <span class="pill-bench">Custom</span> 373 <span class="pill-id">Draw title</span> 374 <span class="pill-tag">your input</span> 375 </button> 376 <button type="button" data-demo-id="genexam_math_100"> 377 <span class="pill-bench">GenExam</span> 378 <span class="pill-id">Math_100</span> 379 <span class="pill-tag">chord</span> 380 </button> 381 <button type="button" data-demo-id="genexam_math_45"> 382 <span class="pill-bench">GenExam</span> 383 <span class="pill-id">Math_45</span>
384 <span class="pill-tag">integral</span> 385 </button> 386 </div> 387 <!-- Old data-driven meta pills removed â the selector above 388 already encodes bench + id + tag (and CSS `display:flex` 389 on .demo-meta was overriding the HTML `hidden` attr, 390 keeping them visible despite being marked hidden). --> 391 <h3 class="demo-question" id="demo-question"></h3> 392 <div class="demo-choices" id="demo-choices"></div> 393 </div> 394 <figure class="demo-banner-image" id="demo-input-image"> 395 <!-- Filled by JS if data.input_image is present --> 396 </figure> 397 </header> 398 399 <div class="demo-grid"> 400 <!-- Col 1: raw model response (function-call JSON) --> 401 <div class="demo-col col-raw"> 402 <div class="col-head">Model response (function call)</div> 403 <pre class="raw-json" id="raw-json" aria-live="polite"></pre> 404 </div> 405 406 <!-- Col 2: tool calls (engine command). The turn-tabs strip is 407 horizontally scrollable; demo.js auto-scrolls the active 408 turn into view (matters for the 30-turn GeoGoal demo). --> 409 <div class="demo-col col-tools"> 410 <div class="col-head">Engine command (Model → Engine Harness)</div> 411 <div class="turn-tabs-wrap" id="turn-tabs-wrap"> 412 <div class="turn-tabs" id="turn-tabs" role="tablist" aria-label="Turn"></div> 413 </div> 414 <ol class="tool-list" id="tool-list"></ol> 415 </div> 416 417 <!-- Col 3: engine diff --> 418 <div class="demo-col col-engine"> 419 <div class="col-head">Engine output (new objects)</div> 420 <pre class="engine-diff" id="engine-diff" aria-live="polite"></pre> 421 </div> 422 423 <!-- Col 4: GeoGebra canvas --> 424 <div class="demo-col col-canvas"> 425 <div class="col-head">GeoGebra canvas (live)</div> 426 <div class="canvas-wrap"> 427 <div id="ggb-applet"> 428 <div class="canvas-fallback"> 429 Canvas loads from <code>geogebra.org</code>. Needs internet on first paint. 430 </div> 431 </div> 432 </div> 433 <p class="canvas-note">If the canvas renders incorrectly, refresh with Ctrl/Cmd + Shift + R.</p> 434 </div> 435 </div> 436 </div> 437 </div> 438</section> 439 440<!-- âââ INSIGHTS ââââââââââââââââââââââââââââââââââââââââââââââââ --> 441<section class="band" id="insights"> 442 <div class="container"> 443 <h2>Insights from the Harness</h2> 444 <p class="lead"> 445 Constraint interaction separates latent strategy from checked state: the model 446 still explores, while accepted canvas state is already engine-checked. 447 </p> 448 449 <div class="insight-grid"> 450 <article class="insight-card"> 451 <span class="insight-kicker">Verification timing</span> 452 <h3>Verification timing matters as much as externalization.</h3> 453 <p> 454 Visual sketches, text traces, and generated scripts all expose intermediate 455 objects. Draw2Think moves the verification point earlier: each accepted 456 action becomes a checked premise for the next action. 457 </p> 458 </article> 459 460 <article class="insight-card"> 461 <span class="insight-kicker">Selective grounding</span> 462 <h3>External grounding pays off when geometry is the bottleneck.</h3> 463 <p> 464 The gain appears when the model needs exact measurements, 465 consistent construction, or a stable state. On easy or memorized routes, 466 building the canvas can impose cost rather than add evidence. 467 </p> 468 </article> 469 470 <article class="insight-card"> 471 <span class="insight-kicker">Auditable state</span> 472 <h3>Outcome accuracy hides too many failure modes.</h3> 473 <p> 474 A final answer does not separate perception, construction, measurement, 475 and algebra errors. A canvas audit lets us ask whether the intermediate 476 geometry itself was realized, independently of the final response. 477 </p> 478 </article> 479 </div> 480 </div> 481</section> 482 483<!-- âââ MECHANISMS ââââââââââââââââââââââââââââââââââââââââââââââ --> 484<section class="band alt" id="mechanisms">
485 <div class="container narrow"> 486 <h2>Mechanisms</h2> 487 <p class="lead"> 488 Beyond geometry, Draw2Think shows how a generative model can 489 use a deterministic engine for checks while keeping construction choices under 490 model control. 491 </p> 492 493 <div class="mechanism-list"> 494 <article class="mechanism-item"> 495 <h3>Readout is part of reasoning.</h3> 496 <p> 497 Query tools turn exact engine state into answerable evidence. When that channel is 498 removed, answers shift toward escape routes: internal reasoning, 499 construction-return shortcuts, or unanchored final responses. 500 </p> 501 </article> 502 503 <article class="mechanism-item"> 504 <h3>Cached context changes the cost profile.</h3> 505 <p> 506 With cacheable input context, marginal cost shifts toward generated 507 reasoning. On high-thinking benchmarks, engine readouts cut thinking 508 tokens by up to 36%, while ToolSpecs turn free-form text into typed calls 509 and structured observations. 510 </p> 511 </article> 512 513 <article class="mechanism-item"> 514 <h3>ToolSpecs shape trajectories.</h3> 515 <p> 516 The interface is a control surface for tool orchestration. Small descriptions 517 shift tool selection, parameter binding, and readout anchoring because the 518 model chooses among typed operations rather than emitting arbitrary pixels. 519 </p> 520 </article> 521 522 <article class="mechanism-item"> 523 <h3>Per-action verification leaves strategy open.</h3> 524 <p> 525 GeoGebra can reject invalid constructions and return exact observations. 526 Auxiliary-object selection and stopping decisions remain with the model, 527 so residual failures point to policy-level planning. 528 </p> 529 </article> 530 </div> 531 </div> 532</section> 533 534<!-- âââ FUTURE DIRECTIONS âââââââââââââââââââââââââââââââââââââââ --> 535<section class="band" id="future"> 536 <div class="container"> 537 <h2>Future Directions</h2> 538 <p class="lead"> 539 Future work could use Draw2Think to study process evidence directly, treating 540 final-answer gains as one metric among canvas audits, planning signals, and 541 reusable trajectory data. 542 </p> 543 544 <div class="future-grid"> 545 <article class="future-card"> 546 <span class="future-kicker">Strategy-level checks</span> 547 <h3>Expose more than the rendered canvas.</h3> 548 <p> 549 Future harnesses can return dependency graphs, unresolved constraints, and 550 symbolic query opportunities so the model can reason from the construction 551 plan alongside visible objects, measurements, and final pixels. 552 </p> 553 </article> 554 555 <article class="future-card"> 556 <span class="future-kicker">Proximal twins</span> 557 <h3>Generalize toward physical-world reasoning.</h3> 558 <p> 559 Geometry isolates the setting: the engine rejects invalid actions and exposes 560 local state. Similar loops may extend to physical-world AI when tasks have 561 typed actions, an executable twin, and cheap local checks before acting in 562 the real system. 563 </p> 564 </article> 565 566 <article class="future-card"> 567 <span class="future-kicker">Reusable trajectories</span> 568 <h3>Treat process records as assets.</h3> 569 <p> 570 A Draw2Think trajectory contains typed dependencies, engine verdicts, and 571 concrete canvas effects. That makes it a denser training signal than a final 572 answer or a free-form explanation. 573 </p> 574 </article> 575 </div> 576 </div> 577</section> 578 579<!-- âââ BIBTEX âââââââââââââââââââââââââââââââââââââââââââââââââââ --> 580<section class="band alt" id="bibtex"> 581 <div class="container narrow"> 582 <h2>Citation</h2> 583 <p>
583If Draw2Think <small>(or the live demos on this project page)</small> is useful for your research, please cite:</p> 584 <div class="bibtex-block"> 585 <pre class="bibtex"><code>@article{hu2026draw2think, 586 title = {Draw2Think: Harnessing Geometry Reasoning through Constraint Engine Interaction}, 587 author = {Hu, Juncheng and Du, Jiawei and Zhang, Xin and Zhou, Joey Tianyi}, 588 journal = {arXiv preprint arXiv:2605.20743}, 589 year = {2026}, 590 url = {https://draw2think.github.io} 591}</code></pre> 592 <button class="copy-btn" data-copy="bibtex" type="button" aria-label="Copy BibTeX to clipboard" title="Copy BibTeX"> 593 <i class="far fa-clipboard copy-icon" aria-hidden="true"></i> 594 <i class="fas fa-check copy-icon-done" aria-hidden="true"></i> 595 </button> 596 </div> 597 </div> 598</section> 599 600<!-- âââ FOOTER âââââââââââââââââââââââââââââââââââââââââââââââââââ --> 601<footer class="footer"> 602 <div class="container narrow"> 603 <p> 604 <strong>Acknowledgements.</strong> 605 We thank, in particular, the following products / projects / posts / talks: 606 <br> 607 · <a href="https://github.com/geogebra">GeoGebra</a> — the public dynamic-geometry construction kernel (<a href="https://www.geogebra.org/calculator">try the web calculator</a>); 608 <br> 609 · <a href="https://deepmind.google/models/gemini/flash/">Gemini 3 Flash</a> — the frontier multimodal backbone used in our main experiments; 610 <br> 611 · <a href="https://github.com/Newclid/Newclid">Newclid</a> — the predicate-level verifier underpinning our construction-fidelity audit; 612 <br> 613 · <a href="https://github.com/OpenGVLab/GenExam">GenExam</a> — the rendering benchmark and evaluation protocol; 614 <br> 615 · <a href="https://lilianweng.github.io/posts/2025-05-01-thinking/">Lilian Weng: Why We Think</a> (1 May, 2025). 616 <br> 617 · <a href="https://www.youtube.com/watch?v=y5qEFrZv-2Q">Thang Luong: Towards AI Superhuman Reasoning for Math and Beyond</a> (4 Nov, 2024). 618 </p> 619 <p class="meta"> 620 © 2026 The Draw2Think authors. 621 </p> 622 </div> 623</footer> 624 625<!-- Exit-focus button: shown only when body.focus-paradigms is set. 626 Fixed top-right under the sticky topnav. ESC also exits. --> 627<button class="focus-exit" type="button" aria-label="Exit focus view (or press ESC)" title="Exit focus (ESC)"> 628 <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> 629 <line x1="18" y1="6" x2="6" y2="18"/> 630 <line x1="6" y1="6" x2="18" y2="18"/> 631 </svg> 632</button> 633 634<!-- Split out by concern: 635 paradigm-flow = <d2t-diagram> (col 4 Constraint-Agentic Harness) 636 visual-flow = <visual-flow> (col 1 Visual Artifacts hover anim) 637 demo = GeoGebra live trajectory 638 site = nav highlight + BibTeX copy + paradigms focus mode. 639 All independent + defer-loaded; order doesn't matter. -->
640<script src="assets/js/paradigm-flow.js" defer></script>
vendor: 1 bytes, line 640
640
641<script src="assets/js/visual-flow.js" defer></script>
vendor: 1 bytes, line 641
641
642<script src="assets/js/textual-flow.js" defer></script>
vendor: 1 bytes, line 642
642
643<script src="assets/js/code-flow.js" defer></script>
vendor: 1 bytes, line 643
643
644<script src="assets/js/code-tiles.js" defer></script>
vendor: 1 bytes, line 644
644
645<script src="assets/js/demo.js" defer></script>
vendor: 1 bytes, line 645
645
646<script src="assets/js/site.js" defer></script>
646 647 648</body> 649</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.