From 45de49fa037c04bfcc1da4674f2d9449400e8d22 Mon Sep 17 00:00:00 2001 From: Keavon Chambers Date: Mon, 8 Jan 2024 10:49:25 -0800 Subject: [PATCH] Show off procedural generation on the website --- website/content/_index.md | 163 ++++++++++++------ ...n-for-the-future-of-2d-content-creation.md | 2 +- website/content/features.md | 34 ++-- website/content/learn/_index.md | 8 +- website/content/learn/introduction/_index.md | 14 +- .../guide/product-design/product-outline.md | 2 +- website/sass/base.scss | 15 ++ website/sass/features.scss | 11 -- website/sass/index.scss | 146 +++++++++------- website/static/js/image-interaction.js | 28 +-- 10 files changed, 256 insertions(+), 167 deletions(-) diff --git a/website/content/_index.md b/website/content/_index.md index 890692c7..8b463408 100644 --- a/website/content/_index.md +++ b/website/content/_index.md @@ -103,10 +103,10 @@ js = ["image-interaction.js", "video-embed.js"] Valley of Spires — Open this artwork to explore it yourself.

- 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!

- 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!

@@ -120,7 +120,7 @@ js = ["image-interaction.js", "video-embed.js"]
-# Graphite today +# Graphite today alpha release
@@ -128,12 +128,15 @@ js = ["image-interaction.js", "video-embed.js"] Vector graphics editing
- + Node-based layers
- - AI-assisted art creation + + + + + Procedural design workflow
@@ -175,6 +178,45 @@ Graphite is a lightweight vector graphics editor that runs offline in your brows + +
+
+ +# 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)*. + +
+
+ + Graphic Design +
+
+ + Image Editing +
+
+ + Digital Painting +
+
+ + Motion Graphics +
+
+ + VFX Compositing +
+
+ + Desktop Publishing +
+
+ +
+
+ +
@@ -248,18 +290,58 @@ You'll receive your first newsletter email with the next major Graphite news.
- + + +
+
+ +# Jump right in + +**Get started with Graphite by following along to a hands-on quickstart tutorial.** + +
+ Graphite Tutorial 1 - Hands-On Quickstart +
+ +
+
+ +
# 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. + +
+
+ +
+
+ +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. Click here to explore this demo and try dragging the wire layer's points with the Path tool (). + +
+ +
+ +
+
+ +
+
+ +Graphite's data-driven approach to graphic design affords unique capabilities (while in alpha, these remain a work in progress):
- + Fully nondestructive editing with node-driven layers
@@ -267,7 +349,8 @@ Graphite's data-driven approach to graphic design affords some unique capabiliti Infinitely scalable raster content with no pixelation
- + + Integrated generative AI models and graphics algorithms
@@ -280,45 +363,6 @@ Graphite's data-driven approach to graphic design affords some unique capabiliti
- -
-
- -# 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): - -
-
- - Graphic Design -
-
- - Image Editing -
-
- - Digital Painting -
-
- - Desktop Publishing -
-
- - VFX Compositing -
-
- - Motion Graphics -
-
- -
-
- -
@@ -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. +

+

+Make vector art out of shapes ranging from simple geometric primitives to complex Bézier curves. +
+Style shapes with strokes, fills, and gradients. Mix layers with blend modes. Then export as an image or SVG.
+

+
+ + Layer and grid snapping +
- Resolution-agnostic raster rendering + Adaptive resolution raster rendering
WebGPU accelerated rendering
-
- - Snapping between layers -
-
- - Desktop app with built-in AI models -

— Alpha Milestone 3 —

+
+ + Desktop app with built-in AI models +
Rust-based vector renderer
+
+ + Timeline and animation curves +
Select Mode: marquee masking @@ -164,8 +168,8 @@ Always on the bleeding edge and built to last— Graphite is written on a robust Imported SVG file editing
- - Timeline and renderer for animation + + CAD-like constraint relationships
@@ -245,11 +249,7 @@ Always on the bleeding edge and built to last— Graphite is written on a robust
- Procedural paint brush styling -
-
- - CAD-like constraint solver + Procedural styling of paint brushes
@@ -285,7 +285,7 @@ Always on the bleeding edge and built to last— Graphite is written on a robust
- SVG animation + SVG animation authorship
diff --git a/website/content/learn/_index.md b/website/content/learn/_index.md index 29d52a48..f10b4adc 100644 --- a/website/content/learn/_index.md +++ b/website/content/learn/_index.md @@ -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. + + +The fastest way to get started is to watch and follow along with the steps in the hands-on quickstart video: + +
+ Graphite Tutorial 1 - Hands-On Quickstart +
## Need help? diff --git a/website/content/learn/introduction/_index.md b/website/content/learn/introduction/_index.md index febe86df..fe7a4afd 100644 --- a/website/content/learn/introduction/_index.md +++ b/website/content/learn/introduction/_index.md @@ -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. + -## 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 @@ -18,6 +24,10 @@ Before taking the time to read the coming chapters, let's build some context by Graphite Tutorial 1 - Hands-On Quickstart
+### Video 2 + +*Coming soon.* + diff --git a/website/content/volunteer/guide/product-design/product-outline.md b/website/content/volunteer/guide/product-design/product-outline.md index 54c8bd04..a0ee9b3b 100644 --- a/website/content/volunteer/guide/product-design/product-outline.md +++ b/website/content/volunteer/guide/product-design/product-outline.md @@ -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 diff --git a/website/sass/base.scss b/website/sass/base.scss index 7acbe13d..85b8fd4c 100644 --- a/website/sass/base.scss +++ b/website/sass/base.scss @@ -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%; diff --git a/website/sass/features.scss b/website/sass/features.scss index 8cefcba5..492eacaa 100644 --- a/website/sass/features.scss +++ b/website/sass/features.scss @@ -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; diff --git a/website/sass/index.scss b/website/sass/index.scss index 05e9340c..e49c3020 100644 --- a/website/sass/index.scss +++ b/website/sass/index.scss @@ -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 ▜ diff --git a/website/static/js/image-interaction.js b/website/static/js/image-interaction.js index f0a2b4c1..80ece5ad 100644 --- a/website/static/js/image-interaction.js +++ b/website/static/js/image-interaction.js @@ -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); + }); }