Update various content on the website
This commit is contained in:
Keavon Chambers
parent
82ef5c83ae
commit
fb7d5970b3
|
|
@ -366,6 +366,22 @@ Graphite's representation of artwork as a node graph lets you customize, compose
|
|||
</section>
|
||||
<!-- ▙ PROCEDURALISM ▟ -->
|
||||
<!-- -->
|
||||
<!-- ▛ DONATE ▜ -->
|
||||
<section id="donate" class="block">
|
||||
|
||||
<div class="block">
|
||||
|
||||
## Support the mission
|
||||
|
||||
If you aren't paying for your free software, someone else is covering your share. Chip in so Graphite remains sustainable and independent.
|
||||
|
||||
<a href="https://github.com/sponsors/GraphiteEditor" class="button arrow">Donate</a>
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
<!-- ▙ DONATE ▟ -->
|
||||
<!-- -->
|
||||
<!-- ▛ NEWSLETTER ▜ -->
|
||||
<section id="newsletter" class="feature-box-narrow">
|
||||
<div id="newsletter-success"><!-- Used only as a URL hash fragment anchor --></div>
|
||||
|
|
@ -431,25 +447,6 @@ You'll receive your first newsletter email with the next major Graphite news.
|
|||
</section>
|
||||
<!-- ▙ NEWSLETTER ▟ -->
|
||||
<!-- -->
|
||||
<!-- ▛ DONATE ▜ -->
|
||||
<section id="donate" class="feature-box-narrow">
|
||||
|
||||
<div class="block">
|
||||
|
||||
<h1 class="feature-box-header">Support the mission</h1>
|
||||
|
||||
<p class="balance-text">
|
||||
You can help realize Graphite's ambitious vision of building the ultimate 2D creative tool.
|
||||
Graphite is built by a small, dedicated crew of volunteers in need of the resources to grow.
|
||||
</p>
|
||||
|
||||
<a href="https://github.com/sponsors/GraphiteEditor" class="button arrow">Donate</a>
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
<!-- ▙ DONATE ▟ -->
|
||||
<!-- -->
|
||||
<!-- ▛ DIVE IN ▜ -->
|
||||
<section id="dive-in" class="block">
|
||||
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ title = "About Graphite"
|
|||
|
||||
[extra]
|
||||
css = ["about.css"]
|
||||
css_external = ["https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&display=swap"]
|
||||
+++
|
||||
|
||||
<section>
|
||||
|
|
@ -118,7 +119,7 @@ It's easy to learn and teach, yet Graphite's accessible design does not sacrific
|
|||
|
||||
## Keavon Chambers
|
||||
|
||||
*@Keavon* <span class="flag" title="American">🇺🇸</span>
|
||||
*@Keavon* <span class="emoji" title="American">🇺🇸</span>
|
||||
|
||||
*Founder, UI & product design, frontend engineering*
|
||||
|
||||
|
|
@ -131,7 +132,7 @@ Keavon is a creative generalist with a love for the fusion of arts and technolog
|
|||
|
||||
## Dennis Kobert
|
||||
|
||||
*@TrueDoctor* <span class="flag" title="German">🇩🇪</span>
|
||||
*@TrueDoctor* <span class="emoji" title="German">🇩🇪</span>
|
||||
|
||||
*Graphene node engine, research, architecture*
|
||||
|
||||
|
|
@ -144,7 +145,7 @@ Dennis is a mix between a mathematician and a mad scientist. While still enjoyin
|
|||
|
||||
## "Hypercube"
|
||||
|
||||
*@0Hypercube* <span class="flag" title="British">🇬🇧</span>
|
||||
*@0Hypercube* <span class="emoji" title="British">🇬🇧</span>
|
||||
|
||||
*Editor systems, nodes, tools, architecture*
|
||||
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ css = ["features.css"]
|
|||
|
||||
The current alpha version of Graphite is a tool for vector art and graphic design. It also supports a limited, experimental raster editing toolset. All this is built around a central node graph that stores layer data and provides a basic—but continually improving—procedural design and nondestructive editing workflow which is a unique feature among vector editing software.
|
||||
|
||||
Stay tuned for major performance uplifts, a multiplatform desktop app with native rendering speed, and a full suite of raster editing tools being developed throughout 2024.
|
||||
Throughout 2024, stay tuned for major performance improvements, a multiplatform desktop app with native rendering speed, and the beginnings of a full suite of raster editing tools.
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -133,7 +133,7 @@ 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__3.png" alt="" />
|
||||
<span>New vector 2D renderer (with <a target="_blank" href="https://github.com/linebender/vello">Vello</a>)</span>
|
||||
</div>
|
||||
<div class="feature-icon ongoing" title="Development Ongoing">
|
||||
<div class="feature-icon complete" title="Development Complete">
|
||||
<img class="atlas" style="--atlas-index: 26" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
|
||||
<span>Interactive graph auto-layout</span>
|
||||
</div>
|
||||
|
|
@ -153,6 +153,10 @@ Always on the bleeding edge and built to last— Graphite is written on a robust
|
|||
<img class="atlas" style="--atlas-index: 19" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
|
||||
<span>Raw photo processing</span>
|
||||
</div>
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 9" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
|
||||
<span>Graph data attribute spreadsheets</span>
|
||||
</div>
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 41" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
|
||||
<span>Timeline with animation channels</span>
|
||||
|
|
@ -173,17 +177,9 @@ Always on the bleeding edge and built to last— Graphite is written on a robust
|
|||
<img class="atlas" style="--atlas-index: 53" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
|
||||
<span>Local fonts access</span>
|
||||
</div>
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 9" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
|
||||
<span>Graph data attribute spreadsheets</span>
|
||||
</div>
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 5" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
|
||||
<span>Fully functional brush tool</span>
|
||||
</div>
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 17" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
|
||||
<span>Stable document format</span>
|
||||
<span>Rewrite of the basic brush tool</span>
|
||||
</div>
|
||||
<!-- Alpha 4 -->
|
||||
<div class="feature-icon heading" title="Expected to begin February 2025" data-year="2025">
|
||||
|
|
@ -205,6 +201,10 @@ Always on the bleeding edge and built to last— Graphite is written on a robust
|
|||
<img class="atlas" style="--atlas-index: 24" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
|
||||
<span>Reconfigurable workspace panels</span>
|
||||
</div>
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 17" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
|
||||
<span>Stable document format</span>
|
||||
</div>
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 4" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
|
||||
<span>Outliner panel (node graph tree view)</span>
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ title = "Volunteer"
|
|||
|
||||
[extra]
|
||||
css = ["volunteer.css"]
|
||||
css_external = ["https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&display=swap"]
|
||||
+++
|
||||
|
||||
<section>
|
||||
|
|
@ -25,7 +26,7 @@ css = ["volunteer.css"]
|
|||
<img src="https://static.graphite.rs/content/volunteer/code-contributions.avif" class="feature-box-full-image" style="aspect-ratio: 3/1 auto; background: var(--color-seaside)" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.jpg')" alt="Flavor graphic depicting a library of knowledge in a digital realm" />
|
||||
</a>
|
||||
|
||||
**Get started by reading the contributor guide:**
|
||||
Get started by reading the contributor guide:
|
||||
|
||||
<a href="/volunteer/guide" class="button arrow">Contributor guide</a>
|
||||
|
||||
|
|
@ -61,9 +62,9 @@ The Graphite editor is built much like a game engine, split across user interfac
|
|||
<img src="https://static.graphite.rs/content/volunteer/creative-contributions.avif" class="feature-box-full-image" style="aspect-ratio: 3/1 auto; background: var(--color-lemon)" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.jpg')" alt="Flavor graphic depicting a fountain pen, ink pots, and a book" />
|
||||
</a>
|
||||
|
||||
**Ask how to get started by reaching out to a [core team](/about#core-team) member on Discord:**
|
||||
Assign yourself the *"<span class="emoji">🙌</span> Interested in helping with art or marketing"* role in the *#welcome* Discord channel. Then mention your experience and how you'd like to help in the *#introductions* channel.
|
||||
|
||||
<a href="https://discord.graphite.rs" class="button arrow">Reach out on Discord</a>
|
||||
<a href="https://discord.graphite.rs" class="button arrow">Volunteer on Discord</a>
|
||||
|
||||
</div>
|
||||
|
||||
|
|
@ -96,9 +97,9 @@ Help write, edit, and design content for this website, social media, newsletters
|
|||
|
||||
<img src="https://static.graphite.rs/content/volunteer/user-contributions.avif" class="feature-box-full-image" style="aspect-ratio: 3/1 auto; background: var(--color-lilac)" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.jpg')" alt="Flavor graphic depicting a magnifying glass on the search for a software bug" />
|
||||
|
||||
**Ask how to get started by reaching out to a [core team](/about#core-team) member on Discord:**
|
||||
Assign yourself the *"<span class="emoji">🐒</span> Volunteer to get pinged regularly for QA testing"* or *"<span class="emoji">🤖</span> Interested in contributing code"* roles in the *#welcome* Discord channel. In the latter case, drop by the *#development* channel to get advice writing your first node.
|
||||
|
||||
<a href="https://discord.graphite.rs" class="button arrow">Reach out on Discord</a>
|
||||
<a href="https://discord.graphite.rs" class="button arrow">Volunteer on Discord</a>
|
||||
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -6,9 +6,12 @@ aliases = ["/contribute"]
|
|||
|
||||
[extra]
|
||||
book = true
|
||||
css_external = ["https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&display=swap"]
|
||||
+++
|
||||
|
||||
Welcome, potential contributor! We're excited to have you join the Graphite project and it's our goal to make the process as smooth as possible. This guide will serve as your library of knowledge to help you get started contributing to the project. If you find any information missing or unclear, please let us know [through Discord](https://discord.graphite.rs) or submit a pull request to help document the process for future contributors.
|
||||
Welcome, potential contributor! We're excited to have you join the Graphite project and it's our goal to make the process as smooth as possible. This guide will serve as your library of knowledge to help you get started contributing to the project. If you find any information missing or unclear, please let us know through Discord or submit a pull request to help document the process for future contributors.
|
||||
|
||||
The next page will cover how to compile the Graphite source code. But first, make sure you've joined our [Discord server](https://discord.graphite.rs) and assigned yourself the *"<span class="emoji">🤖</span> Interested in contributing code"* role from the *#welcome* channel. Done that? Alright, proceed!
|
||||
|
||||
<p>
|
||||
<img src="https://static.graphite.rs/content/volunteer/code-contributions.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.jpg')" alt="Flavor graphic depicting a library of knowledge in a digital realm" />
|
||||
|
|
|
|||
|
|
@ -21,19 +21,16 @@ Next, install the dependencies required for development builds:
|
|||
```sh
|
||||
cargo install cargo-watch
|
||||
cargo install wasm-pack
|
||||
```
|
||||
|
||||
You'll likely get faster build times if you manually install this specific version of `wasm-bindgen-cli`. It is supposed to be installed automatically but a version mismatch causes it to reinstall every single recompilation. It may need to be manually updated periodically to match the version of the `wasm-bindgen` dependency in [`Cargo.toml`](https://github.com/GraphiteEditor/Graphite/blob/master/Cargo.toml):
|
||||
|
||||
```sh
|
||||
cargo install -f wasm-bindgen-cli@0.2.92
|
||||
```
|
||||
|
||||
On Linux, you may need to install this set of additional packages, for the Tauri parts of our tech stack to work, if you run into issues:
|
||||
Regarding the last one: you'll likely get faster build times if you manually install that specific version of `wasm-bindgen-cli`. It is supposed to be installed automatically but a version mismatch causes it to reinstall every single recompilation. It may need to be manually updated periodically to match the version of the `wasm-bindgen` dependency in [`Cargo.toml`](https://github.com/GraphiteEditor/Graphite/blob/master/Cargo.toml).
|
||||
|
||||
<br />
|
||||
<details>
|
||||
<summary>Click to view</summary>
|
||||
<summary>Linux users: click here</summary>
|
||||
|
||||
On Linux, you likely need to install this set of additional packages which are required by Tauri, even if you're just building the web app:
|
||||
|
||||
```sh
|
||||
# On Debian-based (Ubuntu, Mint, etc.) distributions:
|
||||
|
|
|
|||
|
|
@ -9,37 +9,44 @@ Graphite offers a number of opportunities for students to contribute by building
|
|||
|
||||
Student projects require adherence to a set schedule with regular check-ins, milestones, and evaluations. The structured setting is designed to provide a supportive environment for students to learn and grow as developers while gaining real-world industry experience from collaborating on a sizable software product and remaining accountable to stakeholders. It's our goal to make sure you succeed!
|
||||
|
||||
To date, three student project experiences have been completed successfully. [See below](#successful-past-projects) for summaries to get a feel for what has worked before.
|
||||
|
||||
Use this [contributor guide](../..) to start out with the code. Then when you're ready, reach out through [Discord](https://discord.graphite.rs) and use the `#🎓student-projects` channel to discuss and work towards proposing a project with the Graphite core team.
|
||||
|
||||
## Google Summer of Code
|
||||
|
||||
GSoC is a program offering students a [stipend](https://developers.google.com/open-source/gsoc/help/student-stipends) for successful completion of an internship-style experience with an open source organization. Read about [how it works](https://summerofcode.withgoogle.com/how-it-works/).
|
||||
|
||||
Graphite is [participating](https://summerofcode.withgoogle.com/programs/2024/organizations/graphite) in GSoC 2024 this summer and the proposal formulation period is open now until the April 2 deadline (see the full [timeline](https://developers.google.com/open-source/gsoc/timeline)).
|
||||
Graphite [participated](https://summerofcode.withgoogle.com/programs/2024/organizations/graphite) in GSoC 2024 and we anticipate doing so again in 2025. Getting involved early is a great way to have a head start and stand out next summer.
|
||||
<!-- The proposal formulation period is open now until the April 2 deadline (see the full [timeline](https://developers.google.com/open-source/gsoc/timeline)). -->
|
||||
|
||||
### GSoC Proposals
|
||||
### Writing a proposal
|
||||
|
||||
Writing a good proposal is an important first step that demonstrates your understanding of the project and your ability to plan and execute it. A well-defined proposal will set you up for success throughout the rest of the program.
|
||||
|
||||
You are encouraged to reference the project idea list below to find several potential projects suited to your experience, interest, and choice of scope. Then, you must reach out to a [core team member](/about#core-team) through Discord to discuss your plan in detail before writing a proposal. This will help you understand the project's scope and requirements. It will also help us understand your background and capabilities to offer you feedback and suggestions for the best outcome in the competitive applicant selection process.
|
||||
You are encouraged to reference the project idea list below to find several potential projects suited to your experience, interest, and choice of scope. Then, you must reach out to a [core team member](/about#core-team) through Discord to discuss your plan in detail before writing a proposal. This will help you understand the project's scope and requirements and develop a detailed timeline for your expected summer-long work schedule. Importantly, it will also help us understand your background and capabilities to offer you feedback and suggestions for the best outcome in the competitive applicant selection process.
|
||||
|
||||
When it comes to writing the proposal, which you will submit to the GSoC application website, we offer some guidelines below:
|
||||
|
||||
- **Proposal structure:** Please consult the [Blender GSoC application template](https://developer.blender.org/docs/programs/gsoc/application_template/) as reference for our desired format. Remember: don't waste your—and our—time restating information that we already know, like background information about Graphite or the underlying technologies; we want to hear your thoughts and plans about what you uniquely bring to the table and how you will execute the project. It's not formal. And it will not be to your advantage to use an LLM to write your proposal.
|
||||
- **Your background:** We're especially interested in your background and experience, so attaching a résumé or CV is optional but highly recommended and will help us understand your capabilities. If able, please also include links to evidence of past open source contributions or personal projects in the bio section of your proposal. Our goal is to help you learn and grow as a productive open source software engineer, not to help you learn to program from scratch, so any such evidence will help us understand your potential as a self-motivated contributor to the open source community.
|
||||
- **Prior PRs:** If you have made any contributions to Graphite and/or similar open source projects, please include links to your pull requests in your proposal. We put significant extra weight towards applicants who have already made successful contributions to Graphite because this shows your ability to work in a professional capacity with our team and demonstrates your interest in Graphite in particular (as opposed to a shotgun approach to GSoC applications). You can also state that you'll submit your first PRs (we encourage at least two) after the application deadline on [April 2](https://developers.google.com/open-source/gsoc/timeline#april_2_-_1800_utc), but before we make our final selections a couple days prior to [April 24](https://developers.google.com/open-source/gsoc/timeline#april_24_-_1800_utc). We are very likely to reject applicants who have not made meaningful contributions to Graphite by that time.
|
||||
|
||||
<!-- TODO: Explain how we want a proposal structured -->
|
||||
- **Proposal structure:** Please consult the [Blender GSoC application template](https://developer.blender.org/docs/programs/gsoc/application_template/) as reference for our desired format. For project ideas already listed below, omit the "Benefits" section. Remember: don't waste your—and our—time restating information that we already know, like background info about Graphite or our tech stack; we just want to hear your thoughts and plans about what you uniquely bring to the table and how you'll execute the project. Proposals should be utilitarian, not formal, while also demonstrating your professional communication skills. Using an LLM to write your proposal won't be to your advantage.
|
||||
- **Experience:** We're especially interested in your background and work experience, so attaching a résumé or CV is an optional but recommended way to help us understand your capabilities. If able, please also include links to past open source contributions or personal projects in the bio section. Our goal is to provide an environment for you to learn and grow as a productive software engineer and team collaborator, not to help you learn the basics of coding, so any included work examples will help us understand your potential as a self-motivated contributor to the open source community.
|
||||
- **Work timeline:** Your goal is to write a proposal that inspires confidence in your ability to successfully complete the project, which means understanding in detail what's involved at a technical level and how you plan to tackle it. A detailed work timeline is the most important written part of your proposal. It should be broken into weekly or bi-weekly milestones with a couple sentences of technical detail. The summary in the project idea list below doesn't give enough information to develop a timeline, so you'll need to discuss this with the core team on Discord.
|
||||
- **Prior PRs:** The largest factor in our selection decision will be the quality and extent of your prior contributions to Graphite made during the proposal formulation period (or before, if applicable). Include a link to `https://github.com/GraphiteEditor/Graphite/commits?author=YOUR_GITHUB_USERNAME` in your proposal and feel free to write up a summary of what you've contributed and learned from the process. You may also keep contributing during the month after applications close, before we've finalized our selections, for those additional PRs to be considered.
|
||||
|
||||
## Project idea list
|
||||
|
||||
In addition to the detailed projects below, here are some loose ideas that may be developed into full project options before the next GSoC application period:
|
||||
- Color management for HDR/WCG
|
||||
- Sophisticated text layout system
|
||||
- Traditional brush engine
|
||||
- [Procedural brush engine](https://github.com/Keavon/Brush-Nodes)
|
||||
- Image processing algorithms for photography
|
||||
|
||||
<!--
|
||||
TODO: Add to the completed projects list after successful completion.
|
||||
|
||||
### Port LibRaw to Rust
|
||||
|
||||
*For Graphite to support editing photos from professional digital cameras, it needs a raw decoding/processing library.*
|
||||
|
||||
<!-- - **Possible Mentors:** [Keavon](/about#keavon), [Dennis](/about#dennis), [Hypercube](/about#hypercube) -->
|
||||
- **Needed Skills:** Rust, C++, binary format parsing
|
||||
- **Project Size:** Large *(GSoC: 350 hours)*
|
||||
- **Difficulty:** Hard
|
||||
|
|
@ -50,38 +57,7 @@ For Graphite to work as a photo editing app, it needs to import raw photos. Thes
|
|||
Graphite needs a library written in pure Rust with a suitable (non-GPL) license, which does not currently exist in the ecosystem, so we need to create one ourselves. LibRaw is a common C++ library that supports most camera brands and formats and has a compatible license. Since raw formats are rarely documented by camera manufacturers, porting LibRaw to Rust is the most practical approach.
|
||||
|
||||
This project involves diving into the LibRaw source code (~44,000 lines), understanding its architecture, and translating its pieces to idiomatic Rust. Because of Rust's differences from C++, this is not likely to be as simple as a 1:1 source code translation. The student should have strong familiarity with the two languages, experience exploring moderately large code bases, working with binary format parsing, and ideally some knowledge of color science.
|
||||
|
||||
### Node graph auto layout
|
||||
|
||||
*Graphite's graph UI needs a system to automatically arrange layers and nodes given incremental changes to the graph contents.*
|
||||
|
||||
<!-- - **Possible Mentors:** [Keavon](/about#keavon) -->
|
||||
- **Needed Skills:** Rust, algorithm design ([constraint solving](https://en.wikipedia.org/wiki/Constraint_satisfaction_problem), [packing](https://en.wikipedia.org/wiki/Packing_problems), [graph drawing](https://en.wikipedia.org/wiki/Graph_drawing))
|
||||
- **Project Size:** Medium *(GSoC: 175 hours)* or Large *(GSoC: 350 hours)*
|
||||
- **Difficulty:** Medium
|
||||
- **Expected Outcomes:** A system that manages the placement of nodes based on a set of layout constraint rules and incremental updates to the graph topology. It should run efficiently, even with large graphs. It should be robust enough to handle a variety of graph topologies and user interactions, producing organized, useful, and stable layouts.
|
||||
|
||||
The Graphite concept is built around a node graph representation of layer stacks, while tools automatically generate and manipulate nodes. When a layer or node is inserted, deleted, moved, or referenced, the graph needs to be reorganized to maintain a clear and useful layout. Users can also interactively expand and collapse groups of nodes which occupies or frees up graph real estate.
|
||||
|
||||
Unlike other node editors that are centered around manual graph editing, where users are fully in charge of node placements within one large node network, Graphite's node UI is more oriented towards automatic layout management and viewing just parts of the graph at one time. This means the shown graph topology is constantly changing and the layout system needs to cooperatively organize the graph in concert with user actions.
|
||||
|
||||
While general graph layout algorithms are complex and struggle to produce good results in other node editors, Graphite's graph topology is more constrained and predictable, which makes it possible to design a layout system that can produce good results. Nodes tend to be organized into rows, and layers into columns (see the image in the project below). This turns the problem into more of a constraint-based, axis-aligned packing problem.
|
||||
|
||||
### Shader-driven graph UI rewrite
|
||||
|
||||
*Graphite's node graph UI needs to be rewritten using a shader-based rendering system.*
|
||||
|
||||
<!-- - **Possible Mentors:** [Keavon](/about#keavon), [Dennis](/about#dennis) -->
|
||||
- **Needed Skills:** Rust, WGPU, computer graphics, shader programming
|
||||
- **Project Size:** Large *(GSoC: 350 hours)*
|
||||
- **Difficulty:** Hard
|
||||
- **Expected Outcomes:** A reimplemented graph UI that draws nodes, layers, connections, thumbnails, text, etc. with a custom shader UI rendering system written with WGPU.
|
||||
|
||||
The current graph UI is implemented using HTML/CSS and SVG, which is too slow for large graphs and lacks the flexibility to create the desired visual effects like frosted glass. The new system should be able to handle thousands of nodes with ease, and it should be able to render all the visual effects that are envisioned in the design mockup:
|
||||
|
||||
<img src="https://static.graphite.rs/content/index/gui-mockup-nodes__5.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Node graph UI mockup" data-carousel-image />
|
||||
|
||||
The proposed system is a custom immediate mode renderer built with shader programming. At a minimum, it should replicate present graph interaction functionality, but stretch goals would go beyond that to include various graph quality-of-life features.
|
||||
-->
|
||||
|
||||
### Marquee selection masking
|
||||
|
||||
|
|
@ -89,7 +65,7 @@ The proposed system is a custom immediate mode renderer built with shader progra
|
|||
|
||||
<!-- - **Possible Mentors:** [Keavon](/about#keavon), [Hypercube](/about#hypercube) -->
|
||||
- **Needed Skills:** Rust, computer graphics
|
||||
- **Project Size:** Medium *(GSoC: 175 hours)*
|
||||
- **Project Size:** Large *(GSoC: 350 hours)*
|
||||
- **Difficulty:** Medium
|
||||
- **Expected Outcomes:** Complete implementation of Mask mode and its marquee selection. Marching ants visualization shader effect. Integration of selection mask with the node graph and raster editing tools. Useful raster editing workflow.
|
||||
|
||||
|
|
@ -127,7 +103,7 @@ Based on the experience and insight brought to the table by the student, the nat
|
|||
|
||||
<!-- - **Possible Mentors:** [Keavon](/about#keavon) -->
|
||||
- **Needed Skills:** Rust, web (Svelte, CSS, TypeScript)
|
||||
- **Project Size:** Small *(GSoC: 90 hours)* or Medium *(GSoC: 175 hours)*
|
||||
- **Project Size:** Medium *(GSoC: 175 hours)* or Large *(GSoC: 350 hours)*
|
||||
- **Difficulty:** Medium
|
||||
- **Expected Outcomes:** An improved system for defining widget layouts with better control and flexibility over arrangement and dynamic data binding. Reduction in boilerplate and plumbing required to define each new layout. Better control of styling between rows.
|
||||
|
||||
|
|
@ -137,13 +113,13 @@ The present system is very row-centric, which makes it challenging to create mul
|
|||
|
||||
Students should have a good level of familiarity with Rust design patterns to envision, prototype, propose, and robustly implement a new system that can handle the complexity of Graphite's use cases. The size of this project can vary depending on the proposal's scope and extent of refactoring to these and adjacent systems.
|
||||
|
||||
<!-- ### Node data table editor
|
||||
### Node data table editor
|
||||
|
||||
*The node graph data model for procedural content generation can be thought of as a spreadsheet, which needs a dedicated viewer/editor panel.*
|
||||
|
||||
<!-- - **Possible Mentors:** [Keavon](/about#keavon) -->
|
||||
- **Needed Skills:** Rust, web (Svelte, TypeScript)
|
||||
- **Project Size:** Small *(GSoC: 90 hours)*
|
||||
- **Project Size:** Medium *(GSoC: 175 hours)* or Large *(GSoC: 350 hours)*
|
||||
- **Difficulty:** Easy-to-medium
|
||||
- **Expected Outcomes:** A functional panel in the editor that displays the selected node output data as a spreadsheet across multiple domains. Connection to the graph engine to read and edit the data. Virtual scrolling and efficient transfer of data to the frontend.
|
||||
|
||||
|
|
@ -159,7 +135,7 @@ A larger-scoped version of the project can expand this to focus also on displayi
|
|||
|
||||
<!-- - **Possible Mentors:** [Keavon](/about#keavon) -->
|
||||
- **Needed Skills:** Rust, web (Svelte, CSS, SVG, TypeScript)
|
||||
- **Project Size:** Medium *(GSoC: 175 hours)* or Large *(GSoC: 350 hours)*
|
||||
- **Project Size:** Small *(GSoC: 90 hours)* or larger if proposed
|
||||
- **Difficulty:** Easy-to-medium
|
||||
- **Expected Outcomes:** A timeline panel in the editor that can create and edit keyframes and timing curves for animating data channels used by nodes. Ergonomic experience for keyframing properties. Efficient curve interpolation. Rendering optimizations for relatively smooth animation playback.
|
||||
|
||||
|
|
@ -187,7 +163,7 @@ Graphite could benefit from better testing coverage in a number of areas, especi
|
|||
|
||||
<!-- - **Possible Mentors:** [Keavon](/about#keavon), [Dennis](/about#dennis) -->
|
||||
- **Needed Skills:** Rust (especially proc macros)
|
||||
- **Project Size:** Medium *(GSoC: 175 hours)* or Large *(GSoC: 350 hours)*
|
||||
- **Project Size:** Small *(GSoC: 90 hours)* or larger if proposed
|
||||
- **Difficulty:** Medium
|
||||
- **Expected Outcomes:** A system built from proc macros which can generate useful visualizations of Graphite's system architecture. Depending on proposal scope, this can include static visualizations added to the documentation, dynamic message flow visualizations for debugging, and tools to help identify redundant message traffic.
|
||||
|
||||
|
|
@ -216,6 +192,24 @@ As is the case with all projects, please discuss this with us on Discord to fles
|
|||
|
||||
## Successful past projects
|
||||
|
||||
### 2024: Node graph auto layout
|
||||
|
||||
Affiliation: GSoC 2024
|
||||
Duration: 3 months
|
||||
Student: Adam Gerhant
|
||||
|
||||
<https://summerofcode.withgoogle.com/programs/2024/projects/gvbBoCpT>
|
||||
|
||||
*Graphite's graph UI needs a system to automatically arrange layers and nodes given incremental changes to the graph contents.*
|
||||
|
||||
**Outcomes:** A system that manages the placement of nodes based on a set of layout constraint rules and incremental updates to the graph topology. It should run efficiently, even with large graphs. It should be robust enough to handle a variety of graph topologies and user interactions, producing organized, useful, and stable layouts.
|
||||
|
||||
The Graphite concept is built around a node graph representation of layer stacks, while tools automatically generate and manipulate nodes. When a layer or node is inserted, deleted, moved, or referenced, the graph needs to be reorganized to maintain a clear and useful layout. Users can also interactively expand and collapse groups of nodes which occupies or frees up graph real estate.
|
||||
|
||||
Unlike other node editors that are centered around manual graph editing, where users are fully in charge of node placements within one large node network, Graphite's node UI is more oriented towards automatic layout management and viewing just parts of the graph at one time. This means the shown graph topology is constantly changing and the layout system needs to cooperatively organize the graph in concert with user actions.
|
||||
|
||||
While general graph layout algorithms are complex and struggle to produce good results in other node editors, Graphite's graph topology is more constrained and predictable, which makes it possible to design a layout system that can produce good results. Nodes tend to be organized into rows, and layers into columns. This turns the problem into more of a constraint-based, axis-aligned packing problem.
|
||||
|
||||
### 2023: Bezier-rs library
|
||||
|
||||
Affiliation: University of Waterloo, Ontario, Canada
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
@import url('https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&display=swap');
|
||||
|
||||
.loading-data:empty::after {
|
||||
content: "(loading...)";
|
||||
font-style: italic;
|
||||
|
|
@ -32,8 +30,7 @@
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
.flag {
|
||||
font-family: "Noto Color Emoji", sans-serif;
|
||||
.emoji {
|
||||
vertical-align: middle;
|
||||
font-size: 1.5em;
|
||||
margin-left: 0.25em;
|
||||
|
|
|
|||
|
|
@ -682,6 +682,13 @@ hr,
|
|||
}
|
||||
}
|
||||
|
||||
// Using this requires adding this line to the page's frontmatter:
|
||||
// css_external = ["https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&display=swap"]
|
||||
.emoji {
|
||||
font-family: "Noto Color Emoji", sans-serif;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
// =======
|
||||
// LAYOUTS
|
||||
// =======
|
||||
|
|
|
|||
|
|
@ -226,6 +226,9 @@
|
|||
}
|
||||
// ▙ PROCEDURALISM ▟
|
||||
|
||||
// ▛ DONATE ▜
|
||||
// ▙ DONATE ▟
|
||||
|
||||
// ▛ NEWSLETTER ▜
|
||||
#newsletter {
|
||||
background-color: var(--color-peach);
|
||||
|
|
@ -384,12 +387,6 @@
|
|||
}
|
||||
// ▙ NEWSLETTER ▟
|
||||
|
||||
// ▛ DONATE ▜
|
||||
#donate {
|
||||
background-color: var(--color-peach);
|
||||
}
|
||||
// ▙ DONATE ▟
|
||||
|
||||
// ▛ DIVE IN ▜
|
||||
#dive-in {
|
||||
.video-container {
|
||||
|
|
@ -421,13 +418,8 @@
|
|||
|
||||
// ▛ RECENT NEWS ▜
|
||||
#recent-news {
|
||||
background-color: var(--color-navy);
|
||||
color: var(--color-white);
|
||||
background-color: var(--color-parchment);
|
||||
|
||||
a {
|
||||
color: var(--color-mustard);
|
||||
}
|
||||
|
||||
.banner img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
|
|
|
|||
|
|
@ -28,9 +28,13 @@
|
|||
{%- endblock %}
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link href="https://fonts.googleapis.com/css2?family=Bona+Nova:wght@700&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet" />
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bona+Nova:wght@700&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" />
|
||||
<link rel="stylesheet" href="/base.css" />
|
||||
<link rel="stylesheet" href="/syntax-highlighting.css" />
|
||||
{%- set extra_css_external = page.extra.css_external | default(value = []) | concat(with = css_external | default(value = [])) -%}
|
||||
{% for css_path_external in extra_css_external %}
|
||||
<link rel="stylesheet" href="{{ css_path_external | safe }}" />
|
||||
{%- endfor %}
|
||||
{%- set extra_css = page.extra.css | default(value = []) | concat(with = css | default(value = [])) -%}
|
||||
{% for css_path in extra_css %}
|
||||
<link rel="stylesheet" href="/{{ css_path | safe }}" />
|
||||
|
|
|
|||
Loading…
Reference in New Issue