moving-mondrian

commit

8c1e157030a8a686405068a020095c7e6fde4389

parent

c1eae40cc27c0ac105b070196887aefff25534da

Author

Tobias Bengfort <tobias.bengfort@posteo.de>

Date

2024-05-10 19:04

add easing function

Diffstat

1 files changed, 16 insertions, 7 deletions

diff --git a/mondrian.js b/mondrian.js

@@ -1,4 +1,4 @@
    1    -1 var speed = 2;  // percent per second
   -1     1 var speed = 3;  // percent per second
    2     2 
    3     3 var createLeaf = function() {
    4     4 	var element = document.createElement("div");
@@ -25,6 +25,14 @@ var getRelSize = function(element) {
   25    25 	return getSize(element) / getSize(root);
   26    26 }
   27    27 
   -1    28 var easing = function(x) {
   -1    29 	return (Math.pow(x * 2 - 1, 3) + 1) / 2;
   -1    30 };
   -1    31 
   -1    32 var easing_inverse = function(y) {
   -1    33 	return (Math.cbrt(y * 2 - 1) + 1) / 2;
   -1    34 };
   -1    35 
   28    36 var animate = function(element, delta) {
   29    37 	if (element.children.length) {
   30    38 		for (var i = 0; i < element.children.length; i++) {
@@ -32,21 +40,22 @@ var animate = function(element, delta) {
   32    40 		}
   33    41 
   34    42 		var pos = parseFloat(element.style.getPropertyValue("--pos"));
   -1    43 		var x = easing_inverse(pos);
   35    44 		if (element.dataset.grow) {
   36    -1 			pos += delta / 1000 / 100 * speed;
   37    -1 			if (pos >= 1){
   -1    45 			x += delta / 1000 / 100 * speed;
   -1    46 			if (x >= 1){
   38    47 				element.before(element.children[0]);
   39    48 				element.remove();
   40    49 			} else {
   41    -1 				element.style.setProperty("--pos", pos);
   -1    50 				element.style.setProperty("--pos", easing(x));
   42    51 			}
   43    52 		} else {
   44    -1 			pos -= delta / 1000 / 100 * speed;
   45    -1 			if (pos <= 0){
   -1    53 			x -= delta / 1000 / 100 * speed;
   -1    54 			if (x <= 0){
   46    55 				element.before(element.children[1]);
   47    56 				element.remove();
   48    57 			} else {
   49    -1 				element.style.setProperty("--pos", pos);
   -1    58 				element.style.setProperty("--pos", easing(x));
   50    59 			}
   51    60 		}
   52    61 	} else if (Math.random() < delta / 1000 * getRelSize(element)){