Add node graph mockup to website
This commit is contained in:
Keavon Chambers
parent
f6726c1427
commit
9ced465150
|
|
@ -0,0 +1,24 @@
|
|||
Data can **flow** or **composite**.
|
||||
|
||||
# Types
|
||||
Data types in Rust.
|
||||
|
||||
- Color - A color description freely convertible between color models and color spaces.
|
||||
- Raster - A monadic data format that allows a color to be sampled at any rectangle position.
|
||||
<!-- - CSG - Constructive Solid Geometry. What's inside and outside of a shape. -->
|
||||
<!-- - SDF - Signed Distance Field. Distance from the surface of a CSG. -->
|
||||
|
||||
# Table Archetypes
|
||||
A set of standard named columns in a table of specific type(s), where some can be optional.
|
||||
|
||||
- XY - A vector2 (2D vector).
|
||||
`X`: number, `Y`: number
|
||||
|
||||
- XYZ - A vector3 (3D vector).
|
||||
`X`: number, `Y`: number, `Z`: number
|
||||
|
||||
- XYZW - A vector4 (4D vector).
|
||||
`X`: number, `Y`: number, `Z`: number, `W`: number
|
||||
|
||||
- Trace - Sequence of points in 2D or (rarely) 3D space. Often recorded as mouse or stylus movements where time is seconds since the stroke began.
|
||||
`X`: number, `Y`: number, `Z?`: number, `Pressure?`: number, `Pitch?`: number, `Roll?`: number, `Yaw?`: number, `Time?`: number
|
||||
|
|
@ -52,19 +52,19 @@
|
|||
|
||||
<section id="screenshots">
|
||||
<div class="carousel">
|
||||
<img src="https://static.graphite.rs/content/index/gui-viewport-blank.png">
|
||||
<img src="https://static.graphite.rs/content/index/gui-viewport-mockup.png">
|
||||
<img src="https://static.graphite.rs/content/index/gui-viewport-mockup.png">
|
||||
<img src="https://static.graphite.rs/content/index/gui-demo-yosemite.png" />
|
||||
<img src="https://static.graphite.rs/content/index/gui-mockup-viewport.png" />
|
||||
<img src="https://static.graphite.rs/content/index/gui-mockup-nodes.png" />
|
||||
</div>
|
||||
<div class="carousel torn left">
|
||||
<img src="https://static.graphite.rs/content/index/gui-viewport-blank.png">
|
||||
<img src="https://static.graphite.rs/content/index/gui-viewport-mockup.png">
|
||||
<img src="https://static.graphite.rs/content/index/gui-viewport-mockup.png">
|
||||
<img src="https://static.graphite.rs/content/index/gui-demo-yosemite.png" />
|
||||
<img src="https://static.graphite.rs/content/index/gui-mockup-viewport.png" />
|
||||
<img src="https://static.graphite.rs/content/index/gui-mockup-nodes.png" />
|
||||
</div>
|
||||
<div class="carousel torn right">
|
||||
<img src="https://static.graphite.rs/content/index/gui-viewport-blank.png">
|
||||
<img src="https://static.graphite.rs/content/index/gui-viewport-mockup.png">
|
||||
<img src="https://static.graphite.rs/content/index/gui-viewport-mockup.png">
|
||||
<img src="https://static.graphite.rs/content/index/gui-demo-yosemite.png" />
|
||||
<img src="https://static.graphite.rs/content/index/gui-mockup-viewport.png" />
|
||||
<img src="https://static.graphite.rs/content/index/gui-mockup-nodes.png" />
|
||||
</div>
|
||||
<div class="screenshot-details">
|
||||
<div class="carousel-controls">
|
||||
|
|
@ -85,11 +85,19 @@
|
|||
</button>
|
||||
</div>
|
||||
<div class="screenshot-description">
|
||||
<p class="balance-text active">View of the current alpha version of the Graphite editor with a blank canvas. Try this out at <a href="https://editor.graphite.rs">editor.graphite.rs</a>
|
||||
instantly in your browser. Send in your artwork to potentially be featured here in place of this blank canvas.</p>
|
||||
<p class="balance-text">Interface mockup showcasing a photo editing project that utilizes Graphite's raster graphics pipeline, one of the upcoming roadmap milestones. Photo editing
|
||||
is not yet supported.</p>
|
||||
<p class="balance-text">This last screenshot is currently identical to the previous one, serving as a placeholder. Work is ongoing to replace this image with a node graph mockup.</p>
|
||||
<p class="balance-text active">
|
||||
Vector artwork created in the alpha version of the Graphite editor. Try this out at
|
||||
<a href="https://editor.graphite.rs">editor.graphite.rs</a>
|
||||
instantly in your browser.
|
||||
</p>
|
||||
<p class="balance-text">
|
||||
Viewport interface mockup showcasing a photo editing project that utilizes Graphite's raster graphics pipeline, one of the upcoming roadmap milestones. Raster editing is not yet
|
||||
supported.
|
||||
</p>
|
||||
<p class="balance-text">
|
||||
Node graph mockup demonstrating how the layers directly correspond to nodes. Thick vertical (upward) lines represent compositing stacks and horizontal (rightward) links represent data
|
||||
flow connections.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<hr />
|
||||
|
|
@ -115,7 +123,7 @@
|
|||
The accessible design of Graphite does not sacrifice versatility for simplicity. The node-based workflow (coming soon) will open doors to an ecosystem of powerful capabilities catering to
|
||||
the casual and professional user alike, encompassing a wide set of use cases at every skill level.
|
||||
</p>
|
||||
<a href="/blog/mission-statement" class="link arrow">Mission Statement</a>
|
||||
<!-- <a href="/blog/mission-statement" class="link arrow">Mission Statement</a> -->
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
|
@ -155,7 +163,7 @@
|
|||
</div> -->
|
||||
<p>When editing in Graphite, your work gets described in <em>nodes</em> within your <em>layers</em>. Their <em>parameters</em> can be altered anytime in the creative process. The
|
||||
simpler <em>layer tree</em> and wickedly powerful <em>node graph</em> provide two equivalent and interchangeable ways to create art.</p>
|
||||
<a href="/blog/node-graph-explained" class="link arrow">Node Graph</a>
|
||||
<!-- <a href="/blog/node-graph-explained" class="link arrow">Node Graph</a> -->
|
||||
</div>
|
||||
<div class="section">
|
||||
<h2 class="balance-text">Raster and vector art, crisp at any resolution.</h2>
|
||||
|
|
@ -164,7 +172,7 @@
|
|||
</div> -->
|
||||
<p>Just like <em>vector</em> artwork, which is based on curves instead of pixels to preserve quality at any scale, Graphite's <em>raster</em> paintbrushes, generators, and other tools
|
||||
work the same way. A <em>resolution-agnostic</em> render engine lets you zoom infinitely and export at any size.</p>
|
||||
<a href="/blog/rendering-pipeline-explained" class="link arrow">Rendering</a>
|
||||
<!-- <a href="/blog/rendering-pipeline-explained" class="link arrow">Rendering</a> -->
|
||||
</div>
|
||||
<div class="section">
|
||||
<h2 class="balance-text">Procedural superpowers, part of your art pipeline.</h2>
|
||||
|
|
@ -173,7 +181,7 @@
|
|||
</div> -->
|
||||
<p>Graphite aims to be the ultimate 2D tool for every technical artist. From procedural artwork to data viz and automation, it is designed from the ground up to fit into studio content
|
||||
pipelines. You can also integrate Graphite's render engine into your game, app, or server.</p>
|
||||
<a href="/blog/graphene-explained" class="link arrow">Graphene</a>
|
||||
<!-- <a href="/blog/graphene-explained" class="link arrow">Graphene</a> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="more-features section-row right">
|
||||
|
|
|
|||
Loading…
Reference in New Issue