update curves types
This commit is contained in:
yuanchuan
parent
70a82253c0
commit
e9c8aceca5
130
css-doodle.js
130
css-doodle.js
|
|
@ -134,7 +134,7 @@ function remove_unit(str) {
|
|||
return unit ? +(str.replace(unit, '')) : str;
|
||||
}
|
||||
|
||||
const { cos, sin, sqrt, pow, PI } = Math;
|
||||
const { cos, sin, tan, sqrt, pow, PI } = Math;
|
||||
const DEG = PI / 180;
|
||||
|
||||
function polygon(option, fn) {
|
||||
|
|
@ -165,21 +165,27 @@ function polygon(option, fn) {
|
|||
return `polygon(${ points.join(',') })`;
|
||||
}
|
||||
|
||||
|
||||
function circle() {
|
||||
return 'circle(49.5%)';
|
||||
function rotate(x, y, deg) {
|
||||
var rad = DEG * deg;
|
||||
return [
|
||||
x * cos(rad) - y * sin(rad),
|
||||
y * cos(rad) + x * sin(rad)
|
||||
];
|
||||
}
|
||||
|
||||
function siogon(sides = 3) {
|
||||
return polygon({ split: minmax(sides, 3, 8) });
|
||||
function circle() {
|
||||
return 'circle(49%)';
|
||||
}
|
||||
|
||||
function triangle() {
|
||||
return polygon({ split: 3, start: -90 });
|
||||
return polygon({ split: 3, start: -90 }, t => [
|
||||
cos(t) * 1.1,
|
||||
sin(t) * 1.1 + .2
|
||||
]);
|
||||
}
|
||||
|
||||
function rhombus() {
|
||||
return siogon(4);
|
||||
return polygon({ split: 4 });
|
||||
}
|
||||
|
||||
function pentagon() {
|
||||
|
|
@ -190,6 +196,14 @@ function hexgon() {
|
|||
return polygon({ split: 6, start: 30 });
|
||||
}
|
||||
|
||||
function heptagon() {
|
||||
return polygon({ split: 7, start: -90});
|
||||
}
|
||||
|
||||
function octagon() {
|
||||
return polygon({ split: 8});
|
||||
}
|
||||
|
||||
function star() {
|
||||
return polygon({ split: 5, start: 54, deg: 144 });
|
||||
}
|
||||
|
|
@ -209,33 +223,37 @@ function cross() {
|
|||
function clover(k = 3) {
|
||||
k = minmax(k, 3, 5);
|
||||
if (k == 4) k = 2;
|
||||
return polygon({ split: 240 }, t => [
|
||||
cos(k * t) * cos(t),
|
||||
cos(k * t) * sin(t)
|
||||
]);
|
||||
return polygon({ split: 240 }, t => {
|
||||
var x = cos(k * t) * cos(t);
|
||||
var y = cos(k * t) * sin(t);
|
||||
if (k == 3) x -= .2;
|
||||
if (k == 2) {
|
||||
x /= 1.1;
|
||||
y /= 1.1;
|
||||
}
|
||||
return [x, y];
|
||||
});
|
||||
}
|
||||
|
||||
function hypocycloid(k = 3) {
|
||||
k = minmax(k, 3, 6);
|
||||
var m = 1 - k;
|
||||
return polygon({ scale: 1 / k }, t => [
|
||||
m * cos(t) + cos(m * (t - PI)),
|
||||
m * sin(t) + sin(m * (t - PI))
|
||||
]);
|
||||
return polygon({ scale: 1 / k }, t => {
|
||||
var x = m * cos(t) + cos(m * (t - PI));
|
||||
var y = m * sin(t) + sin(m * (t - PI));
|
||||
if (k == 3) {
|
||||
x = x * 1.1 - .6;
|
||||
y = y * 1.1;
|
||||
}
|
||||
return [x, y];
|
||||
});
|
||||
}
|
||||
|
||||
function astroid() {
|
||||
return hypocycloid(4);
|
||||
}
|
||||
|
||||
function tie() {
|
||||
return polygon(t => [
|
||||
cos(t),
|
||||
sin(t * 2) / 2
|
||||
]);
|
||||
}
|
||||
|
||||
function eternity() {
|
||||
function infinity() {
|
||||
return polygon(t => {
|
||||
var a = .7 * sqrt(2) * cos(t);
|
||||
var b = (pow(sin(t), 2) + 1);
|
||||
|
|
@ -254,30 +272,78 @@ function heart() {
|
|||
- cos(2 * t) * (5 / 18)
|
||||
- cos(3 * t) / 18
|
||||
- cos(4 * t) / 18;
|
||||
return [
|
||||
(-x - y * sin(PI)),
|
||||
(-y + x * sin(PI)) - .2
|
||||
];
|
||||
return rotate(
|
||||
x * 1.2, (y + .2) * 1.1, 180
|
||||
)
|
||||
});
|
||||
}
|
||||
|
||||
function bean() {
|
||||
return polygon(t => {
|
||||
var [a, b] = [pow(sin(t), 3), pow(cos(t), 3)];
|
||||
return rotate(
|
||||
(a + b) * cos(t) * 1.3 - .45,
|
||||
(a + b) * sin(t) * 1.3 - .45,
|
||||
-90
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
function bicorn() {
|
||||
return polygon(t => rotate(
|
||||
cos(t),
|
||||
pow(sin(t), 2) / (2 + sin(t)) - .5,
|
||||
180
|
||||
));
|
||||
}
|
||||
|
||||
function pear() {
|
||||
return polygon(t => [
|
||||
sin(t),
|
||||
(1 + sin(t)) * cos(t) / 1.4
|
||||
]);
|
||||
}
|
||||
|
||||
function fish() {
|
||||
return polygon(t => [
|
||||
cos(t) - pow(sin(t), 2) / sqrt(2),
|
||||
sin(2 * t) / 2
|
||||
]);
|
||||
}
|
||||
|
||||
function whale() {
|
||||
return polygon({ split: 240 }, t => {
|
||||
var r = 3.4 * (pow(sin(t), 2) - .5) * cos(t);
|
||||
return rotate(
|
||||
cos(t) * r + .75,
|
||||
sin(t) * r * 1.2,
|
||||
180
|
||||
)
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
var shapes = Object.freeze({
|
||||
circle: circle,
|
||||
siogon: siogon,
|
||||
triangle: triangle,
|
||||
rhombus: rhombus,
|
||||
pentagon: pentagon,
|
||||
hexgon: hexgon,
|
||||
heptagon: heptagon,
|
||||
octagon: octagon,
|
||||
star: star,
|
||||
diamond: diamond,
|
||||
cross: cross,
|
||||
clover: clover,
|
||||
hypocycloid: hypocycloid,
|
||||
astroid: astroid,
|
||||
tie: tie,
|
||||
eternity: eternity,
|
||||
heart: heart
|
||||
infinity: infinity,
|
||||
heart: heart,
|
||||
bean: bean,
|
||||
bicorn: bicorn,
|
||||
pear: pear,
|
||||
fish: fish,
|
||||
whale: whale
|
||||
});
|
||||
|
||||
function index(x, y, count) {
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -7,8 +7,8 @@
|
|||
<meta name="description" content="A web component for drawing patterns with css">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="lib/codemirror/style.css">
|
||||
<link rel="stylesheet" href="style.css?b4f639c144387">
|
||||
<script src="lib/css-doodle.min.js?b4f639c144387"></script>
|
||||
<link rel="stylesheet" href="style.css?b0aa4878c23ec">
|
||||
<script src="lib/css-doodle.min.js?b0aa4878c23ec"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
|
@ -678,7 +678,7 @@
|
|||
|
||||
<script src="lib/codemirror/core.js"></script>
|
||||
<script src="lib/codemirror/lang/css.js"></script>
|
||||
<script src="main.js?9be1b45c20675"></script>
|
||||
<script src="main.js?b0aa4878c23ec"></script>
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
31
docs/main.js
31
docs/main.js
|
|
@ -133,34 +133,35 @@
|
|||
});
|
||||
|
||||
var shapes = [
|
||||
{ name: 'circle' },
|
||||
{ name: 'triangle' },
|
||||
{ name: 'rhombus' },
|
||||
{ name: 'pentagon' },
|
||||
{ name: 'hexgon' },
|
||||
{ name: 'circle' },
|
||||
{ name: 'star' },
|
||||
{ name: 'diamond' },
|
||||
{ name: 'heptagon' },
|
||||
{ name: 'octagon' },
|
||||
{ name: 'cross' },
|
||||
|
||||
{ name: 'siogon', param: 3 },
|
||||
{ name: 'siogon', param: 4 },
|
||||
{ name: 'siogon', param: 5 },
|
||||
{ name: 'siogon', param: 6 },
|
||||
{ name: 'siogon', param: 7 },
|
||||
{ name: 'siogon', param: 8 },
|
||||
{ name: 'star' },
|
||||
{ name: 'diamond' },
|
||||
|
||||
{ name: 'tie' },
|
||||
{ name: 'eternity' },
|
||||
{ name: 'infinity' },
|
||||
{ name: 'heart' },
|
||||
|
||||
{ name: 'fish' },
|
||||
{ name: 'whale' },
|
||||
{ name: 'pear' },
|
||||
{ name: 'bean' },
|
||||
|
||||
{ name: 'hypocycloid', param: 3 },
|
||||
{ name: 'hypocycloid', param: 4 },
|
||||
{ name: 'hypocycloid', param: 5 },
|
||||
{ name: 'hypocycloid', param: 6 },
|
||||
|
||||
{ name: 'bicorn' },
|
||||
{ name: 'clover', param: 3 },
|
||||
{ name: 'clover', param: 4 },
|
||||
{ name: 'clover', param: 5 },
|
||||
{ name: 'heart' }
|
||||
{ name: 'clover', param: 5 }
|
||||
|
||||
];
|
||||
|
||||
|
|
@ -174,7 +175,9 @@
|
|||
}
|
||||
</css-doodle>
|
||||
<p class="title">
|
||||
(${ n.name }${ n.param ? ', ' + n.param : '' })
|
||||
${
|
||||
(n.param ? '(' + n.name +', ' + n.param + ')' : n.name)
|
||||
}
|
||||
</p>
|
||||
</div>
|
||||
`
|
||||
|
|
|
|||
117
src/shapes.js
117
src/shapes.js
|
|
@ -31,21 +31,27 @@ function polygon(option, fn) {
|
|||
return `polygon(${ points.join(',') })`;
|
||||
}
|
||||
|
||||
|
||||
export function circle() {
|
||||
return 'circle(49.5%)';
|
||||
function rotate(x, y, deg) {
|
||||
var rad = DEG * deg;
|
||||
return [
|
||||
x * cos(rad) - y * sin(rad),
|
||||
y * cos(rad) + x * sin(rad)
|
||||
];
|
||||
}
|
||||
|
||||
export function siogon(sides = 3) {
|
||||
return polygon({ split: minmax(sides, 3, 8) });
|
||||
export function circle() {
|
||||
return 'circle(49%)';
|
||||
}
|
||||
|
||||
export function triangle() {
|
||||
return polygon({ split: 3, start: -90 });
|
||||
return polygon({ split: 3, start: -90 }, t => [
|
||||
cos(t) * 1.1,
|
||||
sin(t) * 1.1 + .2
|
||||
]);
|
||||
}
|
||||
|
||||
export function rhombus() {
|
||||
return siogon(4);
|
||||
return polygon({ split: 4 });
|
||||
}
|
||||
|
||||
export function pentagon() {
|
||||
|
|
@ -56,6 +62,14 @@ export function hexgon() {
|
|||
return polygon({ split: 6, start: 30 });
|
||||
}
|
||||
|
||||
export function heptagon() {
|
||||
return polygon({ split: 7, start: -90});
|
||||
}
|
||||
|
||||
export function octagon() {
|
||||
return polygon({ split: 8});
|
||||
}
|
||||
|
||||
export function star() {
|
||||
return polygon({ split: 5, start: 54, deg: 144 });
|
||||
}
|
||||
|
|
@ -75,33 +89,37 @@ export function cross() {
|
|||
export function clover(k = 3) {
|
||||
k = minmax(k, 3, 5);
|
||||
if (k == 4) k = 2;
|
||||
return polygon({ split: 240 }, t => [
|
||||
cos(k * t) * cos(t),
|
||||
cos(k * t) * sin(t)
|
||||
]);
|
||||
return polygon({ split: 240 }, t => {
|
||||
var x = cos(k * t) * cos(t);
|
||||
var y = cos(k * t) * sin(t);
|
||||
if (k == 3) x -= .2;
|
||||
if (k == 2) {
|
||||
x /= 1.1;
|
||||
y /= 1.1;
|
||||
}
|
||||
return [x, y];
|
||||
});
|
||||
}
|
||||
|
||||
export function hypocycloid(k = 3) {
|
||||
k = minmax(k, 3, 6);
|
||||
var m = 1 - k;
|
||||
return polygon({ scale: 1 / k }, t => [
|
||||
m * cos(t) + cos(m * (t - PI)),
|
||||
m * sin(t) + sin(m * (t - PI))
|
||||
]);
|
||||
return polygon({ scale: 1 / k }, t => {
|
||||
var x = m * cos(t) + cos(m * (t - PI));
|
||||
var y = m * sin(t) + sin(m * (t - PI));
|
||||
if (k == 3) {
|
||||
x = x * 1.1 - .6;
|
||||
y = y * 1.1
|
||||
}
|
||||
return [x, y];
|
||||
});
|
||||
}
|
||||
|
||||
export function astroid() {
|
||||
return hypocycloid(4);
|
||||
}
|
||||
|
||||
export function tie() {
|
||||
return polygon(t => [
|
||||
cos(t),
|
||||
sin(t * 2) / 2
|
||||
]);
|
||||
}
|
||||
|
||||
export function eternity() {
|
||||
export function infinity() {
|
||||
return polygon(t => {
|
||||
var a = .7 * sqrt(2) * cos(t);
|
||||
var b = (pow(sin(t), 2) + 1);
|
||||
|
|
@ -120,9 +138,54 @@ export function heart() {
|
|||
- cos(2 * t) * (5 / 18)
|
||||
- cos(3 * t) / 18
|
||||
- cos(4 * t) / 18;
|
||||
return [
|
||||
(-x - y * sin(PI)),
|
||||
(-y + x * sin(PI)) - .2
|
||||
];
|
||||
return rotate(
|
||||
x * 1.2,
|
||||
(y + .2) * 1.1,
|
||||
180
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
export function bean() {
|
||||
return polygon(t => {
|
||||
var [a, b] = [pow(sin(t), 3), pow(cos(t), 3)];
|
||||
return rotate(
|
||||
(a + b) * cos(t) * 1.3 - .45,
|
||||
(a + b) * sin(t) * 1.3 - .45,
|
||||
-90
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
export function bicorn() {
|
||||
return polygon(t => rotate(
|
||||
cos(t),
|
||||
pow(sin(t), 2) / (2 + sin(t)) - .5,
|
||||
180
|
||||
));
|
||||
}
|
||||
|
||||
export function pear() {
|
||||
return polygon(t => [
|
||||
sin(t),
|
||||
(1 + sin(t)) * cos(t) / 1.4
|
||||
]);
|
||||
}
|
||||
|
||||
export function fish() {
|
||||
return polygon(t => [
|
||||
cos(t) - pow(sin(t), 2) / sqrt(2),
|
||||
sin(2 * t) / 2
|
||||
]);
|
||||
}
|
||||
|
||||
export function whale() {
|
||||
return polygon({ split: 240 }, t => {
|
||||
var r = 3.4 * (pow(sin(t), 2) - .5) * cos(t);
|
||||
return rotate(
|
||||
cos(t) * r + .75,
|
||||
sin(t) * r * 1.2,
|
||||
180
|
||||
);
|
||||
});
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue