Skip to content

Commit

Permalink
Tweaks, messin' about.
Browse files Browse the repository at this point in the history
  • Loading branch information
@malchata
malchata committed Sep 24, 2019
1 parent 35b4aae commit 2996379
Show file tree
Hide file tree
Showing 5 changed files with 47 additions and 42 deletions.
23 changes: 10 additions & 13 deletions src/client/worklets/blotto.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,39 +3,36 @@
const paintName = "blotto";

class Blotto {
constructor () {
this.fullCircle = Math.PI * 2;
}

static get inputProperties () {
return [
`--${paintName}-tile-size`,
`--${paintName}-color`,
`--${paintName}-amplitude`,
`--${paintName}-max-opacity`,
`--${paintName}-blend-mode`
];
}

paint (ctx, geom, properties) {
const tileSize = parseInt(properties.get(`--${paintName}-tile-size`));
const xTiles = geom.width / tileSize;
const yTiles = geom.height / tileSize;
const amplitude = parseFloat(properties.get(`--${paintName}-amplitude`));
const geomTileHeight = geom.height / tileSize;
const geomTileWidth = geom.width / tileSize;
const maxOpacity = parseFloat(properties.get(`--${paintName}-max-opacity`));
const fullCircle = Math.PI * 2;

ctx.fillStyle = properties.get(`--${paintName}-color`).toString();
ctx.globalCompositeOperation = properties.get(`--${paintName}-blend-mode`).toString();

for (let y = 0; y < geomTileHeight; y++) {
for (let y = 0; y < yTiles; y++) {
const yOffset = y * tileSize;

for (let x = 0; x < geomTileWidth; x++) {
const xOffset = x * tileSize;
const alpha = Math.random() % Math.random();
const radius = tileSize * Math.random() * amplitude;
for (let x = 0; x < xTiles; x++) {
const opacity = Math.random() % Math.random();

ctx.globalAlpha = alpha;
ctx.globalAlpha = opacity > maxOpacity ? maxOpacity : opacity;
ctx.beginPath();
ctx.arc(xOffset, yOffset, radius, 0, this.fullCircle, false);
ctx.arc(x * tileSize, yOffset, tileSize * Math.random() * amplitude, 0, fullCircle);
ctx.fill();
}
}
Expand Down
13 changes: 7 additions & 6 deletions src/client/worklets/my-bumps.js → src/client/worklets/bumpy.js
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
/* global registerPaint */

const paintName = "my-bumps";
const paintName = "bumpy";

class MyBumps {
class Bumpy {
static get inputProperties () {
return [
`--${paintName}-tile-size`,
Expand All @@ -16,6 +16,7 @@ class MyBumps {
const tileSize = parseInt(properties.get(`--${paintName}-tile-size`));
const thickness = parseFloat(properties.get(`--${paintName}-thickness`));
const color = properties.get(`--${paintName}-color`).toString();
const probability = parseFloat(properties.get(`--${paintName}-probability`));
const geomTileHeight = (geom.height * 2) / tileSize;
const geomTileWidth = geom.width / tileSize;

Expand All @@ -24,17 +25,17 @@ class MyBumps {

for (let y = 0; y < geomTileHeight; y++) {
for (let x = 0; x < geomTileWidth; x++) {
this.drawStroke(ctx, tileSize, (x * tileSize), (y * (tileSize / 2)), thickness);
this.drawStroke(ctx, tileSize, (x * tileSize), (y * (tileSize / 2)), thickness, probability);
}
}
}

drawStroke (ctx, tileSize, xOffset, yOffset, thickness) {
drawStroke (ctx, tileSize, xOffset, yOffset, thickness, probability) {
const thirdTile = tileSize / 3;
const quarterTile = tileSize / 4;
const lineOffset = yOffset - (thickness / 2);

if (Math.random() >= .5) {
if (Math.random() >= probability) {
ctx.beginPath();
ctx.moveTo(xOffset, lineOffset);
ctx.lineTo((xOffset + quarterTile), lineOffset);
Expand Down Expand Up @@ -68,4 +69,4 @@ class MyBumps {
}
}

registerPaint(paintName, MyBumps);
registerPaint(paintName, Bumpy);
33 changes: 16 additions & 17 deletions src/client/worklets/parallelowow.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,6 @@
const paintName = "parallelowow";

class Parallelowow {
constructor () {
this.radians = (Math.PI / 180) * 39.375;
}

static get inputProperties () {
return [
`--${paintName}-tile-width`,
Expand All @@ -18,8 +14,11 @@ class Parallelowow {
}

paint (ctx, geom, properties) {
const radians = (Math.PI / 180) * 39.375;
const tileWidth = parseInt(properties.get(`--${paintName}-tile-width`));
const tileHeight = tileWidth * (1 / 4);
const yTiles = geom.height / tileHeight;
const xTiles = geom.width / tileWidth;

let colors = [
properties.get(`--${paintName}-base-color`).toString(),
Expand All @@ -30,23 +29,21 @@ class Parallelowow {
const colorStep = parseInt(properties.get(`--${paintName}-color-step`));
const probability = parseFloat(properties.get(`--${paintName}-probability`));
const strokeWeight = parseFloat(properties.get(`--${paintName}-stroke-weight`));
const geomTilesY = geom.height / tileHeight;
const geomTilesX = geom.width / tileWidth;
const outerRadius = geom.width > geom.height ? geom.width * 2 : geom.height * 2;

if (strokeWeight > 0) {
ctx.lineWidth = strokeWeight;
ctx.strokeStyle = colors[0];
ctx.strokeStyle = this.adjustBrightness(colors[0], 25);
ctx.lineCap = "butt";
}

for (let y = -1; y < geomTilesY; y++) {
for (let y = -1; y < yTiles; y++) {
const yOffset = y * tileHeight;

for (let x = -1; x < (geomTilesX + y); x++) {
const xOffset = (x * tileWidth) - (y * tileHeight);

for (let x = -1; x < (xTiles + y); x++) {
if (Math.random() > probability) {
const xOffset = (x * tileWidth) - (y * tileHeight);

// Helpers!
const upperLeftX = xOffset;
const upperLeftY = yOffset;
Expand All @@ -61,7 +58,7 @@ class Parallelowow {
ctx.fillStyle = colors[1];
ctx.beginPath();
ctx.moveTo(upperRightX, upperRightY);
ctx.lineTo((Math.cos(this.radians) * outerRadius), (Math.sin(this.radians) * outerRadius));
ctx.lineTo((Math.cos(radians) * outerRadius), (Math.sin(radians) * outerRadius));
ctx.lineTo(lowerRightX, lowerRightY);
ctx.lineTo(upperRightX, upperRightY);
ctx.fill();
Expand All @@ -74,7 +71,7 @@ class Parallelowow {
ctx.fillStyle = colors[2];
ctx.beginPath();
ctx.moveTo(lowerRightX, lowerRightY);
ctx.lineTo((Math.cos(this.radians) * outerRadius), (Math.sin(this.radians) * outerRadius));
ctx.lineTo((Math.cos(radians) * outerRadius), (Math.sin(radians) * outerRadius));
ctx.lineTo(lowerLeftX, lowerLeftY);
ctx.moveTo(lowerLeftX, lowerLeftY);
ctx.fill();
Expand Down Expand Up @@ -107,7 +104,11 @@ class Parallelowow {
adjustBrightness (rgbString, amt) {
rgbString = rgbString.replace(/rgba?\(/g, "").replace(/\)/g, "").replace(/\s/g, "");

const rgbParts = rgbString.split(",").map(rgbPart => {
const rgbParts = rgbString.split(",").map((rgbPart, index) => {
if (index > 2) {
return;
}

rgbPart = parseInt(rgbPart) + amt;

if (rgbPart < 0) {
Expand All @@ -119,9 +120,7 @@ class Parallelowow {
return rgbPart;
});

console.log(rgbParts.join(","));

return `rgb(${rgbParts.join(",")})`;
return rgbString.indexOf("rgba") !== -1 ? `rgba(${rgbParts.join(",")})` : `rgb(${rgbParts.join(",")})`;
}
}

Expand Down
2 changes: 1 addition & 1 deletion src/server/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ app.listen(process.env.PORT || 8080, () => {
]
};

if (renderCache.index === false) {
if ("index" in renderCache === false) {
renderCache["index"] = html(metadata, "/", <Home worklets={worklets} />, JSON.parse(manifestData.toString()));
}

Expand Down
18 changes: 13 additions & 5 deletions src/server/worklets.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -120,19 +120,23 @@ export default {
},
color: {
syntax: "<color>",
value: "#e59eff"
value: "#6369d1"
},
amplitude: {
syntax: "<number>",
value: 2.25
},
"max-opacity": {
syntax: "<number>",
value: 1.0
},
"blend-mode": {
syntax: "<custom-ident>",
value: "multiply"
}
}
},
"my-bumps": {
bumpy: {
author: {
screenName: "malchata",
website: "https://jeremy.codes/"
Expand All @@ -141,16 +145,20 @@ export default {
customProperties: {
"tile-size": {
syntax: "<integer>",
value: 24
value: 32
},
thickness: {
syntax: "<number>",
value: 1.5
value: 1.25
},
color: {
syntax: "<color>",
value: "#fffbfe"
}
},
probability: {
syntax: "<number>",
value: 0.33
},
}
},
slapdash: {
Expand Down

0 comments on commit 2996379

Please sign in to comment.