Обходной путь соединения полигональных линий p5.js webgl?

О пользовательских фигурах (с использованием функции beginShape) с обводкой в ​​режиме p5.js WEBGL: в режиме WEBGL функции lineJoint() и lineCap() недоступны. Вот почему линии в фигуре не соединяются плавно. Я попытался обойти проблему, используя контур в моей пользовательской форме, но это также не реализовано в режиме WEBGL.

Есть ли другой способ соединить эти линии?

Большое спасибо!

Codepen с проблемой: https://codepen.io/sebastianwinter/pen/eYNNEEx?editors= 1010

Не работает контур

function setup() { 
	  createCanvas(window.innerWidth, window.innerHeight, WEBGL);
} 

function draw() { 

    let strokeSize = 20;
    background(2,8,51);
    smooth();
    noFill();
    strokeWeight(strokeSize);
    stroke(255,255,255);

    polygon(0, 0, 200, 7);
}

function polygon(x, y, radius, npoints) {
    let angle = TWO_PI / npoints;
    beginShape();
    for (let a = 0; a < TWO_PI; a += angle) {
        let sx = x + cos(a) * radius;
        let sy = y + sin(a) * radius;
        vertex(sx, sy);
    }
    /* not working:
    beginContour();
    for (let a = 0; a < TWO_PI; a += angle) {
        let sx = x + cos(a) * (radius - strokeSize);
        let sy = y + sin(a) * (radius - strokeSize);
        vertex(sx, sy);
    }
    endContour();*/
    endShape(CLOSE);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/p5.js"></script>

сломанный штрих


shapes stroke processing p5.js
person Sebe    schedule 10.02.2020    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Насколько я знаю, режим WEBGL p5.js все еще немного экспериментальный, и некоторые функции, к которым вы привыкли в 2D-режиме, все еще в работе.

На данный момент я могу предложить обходной путь: использовать внутреннюю форму, похожую на beginContour():

function setup() { 
	createCanvas(window.innerWidth, window.innerHeight, WEBGL);
} 


function draw() { 

	let strokeSize = 20;
	background(2,8,51);
	smooth();
	fill(255);
	//strokeJoin(BEVEL);
	//strokeWeight(1);
	stroke(255,255,255);

	polygon(0, 0, 200, 7, 0.85);
	
	
}


function polygon(x, y, radius, npoints, thicknessRatio) {
	let angle = TWO_PI / npoints;
	beginShape();
	//CW
	for (let a = 0; a <= TWO_PI; a += angle) {
		let sx = x + cos(a) * radius;
		let sy = y + sin(a) * radius;
		vertex(sx, sy);
	}
	// beginContour();
	// CCW
	for (let a = TWO_PI; a >= 0; a -= angle) {
		let sx = x + cos(a) * radius * thicknessRatio;
		let sy = y + sin(a) * radius * thicknessRatio;
		vertex(sx, sy);
	}
	// endContour();
	endShape(CLOSE);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/p5.min.js"></script>

многоугольник, нарисованный с использованием заполненной формы в качестве обходного пути для штрихов, не полностью поддерживаемых в режиме WEBGL на данный момент

person George Profenza    schedule 10.02.2020