circle improvement
This commit is contained in:
parent
2907100c2d
commit
553a997d35
|
@ -78,10 +78,11 @@ async function fetchConfig(className) {
|
||||||
{ type: "color", defaultValue: "#00fffb", property: "colourExpand" },
|
{ type: "color", defaultValue: "#00fffb", property: "colourExpand" },
|
||||||
],
|
],
|
||||||
CircleExpand: [
|
CircleExpand: [
|
||||||
{ type: "range", min: 1, max: 800, defaultValue: 400, property: "width" },
|
{ type: "range", min: 1, max: 55, defaultValue: 55, property: "nCircles" },
|
||||||
{ type: "range", min: 1, max: 100, defaultValue: 10, property: "squares" },
|
{ type: "range", min: 1, max: 50, defaultValue: 20, property: "gap" },
|
||||||
{ type: "range", min: 1, max: 10, defaultValue: 1, property: "line_width" },
|
{ type: "range", min: 0, max: 1, defaultValue: 1, property: "linear" },
|
||||||
{ type: "color", defaultValue: "#2D81FC", property: "colour1" },
|
{ type: "color", defaultValue: "#fc03cf", property: "colour1" },
|
||||||
|
{ type: "color", defaultValue: "#00fffb", property: "colour2" },
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
return config[className];
|
return config[className];
|
||||||
|
|
|
@ -357,35 +357,66 @@ class rectangle_pattern1 extends BaseShape {
|
||||||
}
|
}
|
||||||
|
|
||||||
class CircleExpand extends BaseShape {
|
class CircleExpand extends BaseShape {
|
||||||
constructor() {
|
constructor(nCircles, gap, linear, colour1, colour2) {
|
||||||
super();
|
super();
|
||||||
|
this.nCircles = nCircles;
|
||||||
|
this.gap = gap;
|
||||||
|
this.linear = linear;
|
||||||
|
this.colour1 = colour1;
|
||||||
|
this.colour2 = colour2
|
||||||
}
|
}
|
||||||
lerpColor(a, b, amount) {
|
lerpColor(a, b, amount) {
|
||||||
var ah = +a.replace('#', '0x'),
|
var ah = +a.replace('#', '0x'),
|
||||||
ar = ah >> 16, ag = ah >> 8 & 0xff, ab = ah & 0xff,
|
ar = ah >> 16, ag = ah >> 8 & 0xff, ab = ah & 0xff,
|
||||||
bh = +b.replace('#', '0x'),
|
bh = +b.replace('#', '0x'),
|
||||||
br = bh >> 16, bg = bh >> 8 & 0xff, bb = bh & 0xff,
|
br = bh >> 16, bg = bh >> 8 & 0xff, bb = bh & 0xff,
|
||||||
rr = ar + amount * (br - ar),
|
rr = ar + amount * (br - ar),
|
||||||
rg = ag + amount * (bg - ag),
|
rg = ag + amount * (bg - ag),
|
||||||
rb = ab + amount * (bb - ab);
|
rb = ab + amount * (bb - ab);
|
||||||
|
|
||||||
return '#' + ((1 << 24) + (rr << 16) + (rg << 8) + rb | 0).toString(16).slice(1);
|
return '#' + ((1 << 24) + (rr << 16) + (rg << 8) + rb | 0).toString(16).slice(1);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
arraySort(x, y) {
|
||||||
|
if (x.r > y.r) {
|
||||||
|
return 1;
|
||||||
|
}
|
||||||
|
if (x.r < y.r) {
|
||||||
|
return -1;
|
||||||
|
}
|
||||||
|
return 0;
|
||||||
|
}
|
||||||
|
|
||||||
draw(rotation) {
|
draw(rotation) {
|
||||||
const nbCircles = 55
|
let arrOfWidths = []
|
||||||
const gap = 20;
|
let arrOfco = []
|
||||||
for (let i = 0; i < nbCircles; i++) {
|
let intRot;
|
||||||
|
if (this.linear) {
|
||||||
|
intRot = Math.floor(rotation * 30) / 100
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
intRot = Math.sin(rad(Math.floor(rotation * 30) / 4)) + rotation / 4
|
||||||
|
}
|
||||||
|
|
||||||
|
for (let i = 0; i < this.nCircles; i++) {
|
||||||
|
const width = this.gap * ((intRot + i) % this.nCircles);
|
||||||
|
const colour = (Math.sin(rad(i * (360 / this.nCircles) - 90)) + 1) / 2
|
||||||
|
arrOfWidths.push({ r: width, c: colour });
|
||||||
|
}
|
||||||
|
|
||||||
|
let newArr = arrOfWidths.sort(this.arraySort)
|
||||||
|
|
||||||
|
for (let i = this.nCircles - 1; i >= 0; i--) {
|
||||||
ctx.beginPath();
|
ctx.beginPath();
|
||||||
let intRot = Math.floor(rotation*30)/100
|
ctx.arc(centerX, centerY, newArr[i].r, 0, 2 * Math.PI);
|
||||||
ctx.arc(centerX, centerY,gap* ((intRot+i)%nbCircles) , 0, 2 * Math.PI);
|
let newColour = this.lerpColor(this.colour1, this.colour2, newArr[i].c)
|
||||||
// let colourPos = Math.sin((i*(360/nbCircles)-90)+1)/2
|
ctx.fillStyle = newColour;
|
||||||
let colourPos = (Math.sin(rad(i*(360/nbCircles)-90))+1)/2
|
ctx.fill();
|
||||||
let newColour = this.lerpColor("#fc03cf","#03fcf0",colourPos)
|
|
||||||
console.log(colourPos)
|
ctx.beginPath();
|
||||||
ctx.strokeStyle = newColour;
|
ctx.arc(centerX, centerY, newArr[i].r, 0, 2 * Math.PI);
|
||||||
|
ctx.stokeStyle = "black";
|
||||||
ctx.stroke();
|
ctx.stroke();
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue