Skip to content

Commit

Permalink
more on presets
Browse files Browse the repository at this point in the history
  • Loading branch information
uuuulala committed Dec 21, 2024
1 parent aa93515 commit 733253c
Showing 1 changed file with 29 additions and 6 deletions.
35 changes: 29 additions & 6 deletions packages/shaders-react/src/shaders/dots-grid.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -24,14 +24,15 @@ export const defaultPreset: DotsGridPreset = {
params: {
// Note: Keep default colors in HSLA format so that our Leva controls show a transparency channel (rgba and hex8 do not work)
colorBack: 'hsla(358.2, 66.1%, 48.6%, 0)',
colorFill: 'hsla(145.2, 30.1%, 32.5%, 1)',
colorFill: 'hsla(145.2, 30.1%, 10%, 1)',
colorStroke: 'hsla(39.4, 87.7%, 52.4%, 1)',
dotSize: 2,
gridSpacingX: 50,
gridSpacingY: 50,
strokeWidth: 0,
sizeRange: 0,
opacityRange: 0,
// Shape code: 'Circle': 0, 'Diamond': 1, 'Square': 2, 'Triangle': 3
shape: 0,
},
} as const;
Expand All @@ -46,9 +47,10 @@ const preset1: DotsGridPreset = {
dotSize: 28,
gridSpacingX: 60,
gridSpacingY: 60,
strokeWidth: 7,
strokeWidth: 3,
sizeRange: .5,
opacityRange: 1,
// Shape code: 'Circle': 0, 'Diamond': 1, 'Square': 2, 'Triangle': 3
shape: 0,
},
} as const;
Expand All @@ -66,6 +68,7 @@ const preset2: DotsGridPreset = {
strokeWidth: 23,
sizeRange: .35,
opacityRange: .55,
// Shape code: 'Circle': 0, 'Diamond': 1, 'Square': 2, 'Triangle': 3
shape: 0,
},
} as const;
Expand All @@ -83,6 +86,7 @@ const preset3: DotsGridPreset = {
strokeWidth: 0,
sizeRange: 1,
opacityRange: .6,
// Shape code: 'Circle': 0, 'Diamond': 1, 'Square': 2, 'Triangle': 3
shape: 0,
},
} as const;
Expand All @@ -91,20 +95,39 @@ const preset4: DotsGridPreset = {
name: '4',
params: {
// Note: Keep default colors in HSLA format so that our Leva controls show a transparency channel (rgba and hex8 do not work)
colorBack: 'hsla(40, 100%, 36%, .3)',
colorBack: 'hsla(150, 100%, 36%, .3)',
colorFill: 'hsla(50, 50%, 50%, 1)',
colorStroke: 'hsla(0, 0%, 0%, 1)',
dotSize: 42,
dotSize: 55,
gridSpacingX: 75,
gridSpacingY: 75,
strokeWidth: 0,
sizeRange: 0,
opacityRange: 1,
shape: 0,
// Shape code: 'Circle': 0, 'Diamond': 1, 'Square': 2, 'Triangle': 3
shape: 1,
},
} as const;

const preset5: DotsGridPreset = {
name: '5',
params: {
// Note: Keep default colors in HSLA format so that our Leva controls show a transparency channel (rgba and hex8 do not work)
colorBack: 'hsla(0, 100%, 100%, .1)',
colorFill: 'hsla(171, 50%, 50%, 1)',
colorStroke: 'hsla(0, 100%, 100%, 1)',
dotSize: 52,
gridSpacingX: 75,
gridSpacingY: 75,
strokeWidth: 16,
sizeRange: .6,
opacityRange: .5,
// Shape code: 'Circle': 0, 'Diamond': 1, 'Square': 2, 'Triangle': 3
shape: 2,
},
} as const;

export const dotsGridPresets: DotsGridPreset[] = [defaultPreset, preset1, preset2, preset3, preset4];
export const dotsGridPresets: DotsGridPreset[] = [defaultPreset, preset1, preset2, preset3, preset4, preset5];

export const DotsGrid = (props: DotsGridProps): JSX.Element => {
const uniforms: DotsGridUniforms = useMemo(() => {
Expand Down

0 comments on commit 733253c

Please sign in to comment.