Easiest way to reproduce: Comment out all styles except Lunarean and Boilerplate, then

<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/us

Warning: resetting pixelDensity cleans the canvas :) <a href="https://github.com/p

Lunarean style somehow interferes with other styles about fxhash-bridge HOT 8 CLOSED

camilleroux commented on August 21, 2024 3

Lunarean style somehow interferes with other styles

from fxhash-bridge.

Comments (8)

laurent-h commented on August 21, 2024 2

some xxxMode() are missing in index.js to restore all defaults.
I'm also trying to figure it out...

from fxhash-bridge.

clauswilke commented on August 21, 2024 2

@lunarean While you're at it, I would also suggest to move this line down to after all the style settings have been reset, just to be safe:

fxhash-bridge/src/index.js

Line 151 in 71be0af

 currentStyle = new stylesClasses[styleClassId](gridSizeX, gridSizeY, s, projectionCalculator3d, p5) 

from fxhash-bridge.

clauswilke commented on August 21, 2024 1

Basically, move to right before here:

fxhash-bridge/src/index.js

Line 163 in 71be0af

currentStyle.beforeDraw()

from fxhash-bridge.

clauswilke commented on August 21, 2024

I've narrowed it down to the drawBgTriangles() function. By itself, it is able to cause problems. I don't immediately see why. I have to run now but will continue looking later if nobody else figures it out first.

fxhash-bridge/src/styles/lunarean.js

Lines 151 to 186 in e41d179

 drawBgTriangles() { 

 const p5 = this._p5; 

 const SIZE = this._s; 

 const points = [[0, 1], [0, 0], [1, 0], [1, 1]]; 

 const triangles = this.triangulateQuad(points, 0.02); 

 for (let triangle of triangles) { 

 if (p5.random() < 0.1) { 

 continue; 

 } 

 let [a, b, c, mod] = triangle; 

 // subdivide triangle - usually produces scribbled lines 

 if (p5.random() < 0.02) { 

 triangles.push(...this.triangulateQuad([a, b, c, a], 0.01)); 

 } 

 // set stroke wider at bottom and top 

 const [mx, my] = this.centroid([a, b, c]); 

 const alpha = p5.max(p5.map(my, this.vanY, 1, 0, 0.12), p5.map(my, 0.5, 0, 0, 0.06), 0.04); 

 p5.stroke(this.modifyAlpha(this.WHITE, alpha)); 

 // warp 

 [a, b, c] = [a, b, c].map(([x, y]) => { 

 y = p5.pow(y, 1.5); 

 return [x * SIZE, y * SIZE]; 

 }) 

 const sw = p5.random() < 0.03 ? 0.0005 : 0.00025; 

 p5.strokeWeight(sw * SIZE); 

 p5.line(...b, ...c); 

 p5.line(...c, ...a); 

 p5.line(...a, ...b); 

 } 

 }

from fxhash-bridge.

lunarean commented on August 21, 2024

Sorry about this, investigating it

from fxhash-bridge.

laurent-h commented on August 21, 2024

Reset strokeWeight in index ?
p5.strokeWeight(1)

Resetting pixelDensity would also be a good idea:
p5.pixelDensity(window.devicePixelRatio)

from fxhash-bridge.

camilleroux commented on August 21, 2024

Warning: resetting pixelDensity cleans the canvas :)
https://github.com/processing/p5.js/blob/v1.4.1/src/core/environment.js#L598

from fxhash-bridge.

lunarean commented on August 21, 2024

Reset strokeWeight in index ? p5.strokeWeight(1)

Resetting pixelDensity would also be a good idea: p5.pixelDensity(window.devicePixelRatio)

nice! resetting strokeWeight seems to fix it

I can submit a fix adding those two lines to index.js

from fxhash-bridge.

Lunarean style somehow interferes with other styles about fxhash-bridge HOT 8 CLOSED

Comments (8)

Related Issues (20)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent

	drawBgTriangles() {
	const p5 = this._p5;
	const SIZE = this._s;

	const points = [[0, 1], [0, 0], [1, 0], [1, 1]];
	const triangles = this.triangulateQuad(points, 0.02);

	for (let triangle of triangles) {
	if (p5.random() < 0.1) {
	continue;
	}
	let [a, b, c, mod] = triangle;

	// subdivide triangle - usually produces scribbled lines
	if (p5.random() < 0.02) {
	triangles.push(...this.triangulateQuad([a, b, c, a], 0.01));
	}

	// set stroke wider at bottom and top
	const [mx, my] = this.centroid([a, b, c]);
	const alpha = p5.max(p5.map(my, this.vanY, 1, 0, 0.12), p5.map(my, 0.5, 0, 0, 0.06), 0.04);
	p5.stroke(this.modifyAlpha(this.WHITE, alpha));

	// warp
	[a, b, c] = [a, b, c].map(([x, y]) => {
	y = p5.pow(y, 1.5);
	return [x * SIZE, y * SIZE];
	})

	const sw = p5.random() < 0.03 ? 0.0005 : 0.00025;
	p5.strokeWeight(sw * SIZE);
	p5.line(...b, ...c);
	p5.line(...c, ...a);
	p5.line(...a, ...b);
	}
	}