Show off procedural generation on the website
This commit is contained in:
Keavon Chambers
parent
1727694dfc
commit
45de49fa03
|
|
@ -103,10 +103,10 @@ js = ["image-interaction.js", "video-embed.js"]
|
|||
<em>Valley of Spires</em> — <a href="https://editor.graphite.rs/#demo/valley-of-spires">Open this artwork</a> to explore it yourself.
|
||||
</p>
|
||||
<p data-carousel-description>
|
||||
Design mockup for the work-in-progress raster editing pipeline. Some nodes shown here are not implemented yet, but will be soon!
|
||||
Design mockup for the work-in-progress raster editing pipeline. Some of these raster-specific nodes are not implemented yet, but will be soon!
|
||||
</p>
|
||||
<p data-carousel-description>
|
||||
Design mockup for the work-in-progress raster editing workflow. Some viewport features shown here are not implemented yet, but will be soon!
|
||||
Design mockup for the work-in-progress raster editing workflow. Some of the features shown here are not implemented yet, but will be soon!
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -120,7 +120,7 @@ js = ["image-interaction.js", "video-embed.js"]
|
|||
|
||||
<div class="section">
|
||||
|
||||
# Graphite today
|
||||
# Graphite today <span class="status-flag">alpha release</span>
|
||||
|
||||
<div class="informational-group features">
|
||||
<div class="informational">
|
||||
|
|
@ -128,12 +128,15 @@ js = ["image-interaction.js", "video-embed.js"]
|
|||
<span>Vector graphics editing</span>
|
||||
</div>
|
||||
<div class="informational">
|
||||
<img class="atlas" style="--atlas-index: 1" src="https://static.graphite.rs/icons/icon-atlas-features.png" alt="" />
|
||||
<img class="atlas" style="--atlas-index: 8" src="https://static.graphite.rs/icons/icon-atlas-features.png" alt="" />
|
||||
<span>Node-based layers</span>
|
||||
</div>
|
||||
<div class="informational">
|
||||
<img class="atlas" style="--atlas-index: 2" src="https://static.graphite.rs/icons/icon-atlas-features.png" alt="" />
|
||||
<span>AI-assisted art creation</span>
|
||||
<!-- TODO: Reenable when Imaginate is properly working again -->
|
||||
<!-- <img class="atlas" style="--atlas-index: 2" src="https://static.graphite.rs/icons/icon-atlas-features.png" alt="" /> -->
|
||||
<!-- <span>AI-assisted art creation</span> -->
|
||||
<img class="atlas" style="--atlas-index: 10" src="https://static.graphite.rs/icons/icon-atlas-features.png" alt="" />
|
||||
<span>Procedural design workflow</span>
|
||||
</div>
|
||||
<div class="informational">
|
||||
<img class="atlas" style="--atlas-index: 3" src="https://static.graphite.rs/icons/icon-atlas-features.png" alt="" />
|
||||
|
|
@ -175,6 +178,45 @@ Graphite is a lightweight vector graphics editor that runs offline in your brows
|
|||
</section>
|
||||
<!-- ▙ TODAY AND TOMORROW ▟ -->
|
||||
<!-- -->
|
||||
<!-- ▛ DISCIPLINES ▜ -->
|
||||
<section id="disciplines">
|
||||
<div class="section">
|
||||
|
||||
# One app to rule them all
|
||||
|
||||
**Stop jumping between programs. Planned features will make Graphite a first-class design tool for all these disciplines** *(listed by priority)*.
|
||||
|
||||
<div class="informational-group concepts">
|
||||
<div class="informational">
|
||||
<img class="atlas" style="--atlas-index: 12" src="https://static.graphite.rs/icons/icon-atlas-features.png" alt="" />
|
||||
<span>Graphic Design</span>
|
||||
</div>
|
||||
<div class="informational">
|
||||
<img class="atlas" style="--atlas-index: 13" src="https://static.graphite.rs/icons/icon-atlas-features.png" alt="" />
|
||||
<span>Image Editing</span>
|
||||
</div>
|
||||
<div class="informational">
|
||||
<img class="atlas" style="--atlas-index: 14" src="https://static.graphite.rs/icons/icon-atlas-features.png" alt="" />
|
||||
<span>Digital Painting</span>
|
||||
</div>
|
||||
<div class="informational">
|
||||
<img class="atlas" style="--atlas-index: 17" src="https://static.graphite.rs/icons/icon-atlas-features.png" alt="" />
|
||||
<span>Motion Graphics</span>
|
||||
</div>
|
||||
<div class="informational">
|
||||
<img class="atlas" style="--atlas-index: 16" src="https://static.graphite.rs/icons/icon-atlas-features.png" alt="" />
|
||||
<span>VFX Compositing</span>
|
||||
</div>
|
||||
<div class="informational">
|
||||
<img class="atlas" style="--atlas-index: 15" src="https://static.graphite.rs/icons/icon-atlas-features.png" alt="" />
|
||||
<span>Desktop Publishing</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
<!-- ▙ DISCIPLINES ▟ -->
|
||||
<!-- -->
|
||||
<!-- ▛ COMMUNITY ▜ -->
|
||||
<section id="community" class="feature-box">
|
||||
<div class="box">
|
||||
|
|
@ -248,18 +290,58 @@ You'll receive your first newsletter email with the next major Graphite news.
|
|||
</div>
|
||||
</section>
|
||||
<!-- ▙ COMMUNITY ▟ -->
|
||||
<!-- -->
|
||||
<!-- -->
|
||||
<!-- ▛ JUMP RIGHT IN ▜ -->
|
||||
<section id="jump-right-in">
|
||||
<div class="section">
|
||||
|
||||
# Jump right in
|
||||
|
||||
**Get started with Graphite by following along to a hands-on quickstart tutorial.**
|
||||
|
||||
<div class="video-embed aspect-16x9">
|
||||
<img data-video-embed="7gjUhl_3X10" src="https://static.graphite.rs/content/learn/introduction/tutorial-1-vector-art-quickstart-youtube.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Graphite Tutorial 1 - Hands-On Quickstart" />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
<!-- ▙ JUMP RIGHT IN ▟ -->
|
||||
<!-- -->
|
||||
<!-- ▛ PROCEDURALISM ▜ -->
|
||||
<section id="proceduralism">
|
||||
<div class="section">
|
||||
|
||||
# Powerful proceduralism
|
||||
|
||||
Graphite's data-driven approach to graphic design affords some unique capabilities (while in alpha, these remain a work in progress):
|
||||
**Graphite is the first and only graphic design app to offer procedural vector editing.**
|
||||
|
||||
This new capability has just recently shown its potential. Now, expanding Graphite's procedural powers is the focus of development in 2024.
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="proceduralism-demo">
|
||||
<div class="section">
|
||||
|
||||
Proceduralism lets you create sophisticated design elements that are easy to edit and reuse. The holiday string lights shown below are built from a simple group of nodes, allowing you to effortlessly reshape the wire and update the bulb appearance and spacing. <a href="https://editor.graphite.rs/#demo/procedural-string-lights">Click here to explore this demo</a> and try dragging the wire layer's points with the Path tool (<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" style="vertical-align: bottom"><polygon fill="#aaa" points="5,0 5,17 10,12 17,12" /><path fill="#78bae5" d="M20.77,14.36c-0.35-0.42-0.98-0.48-1.41-0.13c-1.04,0.87-2.19,1.6-3.36,2.24V16h-6v2.9c-2.88,0.84-5.07,1.1-5.11,1.11c-0.55,0.06-0.94,0.56-0.88,1.11C4.06,21.62,4.5,22,5,22c0.04,0,0.07,0,0.11-0.01c0.17-0.02,2.18-0.26,4.89-1.01V22h6v-3.28c1.6-0.79,3.2-1.75,4.64-2.95C21.06,15.42,21.12,14.78,20.77,14.36z M14,20h-2v-2h2V20z" /></svg>).
|
||||
|
||||
<div class="video-background">
|
||||
<video loop muted playsinline disablepictureinpicture disableremoteplayback data-auto-play>
|
||||
<source src="https://static.graphite.rs/content/blog/2024-01-01-looking-back-on-2023-and-what's-next/christmas-tree-lights.mp4" type="video/mp4" />
|
||||
</video>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="proceduralism-features">
|
||||
<div class="section">
|
||||
|
||||
Graphite's data-driven approach to graphic design affords unique capabilities (while in alpha, these remain a work in progress):
|
||||
|
||||
<div class="informational-group features four-wide">
|
||||
<div class="informational">
|
||||
<img class="atlas" style="--atlas-index: 8" src="https://static.graphite.rs/icons/icon-atlas-features.png" alt="" />
|
||||
<img class="atlas" style="--atlas-index: 1" src="https://static.graphite.rs/icons/icon-atlas-features.png" alt="" />
|
||||
<span class="balance-text">Fully nondestructive editing with node-driven layers</span>
|
||||
</div>
|
||||
<div class="informational">
|
||||
|
|
@ -267,7 +349,8 @@ Graphite's data-driven approach to graphic design affords some unique capabiliti
|
|||
<span class="balance-text">Infinitely scalable raster content with no pixelation</span>
|
||||
</div>
|
||||
<div class="informational">
|
||||
<img class="atlas" style="--atlas-index: 10" src="https://static.graphite.rs/icons/icon-atlas-features.png" alt="" />
|
||||
<!-- <img class="atlas" style="--atlas-index: 10" src="https://static.graphite.rs/icons/icon-atlas-features.png" alt="" /> -->
|
||||
<img class="atlas" style="--atlas-index: 2" src="https://static.graphite.rs/icons/icon-atlas-features.png" alt="" />
|
||||
<span class="balance-text">Integrated generative AI models and graphics algorithms</span>
|
||||
</div>
|
||||
<div class="informational">
|
||||
|
|
@ -280,45 +363,6 @@ Graphite's data-driven approach to graphic design affords some unique capabiliti
|
|||
</section>
|
||||
<!-- ▙ PROCEDURALISM ▟ -->
|
||||
<!-- -->
|
||||
<!-- ▛ DISCIPLINES ▜ -->
|
||||
<section id="disciplines">
|
||||
<div class="section">
|
||||
|
||||
# One app to rule them all
|
||||
|
||||
Stop jumping between programs. Planned features will make Graphite a first-class design tool for these disciplines (listed by priority):
|
||||
|
||||
<div class="informational-group concepts">
|
||||
<div class="informational">
|
||||
<img class="atlas" style="--atlas-index: 12" src="https://static.graphite.rs/icons/icon-atlas-features.png" alt="" />
|
||||
<span>Graphic Design</span>
|
||||
</div>
|
||||
<div class="informational">
|
||||
<img class="atlas" style="--atlas-index: 13" src="https://static.graphite.rs/icons/icon-atlas-features.png" alt="" />
|
||||
<span>Image Editing</span>
|
||||
</div>
|
||||
<div class="informational">
|
||||
<img class="atlas" style="--atlas-index: 14" src="https://static.graphite.rs/icons/icon-atlas-features.png" alt="" />
|
||||
<span>Digital Painting</span>
|
||||
</div>
|
||||
<div class="informational">
|
||||
<img class="atlas" style="--atlas-index: 15" src="https://static.graphite.rs/icons/icon-atlas-features.png" alt="" />
|
||||
<span>Desktop Publishing</span>
|
||||
</div>
|
||||
<div class="informational">
|
||||
<img class="atlas" style="--atlas-index: 16" src="https://static.graphite.rs/icons/icon-atlas-features.png" alt="" />
|
||||
<span>VFX Compositing</span>
|
||||
</div>
|
||||
<div class="informational">
|
||||
<img class="atlas" style="--atlas-index: 17" src="https://static.graphite.rs/icons/icon-atlas-features.png" alt="" />
|
||||
<span>Motion Graphics</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
<!-- ▙ DISCIPLINES ▟ -->
|
||||
<!-- -->
|
||||
<!-- ▛ FUNDRAISING ▜ -->
|
||||
<section id="fundraising" class="feature-box">
|
||||
<div class="box">
|
||||
|
|
@ -368,9 +412,14 @@ Graphite is built by a small, dedicated crew of volunteers in need of resources
|
|||
|
||||
# Art takes shape
|
||||
|
||||
Make vector art out of shapes ranging from simple geometric primitives to complex Bézier curves.
|
||||
**All you've come to expect from a professional vector graphics editor. Now readily accessible in your browser.**
|
||||
|
||||
Style your shapes with strokes, fills, and gradients. Mix your layers with blend modes. Then export as SVG.
|
||||
<p>
|
||||
<center>
|
||||
Make vector art out of shapes ranging from simple geometric primitives to complex Bézier curves.
|
||||
<br />
|
||||
Style shapes with strokes, fills, and gradients. Mix layers with blend modes. Then export as an image or SVG.</center>
|
||||
</p>
|
||||
|
||||
<div class="video-background">
|
||||
<video loop muted playsinline disablepictureinpicture disableremoteplayback data-auto-play>
|
||||
|
|
@ -397,6 +446,11 @@ Style your shapes with strokes, fills, and gradients. Mix your layers with blend
|
|||
<!-- ▙ VECTOR ART ▟ -->
|
||||
<!-- -->
|
||||
<!-- ▛ IMAGINATE ▜ -->
|
||||
|
||||
<!-- TODO: Reenable when Imaginate is properly working again -->
|
||||
|
||||
<!--
|
||||
|
||||
<section id="imaginate">
|
||||
|
||||
<div class="section">
|
||||
|
|
@ -404,7 +458,7 @@ Style your shapes with strokes, fills, and gradients. Mix your layers with blend
|
|||
<h1><span class="alternating-text"><span>Co-create</span><span>Ideate</span><span>Illustrate</span><span>Generate</span><span>Iterate</span></span> with Imaginate</h1>
|
||||
|
||||
**Imaginate** is a node powered by <a href="https://en.wikipedia.org/wiki/Stable_Diffusion" target="_blank">Stable Diffusion</a> that makes AI-assisted art creation an easy, nondestructive process.
|
||||
<!-- [Learn how](/learn/node-graph/imaginate) it works. -->
|
||||
<!-- [Learn how](/learn/node-graph/imaginate) it works. --////////////////////>
|
||||
|
||||
</div>
|
||||
<div class="diptych">
|
||||
|
|
@ -471,11 +525,13 @@ Style your shapes with strokes, fills, and gradients. Mix your layers with blend
|
|||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
-->
|
||||
|
||||
<!-- ▙ IMAGINATE ▟ -->
|
||||
<!-- -->
|
||||
<!-- ▛ DEMO VIDEO ▜ -->
|
||||
<section id="demo-video">
|
||||
|
||||
<div class="section">
|
||||
|
||||
Watch this timelapse showing the process of mixing traditional vector art (tracing a physical sketch and colorizing it, first two minutes) with using Imaginate to generate a background (last 45 seconds).
|
||||
|
|
@ -487,7 +543,6 @@ Watch this timelapse showing the process of mixing traditional vector art (traci
|
|||
(Recorded in an older version of Graphite from early 2023.)
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
<!-- ▙ DEMO VIDEO ▟ -->
|
||||
<!-- -->
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ twitter = "https://twitter.com/GraphiteEditor/status/1524664010091556864"
|
|||
|
||||
Graphite is an open source, cross-platform digital content creation desktop and web application for 2D graphics editing, photo processing, vector art, digital painting, illustration, data visualization, compositing, and more. Inspired by the open source success of Blender in the 3D domain, it aims to bring 2D content creation to new heights with efficient workflows influenced by Photoshop/Gimp and Illustrator/Inkscape and backed by a powerful node-based, nondestructive approach proven by Houdini, Nuke, Blender, and others.
|
||||
|
||||
The user experience of Graphite is of central importance, offering a meticulously-designed UI catering towards an intuitive and efficient artistic process. Users may draw and edit in the traditional interactive (WYSIWYG) viewport with the Layers panel or jump in or out of the node graph at any time to tweak previous work and construct powerful procedural image generators that seamlessly sync with the interactive viewport. A core principle of the application is its 100% nondestructive workflow that is resolution-agnostic, meaning that raster-style image editing can be infinitely zoomed and scaled to arbitrary resolutions at a later time because editing is done by recording brush strokes, vector shapes, and other manipulations parametrically.
|
||||
The user experience of Graphite is of central importance, offering a meticulously-designed UI catering towards an intuitive and efficient artistic process. Users may draw and edit in the traditional interactive (WYSIWYG) viewport with the Layers panel or jump in or out of the node graph at any time to tweak previous work and construct powerful procedural image generators that seamlessly sync with the interactive viewport. A core principle of the application is its 100% nondestructive workflow that is resolution-independent, meaning that raster-style image editing can be infinitely zoomed and scaled to arbitrary resolutions at a later time because editing is done by recording brush strokes, vector shapes, and other manipulations parametrically.
|
||||
|
||||
<!-- more -->
|
||||
|
||||
|
|
|
|||
|
|
@ -119,30 +119,34 @@ Always on the bleeding edge and built to last— Graphite is written on a robust
|
|||
<img class="atlas" style="--atlas-index: 13" src="https://static.graphite.rs/icons/icon-atlas-roadmap.png" alt="" />
|
||||
<span>New viewport overlays system</span>
|
||||
</div>
|
||||
<div class="informational ongoing" title="Development Ongoing">
|
||||
<img class="atlas" style="--atlas-index: 15" src="https://static.graphite.rs/icons/icon-atlas-roadmap.png" alt="" />
|
||||
<span>Layer and grid snapping</span>
|
||||
</div>
|
||||
<div class="informational ongoing" title="Development Ongoing">
|
||||
<img class="atlas" style="--atlas-index: 14" src="https://static.graphite.rs/icons/icon-atlas-roadmap.png" alt="" />
|
||||
<span>Resolution-agnostic raster rendering</span>
|
||||
<span>Adaptive resolution raster rendering</span>
|
||||
</div>
|
||||
<div class="informational ongoing" title="Development Ongoing">
|
||||
<img class="atlas" style="--atlas-index: 11" src="https://static.graphite.rs/icons/icon-atlas-roadmap.png" alt="" />
|
||||
<span>WebGPU accelerated rendering</span>
|
||||
</div>
|
||||
<div class="informational ongoing" title="Development Ongoing">
|
||||
<img class="atlas" style="--atlas-index: 15" src="https://static.graphite.rs/icons/icon-atlas-roadmap.png" alt="" />
|
||||
<span>Snapping between layers</span>
|
||||
</div>
|
||||
<div class="informational">
|
||||
<img class="atlas" style="--atlas-index: 6" src="https://static.graphite.rs/icons/icon-atlas-roadmap.png" alt="" />
|
||||
<span>Desktop app with built-in AI models</span>
|
||||
</div>
|
||||
<!-- Alpha Milestone 3 -->
|
||||
<div class="informational heading" title="Expected to begin February 2024" data-year="2024">
|
||||
<h3>— Alpha Milestone 3 —</h3>
|
||||
</div>
|
||||
<div class="informational">
|
||||
<img class="atlas" style="--atlas-index: 6" src="https://static.graphite.rs/icons/icon-atlas-roadmap.png" alt="" />
|
||||
<span>Desktop app with built-in AI models</span>
|
||||
</div>
|
||||
<div class="informational">
|
||||
<img class="atlas" style="--atlas-index: 12" src="https://static.graphite.rs/icons/icon-atlas-roadmap.png" alt="" />
|
||||
<span>Rust-based vector renderer</span>
|
||||
</div>
|
||||
<div class="informational">
|
||||
<img class="atlas" style="--atlas-index: 42" src="https://static.graphite.rs/icons/icon-atlas-roadmap.png" alt="" />
|
||||
<span>Timeline and animation curves</span>
|
||||
</div>
|
||||
<div class="informational">
|
||||
<img class="atlas" style="--atlas-index: 22" src="https://static.graphite.rs/icons/icon-atlas-roadmap.png" alt="" />
|
||||
<span>Select Mode: marquee masking</span>
|
||||
|
|
@ -164,8 +168,8 @@ Always on the bleeding edge and built to last— Graphite is written on a robust
|
|||
<span>Imported SVG file editing</span>
|
||||
</div>
|
||||
<div class="informational">
|
||||
<img class="atlas" style="--atlas-index: 42" src="https://static.graphite.rs/icons/icon-atlas-roadmap.png" alt="" />
|
||||
<span>Timeline and renderer for animation</span>
|
||||
<img class="atlas" style="--atlas-index: 30" src="https://static.graphite.rs/icons/icon-atlas-roadmap.png" alt="" />
|
||||
<span>CAD-like constraint relationships</span>
|
||||
</div>
|
||||
<!-- Alpha Milestone 4 -->
|
||||
<div class="informational heading" title="Expected to begin February 2025" data-year="2025">
|
||||
|
|
@ -245,11 +249,7 @@ Always on the bleeding edge and built to last— Graphite is written on a robust
|
|||
</div>
|
||||
<div class="informational">
|
||||
<img class="atlas" style="--atlas-index: 21" src="https://static.graphite.rs/icons/icon-atlas-roadmap.png" alt="" />
|
||||
<span>Procedural paint brush styling</span>
|
||||
</div>
|
||||
<div class="informational">
|
||||
<img class="atlas" style="--atlas-index: 30" src="https://static.graphite.rs/icons/icon-atlas-roadmap.png" alt="" />
|
||||
<span>CAD-like constraint solver</span>
|
||||
<span>Procedural styling of paint brushes</span>
|
||||
</div>
|
||||
<div class="informational">
|
||||
<img class="atlas" style="--atlas-index: 31" src="https://static.graphite.rs/icons/icon-atlas-roadmap.png" alt="" />
|
||||
|
|
@ -285,7 +285,7 @@ Always on the bleeding edge and built to last— Graphite is written on a robust
|
|||
</div>
|
||||
<div class="informational">
|
||||
<img class="atlas" style="--atlas-index: 48" src="https://static.graphite.rs/icons/icon-atlas-roadmap.png" alt="" />
|
||||
<span>SVG animation</span>
|
||||
<span>SVG animation authorship</span>
|
||||
</div>
|
||||
<div class="informational">
|
||||
<img class="atlas" style="--atlas-index: 43" src="https://static.graphite.rs/icons/icon-atlas-roadmap.png" alt="" />
|
||||
|
|
|
|||
|
|
@ -21,7 +21,13 @@ Additional manual chapters are being added over time. Check back often!
|
|||
|
||||
## Jump right in
|
||||
|
||||
If you're eager to skip the reading, head straight to the [hands-on quickstart video](./introduction) in the next chapter for a beginner project walkthrough you can follow along with.
|
||||
<!-- If you're eager to skip the reading, head straight to the [hands-on quickstart video](./introduction) in the next chapter for a beginner project walkthrough you can follow along with. -->
|
||||
|
||||
The fastest way to get started is to watch and follow along with the steps in the hands-on quickstart video:
|
||||
|
||||
<div class="video-embed aspect-16x9">
|
||||
<img data-video-embed="7gjUhl_3X10" src="https://static.graphite.rs/content/learn/introduction/tutorial-1-vector-art-quickstart-youtube.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Graphite Tutorial 1 - Hands-On Quickstart" />
|
||||
</div>
|
||||
|
||||
## Need help?
|
||||
|
||||
|
|
|
|||
|
|
@ -8,9 +8,15 @@ order = 1
|
|||
js = ["video-embed.js"]
|
||||
+++
|
||||
|
||||
Before taking the time to read the coming chapters, let's build some context by jumping straight into a small project that you can follow along with. That way you will have a mental framework for the topics explained in the rest of this manual.
|
||||
<!-- Before taking the time to read the coming chapters, let's build some context by jumping straight into a small project that you can follow along with. That way you will have a mental framework for the topics explained in the rest of this manual. -->
|
||||
|
||||
## A hands-on quickstart
|
||||
Begin learning Graphite by watching the introductory tutorial videos below.
|
||||
|
||||
One is available now, and more will be released on a regular basis throughout early 2024.
|
||||
|
||||
## Tutorial series
|
||||
|
||||
### Video 1
|
||||
|
||||
<!-- You can follow along with this starter project either by watching the tutorial video or referencing the step-by-step breakdown. -->
|
||||
|
||||
|
|
@ -18,6 +24,10 @@ Before taking the time to read the coming chapters, let's build some context by
|
|||
<img data-video-embed="7gjUhl_3X10" src="https://static.graphite.rs/content/learn/introduction/tutorial-1-vector-art-quickstart-youtube.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Graphite Tutorial 1 - Hands-On Quickstart" />
|
||||
</div>
|
||||
|
||||
### Video 2
|
||||
|
||||
*Coming soon.*
|
||||
|
||||
<!-- TODO -->
|
||||
<!-- - Video tutorial -->
|
||||
<!-- - Step-by-step written form -->
|
||||
|
|
|
|||
|
|
@ -77,7 +77,7 @@ order = 1 # Page number after chapter intro
|
|||
- Data flow
|
||||
- Rasterization
|
||||
- Raster editing
|
||||
- Resolution-agnostic sampling
|
||||
- Adaptive resolution sampling
|
||||
- Compositing and data flow
|
||||
- Caching
|
||||
- Predictive caching
|
||||
|
|
|
|||
|
|
@ -414,6 +414,21 @@ summary {
|
|||
}
|
||||
}
|
||||
|
||||
.status-flag {
|
||||
background: var(--color-crimson);
|
||||
white-space: nowrap;
|
||||
color: white;
|
||||
font-size: 0.4em;
|
||||
padding: 0.2em 0.4em;
|
||||
padding-top: 0.1em;
|
||||
position: relative;
|
||||
top: -0.2em;
|
||||
font-family: "EB Garamond", Garamond, serif;
|
||||
font-feature-settings: "lnum";
|
||||
line-height: 1.2;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.video-embed {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
|
|
|||
|
|
@ -1,14 +1,3 @@
|
|||
.section h2 .status-flag {
|
||||
white-space: nowrap;
|
||||
background: var(--color-flamingo);
|
||||
color: white;
|
||||
font-size: 0.4em;
|
||||
padding: 0.2em 0.4em;
|
||||
padding-top: 0.1em;
|
||||
position: relative;
|
||||
top: -0.2em;
|
||||
}
|
||||
|
||||
#roadmap {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
|
|
|
|||
|
|
@ -104,7 +104,17 @@
|
|||
|
||||
// ▛ TODAY AND TOMORROW ▜
|
||||
// ▙ TODAY AND TOMORROW ▟
|
||||
//
|
||||
|
||||
// ▛ DISCIPLINES ▜
|
||||
#disciplines .section {
|
||||
align-items: center;
|
||||
|
||||
.informational-group .informational {
|
||||
margin-top: 40px;
|
||||
}
|
||||
}
|
||||
// ▙ DISCIPLINES ▟
|
||||
|
||||
// ▛ COMMUNITY ▜
|
||||
#community {
|
||||
background-color: var(--color-mustard);
|
||||
|
|
@ -255,22 +265,24 @@
|
|||
}
|
||||
// ▙ COMMUNITY ▟
|
||||
|
||||
// ▛ JUMP RIGHT IN ▜
|
||||
#jump-right-in {
|
||||
max-width: 1000px;
|
||||
|
||||
.section {
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
// ▙ JUMP RIGHT IN ▟
|
||||
|
||||
// ▛ PROCEDURALISM ▜
|
||||
#proceduralism .section {
|
||||
#proceduralism .section,
|
||||
#proceduralism-demo .section,
|
||||
#proceduralism-features .section {
|
||||
align-items: center;
|
||||
}
|
||||
// ▙ PROCEDURALISM ▟
|
||||
|
||||
// ▛ DISCIPLINES ▜
|
||||
#disciplines .section {
|
||||
align-items: center;
|
||||
|
||||
.informational-group .informational {
|
||||
margin-top: 40px;
|
||||
}
|
||||
}
|
||||
// ▙ DISCIPLINES ▟
|
||||
|
||||
// ▛ FUNDRAISING ▜
|
||||
#fundraising {
|
||||
background-color: var(--color-cove);
|
||||
|
|
@ -312,73 +324,73 @@
|
|||
// ▙ VECTOR ART ▟
|
||||
|
||||
// ▛ IMAGINATE ▜
|
||||
#imaginate {
|
||||
> .section {
|
||||
align-items: center;
|
||||
// #imaginate {
|
||||
// > .section {
|
||||
// align-items: center;
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
// h1 {
|
||||
// text-align: center;
|
||||
|
||||
.alternating-text {
|
||||
position: relative;
|
||||
// .alternating-text {
|
||||
// position: relative;
|
||||
|
||||
span {
|
||||
// Move left by half (since it's centered) the average (half the 74px difference) of the variance in word lengths
|
||||
margin-left: calc(-1.54em / 2 / 2);
|
||||
opacity: 0;
|
||||
$alternate-duration: 15s;
|
||||
$alternate-words: 5;
|
||||
animation: $alternate-duration infinite linear 0s fade-word;
|
||||
// span {
|
||||
// // Move left by half (since it's centered) the average (half the 74px difference) of the variance in word lengths
|
||||
// margin-left: calc(-1.54em / 2 / 2);
|
||||
// opacity: 0;
|
||||
// $alternate-duration: 15s;
|
||||
// $alternate-words: 5;
|
||||
// animation: $alternate-duration infinite linear 0s fade-word;
|
||||
|
||||
// The 1st child is the widest
|
||||
&:not(:nth-child(1)) {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
// // The 1st child is the widest
|
||||
// &:not(:nth-child(1)) {
|
||||
// position: absolute;
|
||||
// right: 0;
|
||||
// }
|
||||
|
||||
@for $i from 1 through $alternate-words {
|
||||
&:nth-child(#{$i}) {
|
||||
animation-delay: ($alternate-duration / $alternate-words * ($i - 1));
|
||||
}
|
||||
}
|
||||
// @for $i from 1 through $alternate-words {
|
||||
// &:nth-child(#{$i}) {
|
||||
// animation-delay: ($alternate-duration / $alternate-words * ($i - 1));
|
||||
// }
|
||||
// }
|
||||
|
||||
@keyframes fade-word {
|
||||
// Fade in at the start (which begins staggered on each item by `animation-delay`)
|
||||
#{0.0%} { opacity: 0; }
|
||||
#{2.5%} { opacity: 1; }
|
||||
// Remain visible for this item's slice of time, then fade out
|
||||
#{0.0% + 100% / ($alternate-words + 1)} { opacity: 1; }
|
||||
#{2.5% + 100% / ($alternate-words + 1)} { opacity: 0; }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// @keyframes fade-word {
|
||||
// // Fade in at the start (which begins staggered on each item by `animation-delay`)
|
||||
// #{0.0%} { opacity: 0; }
|
||||
// #{2.5%} { opacity: 1; }
|
||||
// // Remain visible for this item's slice of time, then fade out
|
||||
// #{0.0% + 100% / ($alternate-words + 1)} { opacity: 1; }
|
||||
// #{2.5% + 100% / ($alternate-words + 1)} { opacity: 0; }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
> .diptych {
|
||||
margin-top: calc(80 * var(--variable-px));
|
||||
// > .diptych {
|
||||
// margin-top: calc(80 * var(--variable-px));
|
||||
|
||||
.section {
|
||||
align-items: center;
|
||||
// .section {
|
||||
// align-items: center;
|
||||
|
||||
h2 {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
// h2 {
|
||||
// text-align: center;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
// #imaginate-creative-concepts-carousel {
|
||||
// margin-top: 20px;
|
||||
// // #imaginate-creative-concepts-carousel {
|
||||
// // margin-top: 20px;
|
||||
|
||||
// .screenshot-details {
|
||||
// justify-content: center;
|
||||
// }
|
||||
// // .screenshot-details {
|
||||
// // justify-content: center;
|
||||
// // }
|
||||
|
||||
// + blockquote {
|
||||
// margin-top: 0;
|
||||
// }
|
||||
// }
|
||||
}
|
||||
// // + blockquote {
|
||||
// // margin-top: 0;
|
||||
// // }
|
||||
// // }
|
||||
// }
|
||||
// ▙ IMAGINATE ▟
|
||||
|
||||
// ▛ DEMO VIDEO ▜
|
||||
|
|
|
|||
|
|
@ -305,19 +305,21 @@ window.addEventListener("DOMContentLoaded", initializeVideoAutoPlay);
|
|||
function initializeVideoAutoPlay() {
|
||||
const VISIBILITY_COVERAGE_FRACTION = 0.25;
|
||||
|
||||
let loaded = false;
|
||||
const players = document.querySelectorAll("[data-auto-play]");
|
||||
players.forEach((player) => {
|
||||
if (!(player instanceof HTMLVideoElement)) return;
|
||||
|
||||
const player = document.querySelector("[data-auto-play]");
|
||||
if (!(player instanceof HTMLVideoElement)) return;
|
||||
|
||||
new IntersectionObserver((entries) => {
|
||||
entries.forEach((entry) => {
|
||||
if (!loaded && entry.intersectionRatio > VISIBILITY_COVERAGE_FRACTION) {
|
||||
player.play();
|
||||
|
||||
loaded = true;
|
||||
};
|
||||
});
|
||||
}, { threshold: VISIBILITY_COVERAGE_FRACTION })
|
||||
let loaded = false;
|
||||
|
||||
new IntersectionObserver((entries) => {
|
||||
entries.forEach((entry) => {
|
||||
if (!loaded && entry.intersectionRatio > VISIBILITY_COVERAGE_FRACTION) {
|
||||
player.play();
|
||||
|
||||
loaded = true;
|
||||
};
|
||||
});
|
||||
}, { threshold: VISIBILITY_COVERAGE_FRACTION })
|
||||
.observe(player);
|
||||
});
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue