From 181708a1c0f4920f7491df4516b0de3f61993391 Mon Sep 17 00:00:00 2001 From: Matthias Vogelgesang Date: Mon, 28 Aug 2023 22:56:47 +0200 Subject: Compute gradients in Oklab color space --- wgpu/src/shader/quad.wgsl | 26 +++++++++++++++++++++----- 1 file changed, 21 insertions(+), 5 deletions(-) diff --git a/wgpu/src/shader/quad.wgsl b/wgpu/src/shader/quad.wgsl index 023b5a6d..cba7e5a4 100644 --- a/wgpu/src/shader/quad.wgsl +++ b/wgpu/src/shader/quad.wgsl @@ -230,6 +230,18 @@ fn gradient( let unit = normalize(v1); let coord_offset = dot(unit, v2) / length(v1); + let to_lms: mat3x4 = mat3x4( + vec4(0.4121656120, 0.2118591070, 0.0883097947, 0.0), + vec4(0.5362752080, 0.6807189584, 0.2818474174, 0.0), + vec4(0.0514575653, 0.1074065790, 0.6302613616, 0.0), + ); + + let to_rgb: mat3x4 = mat3x4( + vec4( 4.0767245293, -3.3072168827, 0.2307590544, 0.0), + vec4(-1.2681437731, 2.6093323231, -0.3411344290, 0.0), + vec4(-0.0041119885, -0.7034763098, 1.7068625689, 0.0), + ); + //need to store these as a var to use dynamic indexing in a loop //this is already added to wgsl spec but not in wgpu yet var colors_arr = colors; @@ -248,11 +260,15 @@ fn gradient( } if (curr_offset <= coord_offset && coord_offset <= next_offset) { - color = mix(colors_arr[i], colors_arr[i+1], smoothstep( - curr_offset, - next_offset, - coord_offset, - )); + // blend in OKLab + let factor = smoothstep(curr_offset, next_offset, coord_offset); + let lms_a = pow(colors_arr[i] * to_lms, vec3(1.0 / 3.0, 1.0 / 3.0, 1.0 / 3.0)); + let lms_b = pow(colors_arr[i+1] * to_lms, vec3(1.0 / 3.0, 1.0 / 3.0, 1.0 / 3.0)); + let mixed = mix(lms_a, lms_b, factor); + + // back to sRGB + color = to_rgb * (mixed * mixed * mixed); + color.a = mix(colors_arr[i].a, colors_arr[i+1].a, factor); } if (coord_offset >= offsets_arr[last_index]) { -- cgit From 2b746c7b253573c9194844a02afba709839f5910 Mon Sep 17 00:00:00 2001 From: Matthias Vogelgesang Date: Sat, 2 Sep 2023 13:44:45 +0200 Subject: Add gradient picker example --- examples/gradients/Cargo.toml | 8 +++ examples/gradients/src/main.rs | 136 +++++++++++++++++++++++++++++++++++++++++ 2 files changed, 144 insertions(+) create mode 100644 examples/gradients/Cargo.toml create mode 100644 examples/gradients/src/main.rs diff --git a/examples/gradients/Cargo.toml b/examples/gradients/Cargo.toml new file mode 100644 index 00000000..1bc65a9c --- /dev/null +++ b/examples/gradients/Cargo.toml @@ -0,0 +1,8 @@ +[package] +name = "gradients" +version = "0.1.0" +edition = "2021" +publish = false + +[dependencies] +iced = { path = "../.." } diff --git a/examples/gradients/src/main.rs b/examples/gradients/src/main.rs new file mode 100644 index 00000000..d8b7945e --- /dev/null +++ b/examples/gradients/src/main.rs @@ -0,0 +1,136 @@ +use iced::widget::{column, container, row, slider, text}; +use iced::{ + gradient, Alignment, Background, BorderRadius, Color, Element, Length, + Radians, Sandbox, Settings, +}; + +pub fn main() -> iced::Result { + Gradient::run(Settings::default()) +} + +struct Gradient { + first: Color, + second: Color, + angle: f32, +} + +#[derive(Debug, Clone, Copy)] +enum Message { + FirstChanged(Color), + SecondChanged(Color), + AngleChanged(f32), +} + +impl Sandbox for Gradient { + type Message = Message; + + fn new() -> Self { + let first = Color::new(0.2784314, 0.0627451, 0.4117647, 1.0); + let second = Color::new(0.1882353, 0.772549, 0.8235294, 1.0); + + Self { + first, + second, + angle: 0.0, + } + } + + fn title(&self) -> String { + String::from("Color gradient") + } + + fn update(&mut self, message: Message) { + match message { + Message::FirstChanged(color) => self.first = color, + Message::SecondChanged(color) => self.second = color, + Message::AngleChanged(angle) => self.angle = angle, + } + } + + fn view(&self) -> Element { + let first = self.first; + let second = self.second; + let angle = self.angle; + + let gradient_box = container(text("")) + .width(Length::Fill) + .height(Length::Fill) + .center_x() + .center_y() + .style(move |_: &_| { + let gradient = gradient::Linear::new(Radians(angle)) + .add_stop(0.0, first) + .add_stop(1.0, second) + .into(); + + container::Appearance { + text_color: None, + background: Some(Background::Gradient(gradient)), + border_radius: BorderRadius::default(), + border_width: 0.0, + border_color: Color::new(0.0, 0.0, 0.0, 0.0), + } + }); + + let range = 0.0..=1.0; + let l = self.first; + let r = self.second; + + let first_color_picker = row![ + text("First").width(64), + slider(range.clone(), l.r, move |v| { + Message::FirstChanged(Color::new(v, l.g, l.b, l.a)) + }) + .step(0.01), + slider(range.clone(), l.g, move |v| { + Message::FirstChanged(Color::new(l.r, v, l.b, l.a)) + }) + .step(0.01), + slider(range.clone(), l.b, move |v| { + Message::FirstChanged(Color::new(l.r, l.g, v, l.a)) + }) + .step(0.01), + ] + .spacing(8) + .padding(8) + .align_items(Alignment::Center); + + let second_color_picker = row![ + text("Second").width(64), + slider(range.clone(), r.r, move |v| { + Message::SecondChanged(Color::new(v, r.g, r.b, r.a)) + }) + .step(0.01), + slider(range.clone(), r.g, move |v| { + Message::SecondChanged(Color::new(r.r, v, r.b, r.a)) + }) + .step(0.01), + slider(range.clone(), r.b, move |v| { + Message::SecondChanged(Color::new(r.r, r.g, v, r.a)) + }) + .step(0.01), + ] + .spacing(8) + .padding(8) + .align_items(Alignment::Center); + + let angle_picker = row![ + text("Angle").width(64), + slider(0.0..=std::f32::consts::PI * 2.0, self.angle, move |v| { + Message::AngleChanged(v) + }) + .step(0.01) + ] + .spacing(8) + .padding(8) + .align_items(Alignment::Center); + + column![ + first_color_picker, + second_color_picker, + angle_picker, + gradient_box + ] + .into() + } +} -- cgit From 10d0b257f929296b1991a440f62c87487c0076dc Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Thu, 7 Sep 2023 07:24:32 +0200 Subject: Use Oklab color interpolation only with `color::GAMMA_CORRECTION` --- wgpu/src/quad/gradient.rs | 19 +- wgpu/src/quad/solid.rs | 6 +- wgpu/src/shader/color/linear_rgb.wgsl | 3 + wgpu/src/shader/color/oklab.wgsl | 26 +++ wgpu/src/shader/quad.wgsl | 322 --------------------------------- wgpu/src/shader/quad/gradient.wgsl | 205 +++++++++++++++++++++ wgpu/src/shader/quad/solid.wgsl | 99 ++++++++++ wgpu/src/shader/triangle.wgsl | 160 ---------------- wgpu/src/shader/triangle/gradient.wgsl | 134 ++++++++++++++ wgpu/src/shader/triangle/solid.wgsl | 24 +++ wgpu/src/triangle.rs | 35 +++- 11 files changed, 544 insertions(+), 489 deletions(-) create mode 100644 wgpu/src/shader/color/linear_rgb.wgsl create mode 100644 wgpu/src/shader/color/oklab.wgsl create mode 100644 wgpu/src/shader/quad/gradient.wgsl create mode 100644 wgpu/src/shader/quad/solid.wgsl create mode 100644 wgpu/src/shader/triangle/gradient.wgsl create mode 100644 wgpu/src/shader/triangle/solid.wgsl diff --git a/wgpu/src/quad/gradient.rs b/wgpu/src/quad/gradient.rs index 6db37252..a8e83d01 100644 --- a/wgpu/src/quad/gradient.rs +++ b/wgpu/src/quad/gradient.rs @@ -1,3 +1,4 @@ +use crate::graphics::color; use crate::graphics::gradient; use crate::quad::{self, Quad}; use crate::Buffer; @@ -78,7 +79,23 @@ impl Pipeline { device.create_shader_module(wgpu::ShaderModuleDescriptor { label: Some("iced_wgpu.quad.gradient.shader"), source: wgpu::ShaderSource::Wgsl(std::borrow::Cow::Borrowed( - include_str!("../shader/quad.wgsl"), + if color::GAMMA_CORRECTION { + concat!( + include_str!("../shader/quad.wgsl"), + "\n", + include_str!("../shader/quad/gradient.wgsl"), + "\n", + include_str!("../shader/color/oklab.wgsl") + ) + } else { + concat!( + include_str!("../shader/quad.wgsl"), + "\n", + include_str!("../shader/quad/gradient.wgsl"), + "\n", + include_str!("../shader/color/linear_rgb.wgsl") + ) + }, )), }); diff --git a/wgpu/src/quad/solid.rs b/wgpu/src/quad/solid.rs index f8f1e3a5..9bc6b466 100644 --- a/wgpu/src/quad/solid.rs +++ b/wgpu/src/quad/solid.rs @@ -72,7 +72,11 @@ impl Pipeline { device.create_shader_module(wgpu::ShaderModuleDescriptor { label: Some("iced_wgpu.quad.solid.shader"), source: wgpu::ShaderSource::Wgsl(std::borrow::Cow::Borrowed( - include_str!("../shader/quad.wgsl"), + concat!( + include_str!("../shader/quad.wgsl"), + "\n", + include_str!("../shader/quad/solid.wgsl"), + ), )), }); diff --git a/wgpu/src/shader/color/linear_rgb.wgsl b/wgpu/src/shader/color/linear_rgb.wgsl new file mode 100644 index 00000000..a5cf45d4 --- /dev/null +++ b/wgpu/src/shader/color/linear_rgb.wgsl @@ -0,0 +1,3 @@ +fn interpolate_color(from_: vec4, to_: vec4, factor: f32) -> vec4 { + return mix(from_, to_, factor); +} diff --git a/wgpu/src/shader/color/oklab.wgsl b/wgpu/src/shader/color/oklab.wgsl new file mode 100644 index 00000000..0dc37ba6 --- /dev/null +++ b/wgpu/src/shader/color/oklab.wgsl @@ -0,0 +1,26 @@ +const to_lms = mat3x4( + vec4(0.4121656120, 0.2118591070, 0.0883097947, 0.0), + vec4(0.5362752080, 0.6807189584, 0.2818474174, 0.0), + vec4(0.0514575653, 0.1074065790, 0.6302613616, 0.0), +); + +const to_rgb = mat3x4( + vec4( 4.0767245293, -3.3072168827, 0.2307590544, 0.0), + vec4(-1.2681437731, 2.6093323231, -0.3411344290, 0.0), + vec4(-0.0041119885, -0.7034763098, 1.7068625689, 0.0), +); + +fn interpolate_color(from_: vec4, to_: vec4, factor: f32) -> vec4 { + // To Oklab + let lms_a = pow(from_ * to_lms, vec3(1.0 / 3.0, 1.0 / 3.0, 1.0 / 3.0)); + let lms_b = pow(to_ * to_lms, vec3(1.0 / 3.0, 1.0 / 3.0, 1.0 / 3.0)); + let mixed = mix(lms_a, lms_b, factor); + + // Back to linear RGB + var color = to_rgb * (mixed * mixed * mixed); + + // Alpha interpolation + color.a = mix(from_.a, to_.a, factor); + + return color; +} diff --git a/wgpu/src/shader/quad.wgsl b/wgpu/src/shader/quad.wgsl index cba7e5a4..f919cfe2 100644 --- a/wgpu/src/shader/quad.wgsl +++ b/wgpu/src/shader/quad.wgsl @@ -37,325 +37,3 @@ fn select_border_radius(radi: vec4, position: vec2, center: vec2) rx = select(rx, ry, position.y > center.y); return rx; } - -fn unpack_u32(color: vec2) -> vec4 { - let rg: vec2 = unpack2x16float(color.x); - let ba: vec2 = unpack2x16float(color.y); - - return vec4(rg.y, rg.x, ba.y, ba.x); -} - -struct SolidVertexInput { - @location(0) v_pos: vec2, - @location(1) color: vec4, - @location(2) pos: vec2, - @location(3) scale: vec2, - @location(4) border_color: vec4, - @location(5) border_radius: vec4, - @location(6) border_width: f32, -} - -struct SolidVertexOutput { - @builtin(position) position: vec4, - @location(0) color: vec4, - @location(1) border_color: vec4, - @location(2) pos: vec2, - @location(3) scale: vec2, - @location(4) border_radius: vec4, - @location(5) border_width: f32, -} - -@vertex -fn solid_vs_main(input: SolidVertexInput) -> SolidVertexOutput { - var out: SolidVertexOutput; - - var pos: vec2 = input.pos * globals.scale; - var scale: vec2 = input.scale * globals.scale; - - var min_border_radius = min(input.scale.x, input.scale.y) * 0.5; - var border_radius: vec4 = vec4( - min(input.border_radius.x, min_border_radius), - min(input.border_radius.y, min_border_radius), - min(input.border_radius.z, min_border_radius), - min(input.border_radius.w, min_border_radius) - ); - - var transform: mat4x4 = mat4x4( - vec4(scale.x + 1.0, 0.0, 0.0, 0.0), - vec4(0.0, scale.y + 1.0, 0.0, 0.0), - vec4(0.0, 0.0, 1.0, 0.0), - vec4(pos - vec2(0.5, 0.5), 0.0, 1.0) - ); - - out.position = globals.transform * transform * vec4(input.v_pos, 0.0, 1.0); - out.color = input.color; - out.border_color = input.border_color; - out.pos = pos; - out.scale = scale; - out.border_radius = border_radius * globals.scale; - out.border_width = input.border_width * globals.scale; - - return out; -} - -@fragment -fn solid_fs_main( - input: SolidVertexOutput -) -> @location(0) vec4 { - var mixed_color: vec4 = input.color; - - var border_radius = select_border_radius( - input.border_radius, - input.position.xy, - (input.pos + input.scale * 0.5).xy - ); - - if (input.border_width > 0.0) { - var internal_border: f32 = max(border_radius - input.border_width, 0.0); - - var internal_distance: f32 = distance_alg( - input.position.xy, - input.pos + vec2(input.border_width, input.border_width), - input.scale - vec2(input.border_width * 2.0, input.border_width * 2.0), - internal_border - ); - - var border_mix: f32 = smoothstep( - max(internal_border - 0.5, 0.0), - internal_border + 0.5, - internal_distance - ); - - mixed_color = mix(input.color, input.border_color, vec4(border_mix, border_mix, border_mix, border_mix)); - } - - var dist: f32 = distance_alg( - vec2(input.position.x, input.position.y), - input.pos, - input.scale, - border_radius - ); - - var radius_alpha: f32 = 1.0 - smoothstep( - max(border_radius - 0.5, 0.0), - border_radius + 0.5, - dist - ); - - return vec4(mixed_color.x, mixed_color.y, mixed_color.z, mixed_color.w * radius_alpha); -} - -struct GradientVertexInput { - @location(0) v_pos: vec2, - @location(1) @interpolate(flat) colors_1: vec4, - @location(2) @interpolate(flat) colors_2: vec4, - @location(3) @interpolate(flat) colors_3: vec4, - @location(4) @interpolate(flat) colors_4: vec4, - @location(5) @interpolate(flat) offsets: vec4, - @location(6) direction: vec4, - @location(7) position_and_scale: vec4, - @location(8) border_color: vec4, - @location(9) border_radius: vec4, - @location(10) border_width: f32, -} - -struct GradientVertexOutput { - @builtin(position) position: vec4, - @location(1) @interpolate(flat) colors_1: vec4, - @location(2) @interpolate(flat) colors_2: vec4, - @location(3) @interpolate(flat) colors_3: vec4, - @location(4) @interpolate(flat) colors_4: vec4, - @location(5) @interpolate(flat) offsets: vec4, - @location(6) direction: vec4, - @location(7) position_and_scale: vec4, - @location(8) border_color: vec4, - @location(9) border_radius: vec4, - @location(10) border_width: f32, -} - -@vertex -fn gradient_vs_main(input: GradientVertexInput) -> GradientVertexOutput { - var out: GradientVertexOutput; - - var pos: vec2 = input.position_and_scale.xy * globals.scale; - var scale: vec2 = input.position_and_scale.zw * globals.scale; - - var min_border_radius = min(input.position_and_scale.z, input.position_and_scale.w) * 0.5; - var border_radius: vec4 = vec4( - min(input.border_radius.x, min_border_radius), - min(input.border_radius.y, min_border_radius), - min(input.border_radius.z, min_border_radius), - min(input.border_radius.w, min_border_radius) - ); - - var transform: mat4x4 = mat4x4( - vec4(scale.x + 1.0, 0.0, 0.0, 0.0), - vec4(0.0, scale.y + 1.0, 0.0, 0.0), - vec4(0.0, 0.0, 1.0, 0.0), - vec4(pos - vec2(0.5, 0.5), 0.0, 1.0) - ); - - out.position = globals.transform * transform * vec4(input.v_pos, 0.0, 1.0); - out.colors_1 = input.colors_1; - out.colors_2 = input.colors_2; - out.colors_3 = input.colors_3; - out.colors_4 = input.colors_4; - out.offsets = input.offsets; - out.direction = input.direction * globals.scale; - out.position_and_scale = vec4(pos, scale); - out.border_color = input.border_color; - out.border_radius = border_radius * globals.scale; - out.border_width = input.border_width * globals.scale; - - return out; -} - -fn random(coords: vec2) -> f32 { - return fract(sin(dot(coords, vec2(12.9898,78.233))) * 43758.5453); -} - -/// Returns the current interpolated color with a max 8-stop gradient -fn gradient( - raw_position: vec2, - direction: vec4, - colors: array, 8>, - offsets: array, - last_index: i32 -) -> vec4 { - let start = direction.xy; - let end = direction.zw; - - let v1 = end - start; - let v2 = raw_position - start; - let unit = normalize(v1); - let coord_offset = dot(unit, v2) / length(v1); - - let to_lms: mat3x4 = mat3x4( - vec4(0.4121656120, 0.2118591070, 0.0883097947, 0.0), - vec4(0.5362752080, 0.6807189584, 0.2818474174, 0.0), - vec4(0.0514575653, 0.1074065790, 0.6302613616, 0.0), - ); - - let to_rgb: mat3x4 = mat3x4( - vec4( 4.0767245293, -3.3072168827, 0.2307590544, 0.0), - vec4(-1.2681437731, 2.6093323231, -0.3411344290, 0.0), - vec4(-0.0041119885, -0.7034763098, 1.7068625689, 0.0), - ); - - //need to store these as a var to use dynamic indexing in a loop - //this is already added to wgsl spec but not in wgpu yet - var colors_arr = colors; - var offsets_arr = offsets; - - var color: vec4; - - let noise_granularity: f32 = 0.3/255.0; - - for (var i: i32 = 0; i < last_index; i++) { - let curr_offset = offsets_arr[i]; - let next_offset = offsets_arr[i+1]; - - if (coord_offset <= offsets_arr[0]) { - color = colors_arr[0]; - } - - if (curr_offset <= coord_offset && coord_offset <= next_offset) { - // blend in OKLab - let factor = smoothstep(curr_offset, next_offset, coord_offset); - let lms_a = pow(colors_arr[i] * to_lms, vec3(1.0 / 3.0, 1.0 / 3.0, 1.0 / 3.0)); - let lms_b = pow(colors_arr[i+1] * to_lms, vec3(1.0 / 3.0, 1.0 / 3.0, 1.0 / 3.0)); - let mixed = mix(lms_a, lms_b, factor); - - // back to sRGB - color = to_rgb * (mixed * mixed * mixed); - color.a = mix(colors_arr[i].a, colors_arr[i+1].a, factor); - } - - if (coord_offset >= offsets_arr[last_index]) { - color = colors_arr[last_index]; - } - } - - return color + mix(-noise_granularity, noise_granularity, random(raw_position)); -} - -@fragment -fn gradient_fs_main(input: GradientVertexOutput) -> @location(0) vec4 { - let colors = array, 8>( - unpack_u32(input.colors_1.xy), - unpack_u32(input.colors_1.zw), - unpack_u32(input.colors_2.xy), - unpack_u32(input.colors_2.zw), - unpack_u32(input.colors_3.xy), - unpack_u32(input.colors_3.zw), - unpack_u32(input.colors_4.xy), - unpack_u32(input.colors_4.zw), - ); - - let offsets_1: vec4 = unpack_u32(input.offsets.xy); - let offsets_2: vec4 = unpack_u32(input.offsets.zw); - - var offsets = array( - offsets_1.x, - offsets_1.y, - offsets_1.z, - offsets_1.w, - offsets_2.x, - offsets_2.y, - offsets_2.z, - offsets_2.w, - ); - - //TODO could just pass this in to the shader but is probably more performant to just check it here - var last_index = 7; - for (var i: i32 = 0; i <= 7; i++) { - if (offsets[i] > 1.0) { - last_index = i - 1; - break; - } - } - - var mixed_color: vec4 = gradient(input.position.xy, input.direction, colors, offsets, last_index); - - let pos = input.position_and_scale.xy; - let scale = input.position_and_scale.zw; - - var border_radius = select_border_radius( - input.border_radius, - input.position.xy, - (pos + scale * 0.5).xy - ); - - if (input.border_width > 0.0) { - var internal_border: f32 = max(border_radius - input.border_width, 0.0); - - var internal_distance: f32 = distance_alg( - input.position.xy, - pos + vec2(input.border_width, input.border_width), - scale - vec2(input.border_width * 2.0, input.border_width * 2.0), - internal_border - ); - - var border_mix: f32 = smoothstep( - max(internal_border - 0.5, 0.0), - internal_border + 0.5, - internal_distance - ); - - mixed_color = mix(mixed_color, input.border_color, vec4(border_mix, border_mix, border_mix, border_mix)); - } - - var dist: f32 = distance_alg( - input.position.xy, - pos, - scale, - border_radius - ); - - var radius_alpha: f32 = 1.0 - smoothstep( - max(border_radius - 0.5, 0.0), - border_radius + 0.5, - dist); - - return vec4(mixed_color.x, mixed_color.y, mixed_color.z, mixed_color.w * radius_alpha); -} diff --git a/wgpu/src/shader/quad/gradient.wgsl b/wgpu/src/shader/quad/gradient.wgsl new file mode 100644 index 00000000..0754e97f --- /dev/null +++ b/wgpu/src/shader/quad/gradient.wgsl @@ -0,0 +1,205 @@ +struct GradientVertexInput { + @location(0) v_pos: vec2, + @location(1) @interpolate(flat) colors_1: vec4, + @location(2) @interpolate(flat) colors_2: vec4, + @location(3) @interpolate(flat) colors_3: vec4, + @location(4) @interpolate(flat) colors_4: vec4, + @location(5) @interpolate(flat) offsets: vec4, + @location(6) direction: vec4, + @location(7) position_and_scale: vec4, + @location(8) border_color: vec4, + @location(9) border_radius: vec4, + @location(10) border_width: f32, +} + +struct GradientVertexOutput { + @builtin(position) position: vec4, + @location(1) @interpolate(flat) colors_1: vec4, + @location(2) @interpolate(flat) colors_2: vec4, + @location(3) @interpolate(flat) colors_3: vec4, + @location(4) @interpolate(flat) colors_4: vec4, + @location(5) @interpolate(flat) offsets: vec4, + @location(6) direction: vec4, + @location(7) position_and_scale: vec4, + @location(8) border_color: vec4, + @location(9) border_radius: vec4, + @location(10) border_width: f32, +} + +@vertex +fn gradient_vs_main(input: GradientVertexInput) -> GradientVertexOutput { + var out: GradientVertexOutput; + + var pos: vec2 = input.position_and_scale.xy * globals.scale; + var scale: vec2 = input.position_and_scale.zw * globals.scale; + + var min_border_radius = min(input.position_and_scale.z, input.position_and_scale.w) * 0.5; + var border_radius: vec4 = vec4( + min(input.border_radius.x, min_border_radius), + min(input.border_radius.y, min_border_radius), + min(input.border_radius.z, min_border_radius), + min(input.border_radius.w, min_border_radius) + ); + + var transform: mat4x4 = mat4x4( + vec4(scale.x + 1.0, 0.0, 0.0, 0.0), + vec4(0.0, scale.y + 1.0, 0.0, 0.0), + vec4(0.0, 0.0, 1.0, 0.0), + vec4(pos - vec2(0.5, 0.5), 0.0, 1.0) + ); + + out.position = globals.transform * transform * vec4(input.v_pos, 0.0, 1.0); + out.colors_1 = input.colors_1; + out.colors_2 = input.colors_2; + out.colors_3 = input.colors_3; + out.colors_4 = input.colors_4; + out.offsets = input.offsets; + out.direction = input.direction * globals.scale; + out.position_and_scale = vec4(pos, scale); + out.border_color = input.border_color; + out.border_radius = border_radius * globals.scale; + out.border_width = input.border_width * globals.scale; + + return out; +} + +fn random(coords: vec2) -> f32 { + return fract(sin(dot(coords, vec2(12.9898,78.233))) * 43758.5453); +} + +/// Returns the current interpolated color with a max 8-stop gradient +fn gradient( + raw_position: vec2, + direction: vec4, + colors: array, 8>, + offsets: array, + last_index: i32 +) -> vec4 { + let start = direction.xy; + let end = direction.zw; + + let v1 = end - start; + let v2 = raw_position - start; + let unit = normalize(v1); + let coord_offset = dot(unit, v2) / length(v1); + + //need to store these as a var to use dynamic indexing in a loop + //this is already added to wgsl spec but not in wgpu yet + var colors_arr = colors; + var offsets_arr = offsets; + + var color: vec4; + + let noise_granularity: f32 = 0.3/255.0; + + for (var i: i32 = 0; i < last_index; i++) { + let curr_offset = offsets_arr[i]; + let next_offset = offsets_arr[i+1]; + + if (coord_offset <= offsets_arr[0]) { + color = colors_arr[0]; + } + + if (curr_offset <= coord_offset && coord_offset <= next_offset) { + let from_ = colors_arr[i]; + let to_ = colors_arr[i+1]; + let factor = smoothstep(curr_offset, next_offset, coord_offset); + + color = interpolate_color(from_, to_, factor); + } + + if (coord_offset >= offsets_arr[last_index]) { + color = colors_arr[last_index]; + } + } + + return color + mix(-noise_granularity, noise_granularity, random(raw_position)); +} + +@fragment +fn gradient_fs_main(input: GradientVertexOutput) -> @location(0) vec4 { + let colors = array, 8>( + unpack_u32(input.colors_1.xy), + unpack_u32(input.colors_1.zw), + unpack_u32(input.colors_2.xy), + unpack_u32(input.colors_2.zw), + unpack_u32(input.colors_3.xy), + unpack_u32(input.colors_3.zw), + unpack_u32(input.colors_4.xy), + unpack_u32(input.colors_4.zw), + ); + + let offsets_1: vec4 = unpack_u32(input.offsets.xy); + let offsets_2: vec4 = unpack_u32(input.offsets.zw); + + var offsets = array( + offsets_1.x, + offsets_1.y, + offsets_1.z, + offsets_1.w, + offsets_2.x, + offsets_2.y, + offsets_2.z, + offsets_2.w, + ); + + //TODO could just pass this in to the shader but is probably more performant to just check it here + var last_index = 7; + for (var i: i32 = 0; i <= 7; i++) { + if (offsets[i] > 1.0) { + last_index = i - 1; + break; + } + } + + var mixed_color: vec4 = gradient(input.position.xy, input.direction, colors, offsets, last_index); + + let pos = input.position_and_scale.xy; + let scale = input.position_and_scale.zw; + + var border_radius = select_border_radius( + input.border_radius, + input.position.xy, + (pos + scale * 0.5).xy + ); + + if (input.border_width > 0.0) { + var internal_border: f32 = max(border_radius - input.border_width, 0.0); + + var internal_distance: f32 = distance_alg( + input.position.xy, + pos + vec2(input.border_width, input.border_width), + scale - vec2(input.border_width * 2.0, input.border_width * 2.0), + internal_border + ); + + var border_mix: f32 = smoothstep( + max(internal_border - 0.5, 0.0), + internal_border + 0.5, + internal_distance + ); + + mixed_color = mix(mixed_color, input.border_color, vec4(border_mix, border_mix, border_mix, border_mix)); + } + + var dist: f32 = distance_alg( + input.position.xy, + pos, + scale, + border_radius + ); + + var radius_alpha: f32 = 1.0 - smoothstep( + max(border_radius - 0.5, 0.0), + border_radius + 0.5, + dist); + + return vec4(mixed_color.x, mixed_color.y, mixed_color.z, mixed_color.w * radius_alpha); +} + +fn unpack_u32(color: vec2) -> vec4 { + let rg: vec2 = unpack2x16float(color.x); + let ba: vec2 = unpack2x16float(color.y); + + return vec4(rg.y, rg.x, ba.y, ba.x); +} diff --git a/wgpu/src/shader/quad/solid.wgsl b/wgpu/src/shader/quad/solid.wgsl new file mode 100644 index 00000000..ebd6d877 --- /dev/null +++ b/wgpu/src/shader/quad/solid.wgsl @@ -0,0 +1,99 @@ +struct SolidVertexInput { + @location(0) v_pos: vec2, + @location(1) color: vec4, + @location(2) pos: vec2, + @location(3) scale: vec2, + @location(4) border_color: vec4, + @location(5) border_radius: vec4, + @location(6) border_width: f32, +} + +struct SolidVertexOutput { + @builtin(position) position: vec4, + @location(0) color: vec4, + @location(1) border_color: vec4, + @location(2) pos: vec2, + @location(3) scale: vec2, + @location(4) border_radius: vec4, + @location(5) border_width: f32, +} + +@vertex +fn solid_vs_main(input: SolidVertexInput) -> SolidVertexOutput { + var out: SolidVertexOutput; + + var pos: vec2 = input.pos * globals.scale; + var scale: vec2 = input.scale * globals.scale; + + var min_border_radius = min(input.scale.x, input.scale.y) * 0.5; + var border_radius: vec4 = vec4( + min(input.border_radius.x, min_border_radius), + min(input.border_radius.y, min_border_radius), + min(input.border_radius.z, min_border_radius), + min(input.border_radius.w, min_border_radius) + ); + + var transform: mat4x4 = mat4x4( + vec4(scale.x + 1.0, 0.0, 0.0, 0.0), + vec4(0.0, scale.y + 1.0, 0.0, 0.0), + vec4(0.0, 0.0, 1.0, 0.0), + vec4(pos - vec2(0.5, 0.5), 0.0, 1.0) + ); + + out.position = globals.transform * transform * vec4(input.v_pos, 0.0, 1.0); + out.color = input.color; + out.border_color = input.border_color; + out.pos = pos; + out.scale = scale; + out.border_radius = border_radius * globals.scale; + out.border_width = input.border_width * globals.scale; + + return out; +} + +@fragment +fn solid_fs_main( + input: SolidVertexOutput +) -> @location(0) vec4 { + var mixed_color: vec4 = input.color; + + var border_radius = select_border_radius( + input.border_radius, + input.position.xy, + (input.pos + input.scale * 0.5).xy + ); + + if (input.border_width > 0.0) { + var internal_border: f32 = max(border_radius - input.border_width, 0.0); + + var internal_distance: f32 = distance_alg( + input.position.xy, + input.pos + vec2(input.border_width, input.border_width), + input.scale - vec2(input.border_width * 2.0, input.border_width * 2.0), + internal_border + ); + + var border_mix: f32 = smoothstep( + max(internal_border - 0.5, 0.0), + internal_border + 0.5, + internal_distance + ); + + mixed_color = mix(input.color, input.border_color, vec4(border_mix, border_mix, border_mix, border_mix)); + } + + var dist: f32 = distance_alg( + vec2(input.position.x, input.position.y), + input.pos, + input.scale, + border_radius + ); + + var radius_alpha: f32 = 1.0 - smoothstep( + max(border_radius - 0.5, 0.0), + border_radius + 0.5, + dist + ); + + return vec4(mixed_color.x, mixed_color.y, mixed_color.z, mixed_color.w * radius_alpha); +} diff --git a/wgpu/src/shader/triangle.wgsl b/wgpu/src/shader/triangle.wgsl index 3a2b9845..e4c19344 100644 --- a/wgpu/src/shader/triangle.wgsl +++ b/wgpu/src/shader/triangle.wgsl @@ -3,163 +3,3 @@ struct Globals { } @group(0) @binding(0) var globals: Globals; - -fn unpack_u32(color: vec2) -> vec4 { - let rg: vec2 = unpack2x16float(color.x); - let ba: vec2 = unpack2x16float(color.y); - - return vec4(rg.y, rg.x, ba.y, ba.x); -} - -struct SolidVertexInput { - @location(0) position: vec2, - @location(1) color: vec4, -} - -struct SolidVertexOutput { - @builtin(position) position: vec4, - @location(0) color: vec4, -} - -@vertex -fn solid_vs_main(input: SolidVertexInput) -> SolidVertexOutput { - var out: SolidVertexOutput; - - out.color = input.color; - out.position = globals.transform * vec4(input.position, 0.0, 1.0); - - return out; -} - -@fragment -fn solid_fs_main(input: SolidVertexOutput) -> @location(0) vec4 { - return input.color; -} - -struct GradientVertexInput { - @location(0) v_pos: vec2, - @location(1) @interpolate(flat) colors_1: vec4, - @location(2) @interpolate(flat) colors_2: vec4, - @location(3) @interpolate(flat) colors_3: vec4, - @location(4) @interpolate(flat) colors_4: vec4, - @location(5) @interpolate(flat) offsets: vec4, - @location(6) direction: vec4, -} - -struct GradientVertexOutput { - @builtin(position) position: vec4, - @location(0) raw_position: vec2, - @location(1) @interpolate(flat) colors_1: vec4, - @location(2) @interpolate(flat) colors_2: vec4, - @location(3) @interpolate(flat) colors_3: vec4, - @location(4) @interpolate(flat) colors_4: vec4, - @location(5) @interpolate(flat) offsets: vec4, - @location(6) direction: vec4, -} - -@vertex -fn gradient_vs_main(input: GradientVertexInput) -> GradientVertexOutput { - var output: GradientVertexOutput; - - output.position = globals.transform * vec4(input.v_pos, 0.0, 1.0); - output.raw_position = input.v_pos; - output.colors_1 = input.colors_1; - output.colors_2 = input.colors_2; - output.colors_3 = input.colors_3; - output.colors_4 = input.colors_4; - output.offsets = input.offsets; - output.direction = input.direction; - - return output; -} - -fn random(coords: vec2) -> f32 { - return fract(sin(dot(coords, vec2(12.9898,78.233))) * 43758.5453); -} - -/// Returns the current interpolated color with a max 8-stop gradient -fn gradient( - raw_position: vec2, - direction: vec4, - colors: array, 8>, - offsets: array, - last_index: i32 -) -> vec4 { - let start = direction.xy; - let end = direction.zw; - - let v1 = end - start; - let v2 = raw_position - start; - let unit = normalize(v1); - let coord_offset = dot(unit, v2) / length(v1); - - //need to store these as a var to use dynamic indexing in a loop - //this is already added to wgsl spec but not in wgpu yet - var colors_arr = colors; - var offsets_arr = offsets; - - var color: vec4; - - let noise_granularity: f32 = 0.3/255.0; - - for (var i: i32 = 0; i < last_index; i++) { - let curr_offset = offsets_arr[i]; - let next_offset = offsets_arr[i+1]; - - if (coord_offset <= offsets_arr[0]) { - color = colors_arr[0]; - } - - if (curr_offset <= coord_offset && coord_offset <= next_offset) { - color = mix(colors_arr[i], colors_arr[i+1], smoothstep( - curr_offset, - next_offset, - coord_offset, - )); - } - - if (coord_offset >= offsets_arr[last_index]) { - color = colors_arr[last_index]; - } - } - - return color + mix(-noise_granularity, noise_granularity, random(raw_position)); -} - -@fragment -fn gradient_fs_main(input: GradientVertexOutput) -> @location(0) vec4 { - let colors = array, 8>( - unpack_u32(input.colors_1.xy), - unpack_u32(input.colors_1.zw), - unpack_u32(input.colors_2.xy), - unpack_u32(input.colors_2.zw), - unpack_u32(input.colors_3.xy), - unpack_u32(input.colors_3.zw), - unpack_u32(input.colors_4.xy), - unpack_u32(input.colors_4.zw), - ); - - let offsets_1: vec4 = unpack_u32(input.offsets.xy); - let offsets_2: vec4 = unpack_u32(input.offsets.zw); - - var offsets = array( - offsets_1.x, - offsets_1.y, - offsets_1.z, - offsets_1.w, - offsets_2.x, - offsets_2.y, - offsets_2.z, - offsets_2.w, - ); - - var last_index = 7; - for (var i: i32 = 0; i <= 7; i++) { - if (offsets[i] >= 1.0) { - last_index = i; - break; - } - } - - return gradient(input.raw_position, input.direction, colors, offsets, last_index); -} diff --git a/wgpu/src/shader/triangle/gradient.wgsl b/wgpu/src/shader/triangle/gradient.wgsl new file mode 100644 index 00000000..1a8ae3b5 --- /dev/null +++ b/wgpu/src/shader/triangle/gradient.wgsl @@ -0,0 +1,134 @@ +struct GradientVertexInput { + @location(0) v_pos: vec2, + @location(1) @interpolate(flat) colors_1: vec4, + @location(2) @interpolate(flat) colors_2: vec4, + @location(3) @interpolate(flat) colors_3: vec4, + @location(4) @interpolate(flat) colors_4: vec4, + @location(5) @interpolate(flat) offsets: vec4, + @location(6) direction: vec4, +} + +struct GradientVertexOutput { + @builtin(position) position: vec4, + @location(0) raw_position: vec2, + @location(1) @interpolate(flat) colors_1: vec4, + @location(2) @interpolate(flat) colors_2: vec4, + @location(3) @interpolate(flat) colors_3: vec4, + @location(4) @interpolate(flat) colors_4: vec4, + @location(5) @interpolate(flat) offsets: vec4, + @location(6) direction: vec4, +} + +@vertex +fn gradient_vs_main(input: GradientVertexInput) -> GradientVertexOutput { + var output: GradientVertexOutput; + + output.position = globals.transform * vec4(input.v_pos, 0.0, 1.0); + output.raw_position = input.v_pos; + output.colors_1 = input.colors_1; + output.colors_2 = input.colors_2; + output.colors_3 = input.colors_3; + output.colors_4 = input.colors_4; + output.offsets = input.offsets; + output.direction = input.direction; + + return output; +} + +/// Returns the current interpolated color with a max 8-stop gradient +fn gradient( + raw_position: vec2, + direction: vec4, + colors: array, 8>, + offsets: array, + last_index: i32 +) -> vec4 { + let start = direction.xy; + let end = direction.zw; + + let v1 = end - start; + let v2 = raw_position - start; + let unit = normalize(v1); + let coord_offset = dot(unit, v2) / length(v1); + + //need to store these as a var to use dynamic indexing in a loop + //this is already added to wgsl spec but not in wgpu yet + var colors_arr = colors; + var offsets_arr = offsets; + + var color: vec4; + + let noise_granularity: f32 = 0.3/255.0; + + for (var i: i32 = 0; i < last_index; i++) { + let curr_offset = offsets_arr[i]; + let next_offset = offsets_arr[i+1]; + + if (coord_offset <= offsets_arr[0]) { + color = colors_arr[0]; + } + + if (curr_offset <= coord_offset && coord_offset <= next_offset) { + let from_ = colors_arr[i]; + let to_ = colors_arr[i+1]; + let factor = smoothstep(curr_offset, next_offset, coord_offset); + + color = interpolate_color(from_, to_, factor); + } + + if (coord_offset >= offsets_arr[last_index]) { + color = colors_arr[last_index]; + } + } + + return color + mix(-noise_granularity, noise_granularity, random(raw_position)); +} + +@fragment +fn gradient_fs_main(input: GradientVertexOutput) -> @location(0) vec4 { + let colors = array, 8>( + unpack_u32(input.colors_1.xy), + unpack_u32(input.colors_1.zw), + unpack_u32(input.colors_2.xy), + unpack_u32(input.colors_2.zw), + unpack_u32(input.colors_3.xy), + unpack_u32(input.colors_3.zw), + unpack_u32(input.colors_4.xy), + unpack_u32(input.colors_4.zw), + ); + + let offsets_1: vec4 = unpack_u32(input.offsets.xy); + let offsets_2: vec4 = unpack_u32(input.offsets.zw); + + var offsets = array( + offsets_1.x, + offsets_1.y, + offsets_1.z, + offsets_1.w, + offsets_2.x, + offsets_2.y, + offsets_2.z, + offsets_2.w, + ); + + var last_index = 7; + for (var i: i32 = 0; i <= 7; i++) { + if (offsets[i] >= 1.0) { + last_index = i; + break; + } + } + + return gradient(input.raw_position, input.direction, colors, offsets, last_index); +} + +fn unpack_u32(color: vec2) -> vec4 { + let rg: vec2 = unpack2x16float(color.x); + let ba: vec2 = unpack2x16float(color.y); + + return vec4(rg.y, rg.x, ba.y, ba.x); +} + +fn random(coords: vec2) -> f32 { + return fract(sin(dot(coords, vec2(12.9898,78.233))) * 43758.5453); +} diff --git a/wgpu/src/shader/triangle/solid.wgsl b/wgpu/src/shader/triangle/solid.wgsl new file mode 100644 index 00000000..9ef81982 --- /dev/null +++ b/wgpu/src/shader/triangle/solid.wgsl @@ -0,0 +1,24 @@ +struct SolidVertexInput { + @location(0) position: vec2, + @location(1) color: vec4, +} + +struct SolidVertexOutput { + @builtin(position) position: vec4, + @location(0) color: vec4, +} + +@vertex +fn solid_vs_main(input: SolidVertexInput) -> SolidVertexOutput { + var out: SolidVertexOutput; + + out.color = input.color; + out.position = globals.transform * vec4(input.position, 0.0, 1.0); + + return out; +} + +@fragment +fn solid_fs_main(input: SolidVertexOutput) -> @location(0) vec4 { + return input.color; +} diff --git a/wgpu/src/triangle.rs b/wgpu/src/triangle.rs index d8b23dfe..d430e607 100644 --- a/wgpu/src/triangle.rs +++ b/wgpu/src/triangle.rs @@ -487,8 +487,10 @@ mod solid { device.create_shader_module(wgpu::ShaderModuleDescriptor { label: Some("iced_wgpu.triangle.solid.shader"), source: wgpu::ShaderSource::Wgsl( - std::borrow::Cow::Borrowed(include_str!( - "shader/triangle.wgsl" + std::borrow::Cow::Borrowed(concat!( + include_str!("shader/triangle.wgsl"), + "\n", + include_str!("shader/triangle/solid.wgsl"), )), ), }); @@ -537,6 +539,7 @@ mod solid { } mod gradient { + use crate::graphics::color; use crate::graphics::mesh; use crate::graphics::Antialiasing; use crate::triangle; @@ -633,9 +636,31 @@ mod gradient { device.create_shader_module(wgpu::ShaderModuleDescriptor { label: Some("iced_wgpu.triangle.gradient.shader"), source: wgpu::ShaderSource::Wgsl( - std::borrow::Cow::Borrowed(include_str!( - "shader/triangle.wgsl" - )), + std::borrow::Cow::Borrowed( + if color::GAMMA_CORRECTION { + concat!( + include_str!("shader/triangle.wgsl"), + "\n", + include_str!( + "shader/triangle/gradient.wgsl" + ), + "\n", + include_str!("shader/color/oklab.wgsl") + ) + } else { + concat!( + include_str!("shader/triangle.wgsl"), + "\n", + include_str!( + "shader/triangle/gradient.wgsl" + ), + "\n", + include_str!( + "shader/color/linear_rgb.wgsl" + ) + ) + }, + ), ), }); -- cgit From adfcd8c727b896589b77322eae01f9710a86f7cc Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Thu, 7 Sep 2023 07:37:57 +0200 Subject: Simplify `gradients` example --- examples/gradients/src/main.rs | 99 ++++++++++++++++-------------------------- 1 file changed, 37 insertions(+), 62 deletions(-) diff --git a/examples/gradients/src/main.rs b/examples/gradients/src/main.rs index d8b7945e..ad9bfe11 100644 --- a/examples/gradients/src/main.rs +++ b/examples/gradients/src/main.rs @@ -8,16 +8,17 @@ pub fn main() -> iced::Result { Gradient::run(Settings::default()) } +#[derive(Debug, Clone, Copy)] struct Gradient { - first: Color, - second: Color, + start: Color, + end: Color, angle: f32, } #[derive(Debug, Clone, Copy)] enum Message { - FirstChanged(Color), - SecondChanged(Color), + StartChanged(Color), + EndChanged(Color), AngleChanged(f32), } @@ -25,32 +26,30 @@ impl Sandbox for Gradient { type Message = Message; fn new() -> Self { - let first = Color::new(0.2784314, 0.0627451, 0.4117647, 1.0); - let second = Color::new(0.1882353, 0.772549, 0.8235294, 1.0); + let start = Color::new(1.0, 1.0, 1.0, 1.0); + let end = Color::new(0.0, 0.0, 1.0, 1.0); Self { - first, - second, + start, + end, angle: 0.0, } } fn title(&self) -> String { - String::from("Color gradient") + String::from("Gradient") } fn update(&mut self, message: Message) { match message { - Message::FirstChanged(color) => self.first = color, - Message::SecondChanged(color) => self.second = color, + Message::StartChanged(color) => self.start = color, + Message::EndChanged(color) => self.end = color, Message::AngleChanged(angle) => self.angle = angle, } } fn view(&self) -> Element { - let first = self.first; - let second = self.second; - let angle = self.angle; + let Self { start, end, angle } = *self; let gradient_box = container(text("")) .width(Length::Fill) @@ -58,10 +57,12 @@ impl Sandbox for Gradient { .center_x() .center_y() .style(move |_: &_| { - let gradient = gradient::Linear::new(Radians(angle)) - .add_stop(0.0, first) - .add_stop(1.0, second) - .into(); + let gradient = gradient::Linear::new(Radians( + angle + std::f32::consts::PI, + )) + .add_stop(0.0, start) + .add_stop(1.0, end) + .into(); container::Appearance { text_color: None, @@ -72,48 +73,6 @@ impl Sandbox for Gradient { } }); - let range = 0.0..=1.0; - let l = self.first; - let r = self.second; - - let first_color_picker = row![ - text("First").width(64), - slider(range.clone(), l.r, move |v| { - Message::FirstChanged(Color::new(v, l.g, l.b, l.a)) - }) - .step(0.01), - slider(range.clone(), l.g, move |v| { - Message::FirstChanged(Color::new(l.r, v, l.b, l.a)) - }) - .step(0.01), - slider(range.clone(), l.b, move |v| { - Message::FirstChanged(Color::new(l.r, l.g, v, l.a)) - }) - .step(0.01), - ] - .spacing(8) - .padding(8) - .align_items(Alignment::Center); - - let second_color_picker = row![ - text("Second").width(64), - slider(range.clone(), r.r, move |v| { - Message::SecondChanged(Color::new(v, r.g, r.b, r.a)) - }) - .step(0.01), - slider(range.clone(), r.g, move |v| { - Message::SecondChanged(Color::new(r.r, v, r.b, r.a)) - }) - .step(0.01), - slider(range.clone(), r.b, move |v| { - Message::SecondChanged(Color::new(r.r, r.g, v, r.a)) - }) - .step(0.01), - ] - .spacing(8) - .padding(8) - .align_items(Alignment::Center); - let angle_picker = row![ text("Angle").width(64), slider(0.0..=std::f32::consts::PI * 2.0, self.angle, move |v| { @@ -126,11 +85,27 @@ impl Sandbox for Gradient { .align_items(Alignment::Center); column![ - first_color_picker, - second_color_picker, + color_picker("Start", self.start).map(Message::StartChanged), + color_picker("End", self.end).map(Message::EndChanged), angle_picker, gradient_box ] .into() } } + +fn color_picker(label: &str, color: Color) -> Element<'_, Color> { + row![ + text(label).width(64), + slider(0.0..=1.0, color.r, move |r| { Color { r, ..color } }) + .step(0.01), + slider(0.0..=1.0, color.g, move |g| { Color { g, ..color } }) + .step(0.01), + slider(0.0..=1.0, color.b, move |b| { Color { b, ..color } }) + .step(0.01), + ] + .spacing(8) + .padding(8) + .align_items(Alignment::Center) + .into() +} -- cgit From 21259ee745c17d0f257c7a6c356d8a491460f9d6 Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Thu, 7 Sep 2023 07:38:51 +0200 Subject: Rename `gradients` example to `gradient` --- examples/gradient/Cargo.toml | 8 +++ examples/gradient/src/main.rs | 111 +++++++++++++++++++++++++++++++++++++++++ examples/gradients/Cargo.toml | 8 --- examples/gradients/src/main.rs | 111 ----------------------------------------- 4 files changed, 119 insertions(+), 119 deletions(-) create mode 100644 examples/gradient/Cargo.toml create mode 100644 examples/gradient/src/main.rs delete mode 100644 examples/gradients/Cargo.toml delete mode 100644 examples/gradients/src/main.rs diff --git a/examples/gradient/Cargo.toml b/examples/gradient/Cargo.toml new file mode 100644 index 00000000..1bc65a9c --- /dev/null +++ b/examples/gradient/Cargo.toml @@ -0,0 +1,8 @@ +[package] +name = "gradients" +version = "0.1.0" +edition = "2021" +publish = false + +[dependencies] +iced = { path = "../.." } diff --git a/examples/gradient/src/main.rs b/examples/gradient/src/main.rs new file mode 100644 index 00000000..ad9bfe11 --- /dev/null +++ b/examples/gradient/src/main.rs @@ -0,0 +1,111 @@ +use iced::widget::{column, container, row, slider, text}; +use iced::{ + gradient, Alignment, Background, BorderRadius, Color, Element, Length, + Radians, Sandbox, Settings, +}; + +pub fn main() -> iced::Result { + Gradient::run(Settings::default()) +} + +#[derive(Debug, Clone, Copy)] +struct Gradient { + start: Color, + end: Color, + angle: f32, +} + +#[derive(Debug, Clone, Copy)] +enum Message { + StartChanged(Color), + EndChanged(Color), + AngleChanged(f32), +} + +impl Sandbox for Gradient { + type Message = Message; + + fn new() -> Self { + let start = Color::new(1.0, 1.0, 1.0, 1.0); + let end = Color::new(0.0, 0.0, 1.0, 1.0); + + Self { + start, + end, + angle: 0.0, + } + } + + fn title(&self) -> String { + String::from("Gradient") + } + + fn update(&mut self, message: Message) { + match message { + Message::StartChanged(color) => self.start = color, + Message::EndChanged(color) => self.end = color, + Message::AngleChanged(angle) => self.angle = angle, + } + } + + fn view(&self) -> Element { + let Self { start, end, angle } = *self; + + let gradient_box = container(text("")) + .width(Length::Fill) + .height(Length::Fill) + .center_x() + .center_y() + .style(move |_: &_| { + let gradient = gradient::Linear::new(Radians( + angle + std::f32::consts::PI, + )) + .add_stop(0.0, start) + .add_stop(1.0, end) + .into(); + + container::Appearance { + text_color: None, + background: Some(Background::Gradient(gradient)), + border_radius: BorderRadius::default(), + border_width: 0.0, + border_color: Color::new(0.0, 0.0, 0.0, 0.0), + } + }); + + let angle_picker = row![ + text("Angle").width(64), + slider(0.0..=std::f32::consts::PI * 2.0, self.angle, move |v| { + Message::AngleChanged(v) + }) + .step(0.01) + ] + .spacing(8) + .padding(8) + .align_items(Alignment::Center); + + column![ + color_picker("Start", self.start).map(Message::StartChanged), + color_picker("End", self.end).map(Message::EndChanged), + angle_picker, + gradient_box + ] + .into() + } +} + +fn color_picker(label: &str, color: Color) -> Element<'_, Color> { + row![ + text(label).width(64), + slider(0.0..=1.0, color.r, move |r| { Color { r, ..color } }) + .step(0.01), + slider(0.0..=1.0, color.g, move |g| { Color { g, ..color } }) + .step(0.01), + slider(0.0..=1.0, color.b, move |b| { Color { b, ..color } }) + .step(0.01), + ] + .spacing(8) + .padding(8) + .align_items(Alignment::Center) + .into() +} diff --git a/examples/gradients/Cargo.toml b/examples/gradients/Cargo.toml deleted file mode 100644 index 1bc65a9c..00000000 --- a/examples/gradients/Cargo.toml +++ /dev/null @@ -1,8 +0,0 @@ -[package] -name = "gradients" -version = "0.1.0" -edition = "2021" -publish = false - -[dependencies] -iced = { path = "../.." } diff --git a/examples/gradients/src/main.rs b/examples/gradients/src/main.rs deleted file mode 100644 index ad9bfe11..00000000 --- a/examples/gradients/src/main.rs +++ /dev/null @@ -1,111 +0,0 @@ -use iced::widget::{column, container, row, slider, text}; -use iced::{ - gradient, Alignment, Background, BorderRadius, Color, Element, Length, - Radians, Sandbox, Settings, -}; - -pub fn main() -> iced::Result { - Gradient::run(Settings::default()) -} - -#[derive(Debug, Clone, Copy)] -struct Gradient { - start: Color, - end: Color, - angle: f32, -} - -#[derive(Debug, Clone, Copy)] -enum Message { - StartChanged(Color), - EndChanged(Color), - AngleChanged(f32), -} - -impl Sandbox for Gradient { - type Message = Message; - - fn new() -> Self { - let start = Color::new(1.0, 1.0, 1.0, 1.0); - let end = Color::new(0.0, 0.0, 1.0, 1.0); - - Self { - start, - end, - angle: 0.0, - } - } - - fn title(&self) -> String { - String::from("Gradient") - } - - fn update(&mut self, message: Message) { - match message { - Message::StartChanged(color) => self.start = color, - Message::EndChanged(color) => self.end = color, - Message::AngleChanged(angle) => self.angle = angle, - } - } - - fn view(&self) -> Element { - let Self { start, end, angle } = *self; - - let gradient_box = container(text("")) - .width(Length::Fill) - .height(Length::Fill) - .center_x() - .center_y() - .style(move |_: &_| { - let gradient = gradient::Linear::new(Radians( - angle + std::f32::consts::PI, - )) - .add_stop(0.0, start) - .add_stop(1.0, end) - .into(); - - container::Appearance { - text_color: None, - background: Some(Background::Gradient(gradient)), - border_radius: BorderRadius::default(), - border_width: 0.0, - border_color: Color::new(0.0, 0.0, 0.0, 0.0), - } - }); - - let angle_picker = row![ - text("Angle").width(64), - slider(0.0..=std::f32::consts::PI * 2.0, self.angle, move |v| { - Message::AngleChanged(v) - }) - .step(0.01) - ] - .spacing(8) - .padding(8) - .align_items(Alignment::Center); - - column![ - color_picker("Start", self.start).map(Message::StartChanged), - color_picker("End", self.end).map(Message::EndChanged), - angle_picker, - gradient_box - ] - .into() - } -} - -fn color_picker(label: &str, color: Color) -> Element<'_, Color> { - row![ - text(label).width(64), - slider(0.0..=1.0, color.r, move |r| { Color { r, ..color } }) - .step(0.01), - slider(0.0..=1.0, color.g, move |g| { Color { g, ..color } }) - .step(0.01), - slider(0.0..=1.0, color.b, move |b| { Color { b, ..color } }) - .step(0.01), - ] - .spacing(8) - .padding(8) - .align_items(Alignment::Center) - .into() -} -- cgit From f83fb9b6cd221ecfc02d468df128dbb8b3751c3f Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Thu, 7 Sep 2023 07:40:27 +0200 Subject: Use `Color::WHITE` in `gradient` example --- examples/gradient/src/main.rs | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/examples/gradient/src/main.rs b/examples/gradient/src/main.rs index ad9bfe11..dd50ebc9 100644 --- a/examples/gradient/src/main.rs +++ b/examples/gradient/src/main.rs @@ -26,12 +26,9 @@ impl Sandbox for Gradient { type Message = Message; fn new() -> Self { - let start = Color::new(1.0, 1.0, 1.0, 1.0); - let end = Color::new(0.0, 0.0, 1.0, 1.0); - Self { - start, - end, + start: Color::WHITE, + end: Color::new(0.0, 0.0, 1.0, 1.0), angle: 0.0, } } -- cgit From d818deb4cdfcfeffa88e649e3e27aa477a336f4c Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Thu, 7 Sep 2023 07:50:59 +0200 Subject: Increase threshold of `enum-variant-names` lint --- clippy.toml | 1 + 1 file changed, 1 insertion(+) diff --git a/clippy.toml b/clippy.toml index 0d4e02f0..02f00a06 100644 --- a/clippy.toml +++ b/clippy.toml @@ -1 +1,2 @@ too-many-arguments-threshold = 20 +enum-variant-name-threshold = 10 -- cgit From fc261a539b28dcd5f1898107a7c69c0719f3bbbf Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Thu, 7 Sep 2023 07:53:26 +0200 Subject: Fix name of `gradient` example package --- examples/gradient/Cargo.toml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/gradient/Cargo.toml b/examples/gradient/Cargo.toml index 1bc65a9c..2dea2c4f 100644 --- a/examples/gradient/Cargo.toml +++ b/examples/gradient/Cargo.toml @@ -1,5 +1,5 @@ [package] -name = "gradients" +name = "gradient" version = "0.1.0" edition = "2021" publish = false -- cgit From 6ff2e48feb7c0c3f65a3e6d298fc1c73356dc740 Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Thu, 7 Sep 2023 07:53:34 +0200 Subject: Use `Default` for `container::Appearance` in `gradient` example --- examples/gradient/src/main.rs | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/examples/gradient/src/main.rs b/examples/gradient/src/main.rs index dd50ebc9..91a65f1e 100644 --- a/examples/gradient/src/main.rs +++ b/examples/gradient/src/main.rs @@ -1,7 +1,7 @@ +use iced::gradient; use iced::widget::{column, container, row, slider, text}; use iced::{ - gradient, Alignment, Background, BorderRadius, Color, Element, Length, - Radians, Sandbox, Settings, + Alignment, Background, Color, Element, Length, Radians, Sandbox, Settings, }; pub fn main() -> iced::Result { @@ -62,11 +62,8 @@ impl Sandbox for Gradient { .into(); container::Appearance { - text_color: None, background: Some(Background::Gradient(gradient)), - border_radius: BorderRadius::default(), - border_width: 0.0, - border_color: Color::new(0.0, 0.0, 0.0, 0.0), + ..Default::default() } }); -- cgit From d6be3ab68246b08ea3f8988833e3b266b524dd1d Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Thu, 7 Sep 2023 07:55:09 +0200 Subject: Use `horizontal_space` instead of empty `text` widget in `gradient` example --- examples/gradient/src/main.rs | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/examples/gradient/src/main.rs b/examples/gradient/src/main.rs index 91a65f1e..3ba08a06 100644 --- a/examples/gradient/src/main.rs +++ b/examples/gradient/src/main.rs @@ -1,5 +1,5 @@ use iced::gradient; -use iced::widget::{column, container, row, slider, text}; +use iced::widget::{column, container, horizontal_space, row, slider, text}; use iced::{ Alignment, Background, Color, Element, Length, Radians, Sandbox, Settings, }; @@ -48,7 +48,7 @@ impl Sandbox for Gradient { fn view(&self) -> Element { let Self { start, end, angle } = *self; - let gradient_box = container(text("")) + let gradient_box = container(horizontal_space(Length::Fill)) .width(Length::Fill) .height(Length::Fill) .center_x() -- cgit From c1139898c50d22ac3b711801b1058aacef514030 Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Thu, 7 Sep 2023 07:55:54 +0200 Subject: Remove unnecessary centering in `gradient` example --- examples/gradient/src/main.rs | 2 -- 1 file changed, 2 deletions(-) diff --git a/examples/gradient/src/main.rs b/examples/gradient/src/main.rs index 3ba08a06..0b32e73c 100644 --- a/examples/gradient/src/main.rs +++ b/examples/gradient/src/main.rs @@ -51,8 +51,6 @@ impl Sandbox for Gradient { let gradient_box = container(horizontal_space(Length::Fill)) .width(Length::Fill) .height(Length::Fill) - .center_x() - .center_y() .style(move |_: &_| { let gradient = gradient::Linear::new(Radians( angle + std::f32::consts::PI, -- cgit From d2294737c2e28b3b3050d7bf820bbca09896b00e Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Fri, 8 Sep 2023 01:58:52 +0200 Subject: Use `Radians` as a number directly in `gradient` example --- core/Cargo.toml | 1 + core/src/angle.rs | 45 ++++++++++++++++++++++++++++++++++++++++--- examples/gradient/src/main.rs | 22 +++++++++------------ widget/src/slider.rs | 4 ++-- 4 files changed, 54 insertions(+), 18 deletions(-) diff --git a/core/Cargo.toml b/core/Cargo.toml index 8859e91e..7acb7511 100644 --- a/core/Cargo.toml +++ b/core/Cargo.toml @@ -15,6 +15,7 @@ bitflags.workspace = true log.workspace = true thiserror.workspace = true twox-hash.workspace = true +num-traits.workspace = true palette.workspace = true palette.optional = true diff --git a/core/src/angle.rs b/core/src/angle.rs index 75a57c76..91fc2ba7 100644 --- a/core/src/angle.rs +++ b/core/src/angle.rs @@ -1,17 +1,56 @@ use crate::{Point, Rectangle, Vector}; + use std::f32::consts::PI; +use std::ops::RangeInclusive; -#[derive(Debug, Copy, Clone, PartialEq)] /// Degrees +#[derive(Debug, Copy, Clone, PartialEq, PartialOrd)] pub struct Degrees(pub f32); -#[derive(Debug, Copy, Clone, PartialEq)] /// Radians +#[derive(Debug, Copy, Clone, PartialEq, PartialOrd)] pub struct Radians(pub f32); +impl Radians { + /// The range of radians of a circle. + pub const RANGE: RangeInclusive = Radians(0.0)..=Radians(2.0 * PI); +} + impl From for Radians { fn from(degrees: Degrees) -> Self { - Radians(degrees.0 * PI / 180.0) + Self(degrees.0 * PI / 180.0) + } +} + +impl From for Radians { + fn from(radians: f32) -> Self { + Self(radians) + } +} + +impl From for Radians { + fn from(radians: u8) -> Self { + Self(f32::from(radians)) + } +} + +impl From for f64 { + fn from(radians: Radians) -> Self { + Self::from(radians.0) + } +} + +impl num_traits::FromPrimitive for Radians { + fn from_i64(n: i64) -> Option { + Some(Self(n as f32)) + } + + fn from_u64(n: u64) -> Option { + Some(Self(n as f32)) + } + + fn from_f64(n: f64) -> Option { + Some(Self(n as f32)) } } diff --git a/examples/gradient/src/main.rs b/examples/gradient/src/main.rs index 0b32e73c..1bf5822d 100644 --- a/examples/gradient/src/main.rs +++ b/examples/gradient/src/main.rs @@ -12,14 +12,14 @@ pub fn main() -> iced::Result { struct Gradient { start: Color, end: Color, - angle: f32, + angle: Radians, } #[derive(Debug, Clone, Copy)] enum Message { StartChanged(Color), EndChanged(Color), - AngleChanged(f32), + AngleChanged(Radians), } impl Sandbox for Gradient { @@ -29,7 +29,7 @@ impl Sandbox for Gradient { Self { start: Color::WHITE, end: Color::new(0.0, 0.0, 1.0, 1.0), - angle: 0.0, + angle: Radians(0.0), } } @@ -52,12 +52,10 @@ impl Sandbox for Gradient { .width(Length::Fill) .height(Length::Fill) .style(move |_: &_| { - let gradient = gradient::Linear::new(Radians( - angle + std::f32::consts::PI, - )) - .add_stop(0.0, start) - .add_stop(1.0, end) - .into(); + let gradient = gradient::Linear::new(angle) + .add_stop(0.0, start) + .add_stop(1.0, end) + .into(); container::Appearance { background: Some(Background::Gradient(gradient)), @@ -67,10 +65,8 @@ impl Sandbox for Gradient { let angle_picker = row![ text("Angle").width(64), - slider(0.0..=std::f32::consts::PI * 2.0, self.angle, move |v| { - Message::AngleChanged(v) - }) - .step(0.01) + slider(Radians::RANGE, self.angle, Message::AngleChanged) + .step(0.01) ] .spacing(8) .padding(8) diff --git a/widget/src/slider.rs b/widget/src/slider.rs index e41be7c9..bd73ea79 100644 --- a/widget/src/slider.rs +++ b/widget/src/slider.rs @@ -137,8 +137,8 @@ where } /// Sets the step size of the [`Slider`]. - pub fn step(mut self, step: T) -> Self { - self.step = step; + pub fn step(mut self, step: impl Into) -> Self { + self.step = step.into(); self } } -- cgit From 90cbab18b95a2a90a6a527280a6ca461203ea1b3 Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Fri, 8 Sep 2023 02:36:17 +0200 Subject: Fine-tune `Radians::to_distance` An angle of 0 radians will "point" to the top-center of a `Rectangle` and then increase clockwise. --- core/src/angle.rs | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/core/src/angle.rs b/core/src/angle.rs index 91fc2ba7..c8f3f013 100644 --- a/core/src/angle.rs +++ b/core/src/angle.rs @@ -1,6 +1,6 @@ use crate::{Point, Rectangle, Vector}; -use std::f32::consts::PI; +use std::f32::consts::{FRAC_PI_2, PI}; use std::ops::RangeInclusive; /// Degrees @@ -57,15 +57,16 @@ impl num_traits::FromPrimitive for Radians { impl Radians { /// Calculates the line in which the [`Angle`] intercepts the `bounds`. pub fn to_distance(&self, bounds: &Rectangle) -> (Point, Point) { - let v1 = Vector::new(f32::cos(self.0), f32::sin(self.0)); + let angle = self.0 - FRAC_PI_2; + let r = Vector::new(f32::cos(angle), f32::sin(angle)); - let distance_to_rect = f32::min( - f32::abs((bounds.y - bounds.center().y) / v1.y), - f32::abs(((bounds.x + bounds.width) - bounds.center().x) / v1.x), + let distance_to_rect = f32::max( + f32::abs(r.x * bounds.width / 2.0), + f32::abs(r.y * bounds.height / 2.0), ); - let start = bounds.center() + v1 * distance_to_rect; - let end = bounds.center() - v1 * distance_to_rect; + let start = bounds.center() - r * distance_to_rect; + let end = bounds.center() + r * distance_to_rect; (start, end) } -- cgit