|
| 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.0"> |
| 6 | + <title>About - C++ Mode for Processing</title> |
| 7 | + <style> |
| 8 | + * { margin: 0; padding: 0; box-sizing: border-box; } |
| 9 | + body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #111; background: #fff; } |
| 10 | + a { color: #111; text-decoration: none; } |
| 11 | + nav { border-bottom: 1px solid #e0e0e0; padding: 0 2rem; display: flex; align-items: center; height: 60px; } |
| 12 | + .nav-logo { display: flex; align-items: center; gap: 10px; } |
| 13 | + .nav-logo img { width: 28px; height: 28px; } |
| 14 | + .nav-logo span { font-size: 15px; font-weight: 500; } |
| 15 | + .layout { display: flex; min-height: calc(100vh - 60px); } |
| 16 | + .sidebar { width: 180px; min-width: 180px; border-right: 1px solid #e0e0e0; padding: 2.5rem 1.5rem; display: flex; flex-direction: column; gap: 0.25rem; } |
| 17 | + .sidebar a { font-size: 14px; color: #555; padding: 0.4rem 0; display: block; } |
| 18 | + .sidebar a:hover { color: #111; } |
| 19 | + .sidebar a.active { color: #111; font-weight: 500; } |
| 20 | + .content { max-width: 680px; padding: 4rem 3rem; } |
| 21 | + .content h1 { font-size: 2rem; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 2.5rem; } |
| 22 | + .content h2 { font-size: 1rem; font-weight: 600; margin-top: 2.5rem; margin-bottom: 0.75rem; } |
| 23 | + .content p { font-size: 1rem; color: #444; line-height: 1.85; margin-bottom: 1.25rem; } |
| 24 | + .content code { font-family: "SF Mono", "Fira Code", monospace; font-size: 13px; background: #f4f4f4; border-radius: 4px; padding: 2px 6px; color: #111; } |
| 25 | + footer { border-top: 1px solid #e0e0e0; padding: 2rem; text-align: center; font-size: 13px; color: #888; } |
| 26 | + </style> |
| 27 | +</head> |
| 28 | +<body> |
| 29 | + |
| 30 | +<nav> |
| 31 | + <a href="../" class="nav-logo"> |
| 32 | + <img src="assets/cpp-logo.png" alt="C++ Mode"> |
| 33 | + <span>C++ Mode</span> |
| 34 | + </a> |
| 35 | +</nav> |
| 36 | + |
| 37 | +<div class="layout"> |
| 38 | + <div class="sidebar"> |
| 39 | + <a href="../reference">Reference</a> |
| 40 | + <a href="../examples">Examples</a> |
| 41 | + <a href="../about" class="active">About</a> |
| 42 | + </div> |
| 43 | + <div class="content"> |
| 44 | + <h1>About</h1> |
| 45 | + |
| 46 | + <p>C++ Mode is a plugin for the Processing 4 IDE that lets you write sketches in C++ instead of Java. The idea is to take everything that makes Processing easy to pick up and bring it to C++.</p> |
| 47 | + |
| 48 | + <h2>Why C++ Mode?</h2> |
| 49 | + |
| 50 | + <p>Getting started with C++ is hard. Before you can draw anything on screen you need to set up a build system, open a window, initialize OpenGL, and write a lot of setup code. Most people give up before they see anything.</p> |
| 51 | + |
| 52 | + <p>Processing solved this problem for Java. C++ Mode does the same thing for C++. You type <code>ellipse(300, 300, 50, 50)</code>, hit Run, and something appears on screen. The window, the event loop, the OpenGL context, all of it is taken care of.</p> |
| 53 | + |
| 54 | + <h2>A friendlier path into C++</h2> |
| 55 | + |
| 56 | + <p>If you already know Processing, you already know most of the API. <code>setup()</code>, <code>draw()</code>, <code>background()</code>, <code>mouseX</code>, <code>fill()</code> all work the same way. The only difference is that you are now writing C++.</p> |
| 57 | + |
| 58 | + <p>You can take it step by step. Start with sketches that look almost identical to what you would write in Java. Then start introducing C++ concepts at your own pace: structs, vectors, pointers, templates. The visual feedback makes it easier to understand what your code is actually doing.</p> |
| 59 | + |
| 60 | + <h2>Who is it for</h2> |
| 61 | + |
| 62 | + <p>C++ Mode is for Processing users who are curious about C++ and want a familiar starting point. It is for students taking a C++ course who want to make something visual while they learn. It is for developers who already know C++ and want a fast creative coding environment. And it is for artists who want their sketches to run as fast as possible without giving up the simplicity of the Processing API.</p> |
| 63 | + |
| 64 | + <p>Made by <a href="https://github.com/pepc84" style="border-bottom: 1px solid #ddd;">Jose Gonzalez Llamas</a>. Contributions welcome on <a href="https://github.com/processing-cpp/processing.cpp" style="border-bottom: 1px solid #ddd;">GitHub</a>.</p> |
| 65 | + </div> |
| 66 | +</div> |
| 67 | + |
| 68 | +<footer> |
| 69 | + <p>C++ Mode for Processing</p> |
| 70 | +</footer> |
| 71 | + |
| 72 | +</body> |
| 73 | +</html> |
0 commit comments