Skip to content

Commit e1df03b

Browse files
tipsytipsy
committed
make gradient fully configurable
1 parent f53bec2 commit e1df03b

File tree

5 files changed

+38
-34
lines changed

5 files changed

+38
-34
lines changed

‎dist/bubbly-bg.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/bubbly-bg.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/generator.css

+11-2
Original file line numberDiff line numberDiff line change
@@ -13,14 +13,23 @@ body {
1313
overflow: scroll;
1414
}
1515

16-
#app input {
16+
#app input,
17+
#app textarea {
1718
font: 16px monospace;
1819
background: rgba(255, 255, 255, 0.2);
1920
border: none;
2021
box-shadow: none !important;
2122
letter-spacing: -1px;
2223
}
2324

25+
#app textarea {
26+
white-space: pre;
27+
overflow-wrap: normal;
28+
overflow-x: scroll;
29+
min-height: 132px;
30+
padding-bottom: 8px;
31+
}
32+
2433
#app .radio-field {
2534
background: rgba(255, 255, 255, 0.2);
2635
padding: 12px 10px;
@@ -57,7 +66,7 @@ hr {
5766
}
5867

5968
.side-by-side > * {
60-
width: calc(33% - 6px);
69+
width: calc(50% - 6px);
6170
}
6271

6372
.field:not(:last-child) {

‎docs/generator.html

+16-20
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
</head>
1515
<body>
1616
<div id="app" v-cloak>
17-
<b-field label="Number of bubbles" label-position="inside">
17+
<b-field label="Number of bubbles" label-position="inside">
1818
<b-input v-model="bubbles" placeholder="Integer or expression returning integer"></b-input>
1919
</b-field>
2020
<b-field label="Composite Type" label-position="inside">
@@ -25,23 +25,17 @@
2525
placeholder="Choose an option"
2626
></b-autocomplete>
2727
</b-field>
28-
<b-field label="Shadow blur" label-position="inside">
29-
<b-input v-model="shadowBlur" placeholder="Integer or expression returning integer"></b-input>
30-
</b-field>
31-
<b-field label="Shadow color" label-position="inside">
32-
<b-input v-model="shadowColor" placeholder="Any type of color value"></b-input>
33-
</b-field>
3428
<div class="side-by-side">
35-
<b-field label="Grad start color" label-position="inside">
36-
<b-input v-model="gradientStart" placeholder="Any type of color value"></b-input>
29+
<b-field label="Shadow color" label-position="inside">
30+
<b-input v-model="shadowColor" placeholder="Any type of color value"></b-input>
3731
</b-field>
38-
<b-field label="Grad stop color" label-position="inside">
39-
<b-input v-model="gradientStop" placeholder="Any type of color value"></b-input>
40-
</b-field>
41-
<b-field label="Grad angle" label-position="inside">
42-
<b-input v-model="gradientAngle" placeholder="Any number" type="text"></b-input>
32+
<b-field label="Shadow blur" label-position="inside">
33+
<b-input v-model="shadowBlur" placeholder="Integer or expression returning integer"></b-input>
4334
</b-field>
4435
</div>
36+
<b-field label="Gradient function" label-position="inside">
37+
<b-input v-model="gradientFunc" type="textarea" placeholder="Function for drawing gradient"></b-input>
38+
</b-field>
4539
<b-field label="Radius function" label-position="inside">
4640
<b-input v-model="radiusFunc" placeholder="Function for calculating radius"></b-input>
4741
</b-field>
@@ -72,13 +66,17 @@
7266
selectedCompositeType: "lighter",
7367
shadowBlur: "1",
7468
shadowColor: "#fff",
75-
gradientStart: "#2AE",
76-
gradientStop: "#17B",
77-
gradientAngle: 45,
7869
radiusFunc: "4 + Math.random() * window.innerWidth / 25",
7970
fillFunc: "`hsla(0, 0%, 100%, ${Math.random() * 0.1})`",
8071
angleFunc: "Math.random() * Math.PI * 2",
8172
velocityFunc: "0.1 + Math.random() * 0.5",
73+
gradientFunc: `
74+
(ctx) => {
75+
const gradient = ctx.createLinearGradient(0, 0, ctx.canvas.width, ctx.canvas.height);
76+
gradient.addColorStop(0, "#2AE");
77+
gradient.addColorStop(1, "#17B");
78+
return gradient;
79+
}`.trim(),
8280
animate: true,
8381
compositeTypes: [
8482
"source-over",
@@ -120,9 +118,7 @@
120118
compose: this.selectedCompositeType,
121119
shadowBlur: eval(this.shadowBlur),
122120
shadowColor: this.shadowColor,
123-
gradientStart: this.gradientStart,
124-
gradientStop: this.gradientStop,
125-
gradientAngle: this.gradientAngle,
121+
gradientFunc: eval(this.gradientFunc),
126122
radiusFunc: eval("() => " + this.radiusFunc),
127123
fillFunc: eval("() => " + this.fillFunc),
128124
angleFunc: eval("() => " + this.angleFunc),

‎src/bubbly-bg.js

+9-10
Original file line numberDiff line numberDiff line change
@@ -78,13 +78,6 @@ function generateConfig(c) {
7878
return canvas;
7979
})();
8080

81-
const gradientAngle = c.gradientAngle || 45
82-
const radians = gradientAngle * Math.PI / 180;
83-
const startX = Math.cos(radians + Math.PI) * cv.width / 2 + cv.width / 2;
84-
const startY = Math.sin(radians + Math.PI) * cv.height / 2 + cv.height / 2;
85-
const endX = Math.cos(radians) * cv.width / 2 + cv.width / 2;
86-
const endY = Math.sin(radians) * cv.height / 2 + cv.height / 2;
87-
8881
const mergedConfig = Object.assign({
8982
cv: cv,
9083
bubbles: Math.floor((cv.width + cv.height) * 0.02),
@@ -95,12 +88,18 @@ function generateConfig(c) {
9588
fillFunc: () => `hsla(0, 0%, 100%, ${Math.random() * 0.1})`,
9689
angleFunc: () => Math.random() * Math.PI * 2,
9790
velocityFunc: () => 0.1 + Math.random() * 0.5,
91+
gradientFunc: gradientFunc,
9892
animate: c.animate !== false,
9993
ctx: cv.getContext("2d"),
100-
gradient: cv.getContext("2d").createLinearGradient(startX, startY, endX, endY),
10194
}, c);
95+
mergedConfig.gradient = mergedConfig.gradientFunc(mergedConfig.ctx);
10296
mergedConfig.padding = mergedConfig.shadowBlur * 2 + 2;
103-
mergedConfig.gradient.addColorStop(0, c.gradientStart || "#2AE");
104-
mergedConfig.gradient.addColorStop(1, c.gradientStop || "#17B");
10597
return mergedConfig;
10698
}
99+
100+
const gradientFunc = (ctx) => {
101+
const gradient = ctx.createLinearGradient(0, 0, ctx.canvas.width, ctx.canvas.height);
102+
gradient.addColorStop(0, "#2AE");
103+
gradient.addColorStop(1, "#17B");
104+
return gradient;
105+
}

0 commit comments

Comments
 (0)