<div id="morph"></div>



<div class="frame_1">
 <svg width="580" height="400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 621.69 605.5"><defs><style>.shape_svg{fill:#ff0;stroke:#000;stroke-miterlimit:10;}</style></defs><title>1</title>
   <path class="shape_svg" d="M1037.5,403.5C958.4300000000001,388.64,705.5,366.5,705.5,366.5L670.5,7.5L654.5,365.5L302.5,393.5L653.71,409.33L682.5,751.5L702.5,408.29Z" transform="translate(-365.81 -73.5)"/></svg>
</div>

input[type=range]{
  width:100%;
}

function get_path(d){
  return $(d).attr('d');
};

//Общая функция
function conect_morh(name_svg, morh_arr_name, add_opt){
//Массив всех морфов
morh_arr_name["start"] = $(name_svg).attr('d')

//Перебор масива
$.each(morh_arr_name, function(key, value ) {
if (key != 'start'){

//Создать ползунок контроля морфа
str_name = "s_opt_";
ran_id = str_name+"run_"+key;
box_id = str_name+"box_"+key;
$(add_opt).append('<div class ="'+str_name+'_block" id="'+str_name+'_block_'+key+'"><label>'+key+'</label><input type="range" min="0" max="100" step="1" value="0" class="'+key+'" id="'+ran_id+'" /><input type="checkbox" name="'+box_id+'" id="'+box_id+'" /><input type="number" step="1" value="0" id="'+key+'_cookie" /></div>');
//Запуск ползунка
$("#"+ran_id).change(function() {



//Получить id чекбокса
var box_id = str_name+"box_"+$(this).attr('class');
//Получить сроку svg
now_pach = $(name_svg).attr('d');
//Узнать уменьшается или увеличивается значение
var num_step =  Number($("#"+$(this).attr('class')+"_cookie").val());
console.log('--------');
console.log(num_step);
console.log('--------');


 


//Получить массив точек текущего файла
var arr_now_point = toPoints({type: 'path', d: now_pach});
//Получить массив точек морфа
var arr_point_end = toPoints({type: 'path', d: value});
//Получить массив точек начального морфа
var arr_point_start = toPoints({type: 'path', d: morh_arr_name["start"]});
 


//Условие одинаковости
if(JSON.stringify(arr_point_start)==JSON.stringify(arr_now_point)) {
  num_step = 0;
  console.log('loi');
  
 // console.log(arr_point_start);
 // console.log(arr_now_point);
  
}
  
 //Ползунок
var ran_start = num_step; // 2
var ran_end = $(this).attr('max');  // 10  
var ran_now = Number($(this).val()); // 3




//Функций пересчета пути
function morh_up_str(start, now, end){
var run_step = (end - start) / (ran_end - ran_start);    
var new_val = start+run_step*(ran_now-ran_start); 

  
  
  
return  new_val
}
function morh_dw_str(start, now, end){
var run_step = (now-start)/ran_start; 
var new_val = now-run_step*(ran_start-ran_now); 

return  new_val
}
function morh_up_inc(start, now, end){
var run_step = (end-start)/ran_end; //1  
var new_val = now+run_step*(ran_now-ran_start);  
  
//console.log('start'); 
//console.log(start);
//console.log('now'); 
//console.log(now);
//console.log('end'); 
//console.log(end); 
//console.log('ran_now'); 
//console.log(ran_now); 
//console.log('ran_start'); 
//console.log(ran_start);
//console.log('run_step'); 
//console.log(run_step);
//console.log('new_val');
//console.log(new_val);
 
  
 
 


 
  
return new_val;
}
function morh_dw_inc(start, now, end){
var run_step = (end-start)/ran_end; //1 
var new_val = now-run_step*(ran_start-ran_now);  
return new_val;


//console.log('start'); 
//console.log(start);
//console.log('now'); 
//console.log(now);
//console.log('end'); 
//console.log(end); 
//console.log('ran_now'); 
//console.log(ran_now); 
//console.log('ran_start'); 
//console.log(ran_start);
//console.log('run_step'); 
//console.log(run_step);
//console.log('new_val');
//console.log(new_val);









}













//проверить количество элементов
if(arr_point_end.length != arr_now_point.length){
console.log('%c[WARNING]', 'color: white; background: yellow;', 'arr_point_end = '+ arr_point_end.length + 'arr_now_point = ' + arr_now_point.length);
}
//Создать результат массива
var result = [];
//Какую функцию запускать?
 var func;
//Ползунок поднимается или опускается?
  
     //console.log('ASK');
    //console.log(num_step);
  //console.log(ran_now);
 
  
if (num_step < ran_now){ 
// проверить включен ли чекбокс
console.log('up');
if($("#"+box_id).prop("checked") == true ){
func = morh_up_str;
console.log('on');
} else {
func = morh_up_inc;
console.log('off');
}
//Обновить куки 
$("#"+str_name+'_block_'+$(this).attr('class')).css({'background':'green'});
$("#"+$(this).attr('class')+"_cookie").val(ran_now)
}
else if (num_step > ran_now){
console.log('down');
// проверить включен ли чекбокс
if($("#"+box_id).prop("checked") == true ){
func = morh_dw_str;
console.log('on');
} else {
func = morh_dw_inc;
console.log('off');
}
//Обновить куки 
$("#"+str_name+'_block_'+$(this).attr('class')).css({'background':'blue'});
$("#"+$(this).attr('class')+"_cookie").val(ran_now)
}





now_test = [{x: 10, y: 10}];
star_test = [{x: 10, y: 10}];
end_test = [{x: 20, y: 20}];

//Запуск подсчета
for(let idx = 0; idx < arr_now_point.length; idx++){
    const a = arr_point_start[idx],
          b = arr_now_point[idx],
          c = arr_point_end[idx]; 
   // console.log("start");
//  console.log(a);
 //   console.log("now");
 //     console.log(b);
//  console.log("end");
 //   console.log(c);
    var item =  { };
  
  
  
  
  
  
  
  
  
  
  
   
if(c){
    const curve = a.curve || b.curve || c.curve;         
    

  
  
  
  

  
  
if(curve){
var face_item = {}

face_item.x = func(a.x, b.x, c.x);
face_item.y = func(a.y, b.y, c.y);


//console.log("curve");
const points = ['x1', 'y1', 'x2', 'y2'];

face_item.curve = { type: 'cubic' };
var nok = 0
let cp = (v,p) => v.curve ? v.curve[p] : (p == 'x1' || p == 'x2') ? v.x : (p == 'y1'|| p == 'y2') ? v.y : 0;
points.forEach(function(p){
face_item.curve[p] = func(cp(a,p), cp(b,p), cp(c,p));
if(  ( face_item.curve['x1'] == face_item.x ) || ( face_item.curve['x2'] == face_item.x ) || ( face_item.curve['y1'] == face_item.y ) || ( face_item.curve['y2'] == face_item.y ) ){ nok++}
});

if (nok != 4 ){
console.log("ERROR"+nok);
item = face_item;
}


}


//console.log("pos");
item.x = func(a.x, b.x, c.x);
item.y = func(a.y, b.y, c.y);


if(a.moveTo){
item.moveTo = a.moveTo;
}
  
  

}
else if(c === undefined) {
item = a ;
}
result.push(item);
} 
//console.log(result);
$(name_svg).attr('d',toPath(result)) ;

















});


$("#"+box_id).change(function() {
alert(this.checked);
});


}

});












}


 


 

 
 
 
 
 
 
 
morh_arr = {
  "path1":"M366.5,74.5c1.19,58.5-.19,314.24-.19,314.24V678.5H987V74H670.89Z",
  "path2": "M366.5,74.5c43,68,289,295,289,295l-289.19,309,317.19-279L987,678.5l-270.5-308L987,74,682.5,335.5Z",
  "path3": "M148.802,244.876c2.737-36.735,16.107-69.079,40.099-97.061c27.038-31.596,60.924-47.386,101.629-47.386c15.481,0,38.483,2.447,69.024,7.287c30.541,4.886,53.533,7.278,69.033,7.278c23.693,0,57.868,8.847,102.526,26.477c7.914,3.009,17.471,11.239,28.701,24.59c6.381,7.886,16.256,19.769,29.616,35.568c3.036,2.139,6.998,5.316,11.865,9.595c4.859,4.223,8.194,6.063,9.997,5.456c0.616-1.84,2.149-4.4,4.578-7.735c1.214-1.225,1.962-1.832,2.261-1.832c0.935,0.607,1.831,1.215,2.747,1.832c0.906,0.616,1.205,2.419,0.906,5.456c-0.616,5.474-0.906,7.138-0.906,4.998c-0.327,3.056-0.757,5.008-1.373,5.952c-3.952,6.671-5.485,11.847-4.55,15.472c0.916,3.325,3.765,8.669,8.642,15.958c4.868,7.287,7.586,12.761,8.193,16.405c-0.299,2.728-0.43,7.119-0.43,13.211l-4.568,11.379c0,8.512,9.865,23.114,29.616,43.78c9.436,4.223,14.117,18.826,14.117,43.714c0,19.47-16.089,29.167-48.273,29.167c-4.26,0-8.81-0.13-13.678-0.467c-3.335-1.196-8.203-2.56-14.575-4.074c-7.586-0.934-12.761-3.494-15.48-7.773c-4.877-6.95-12.781-13.509-23.711-19.581c-1.823-0.878-4.485-4.223-7.979-10.016c-3.503-5.774-6.615-9.418-9.333-10.949c-2.719-1.495-6.68-1.813-11.856-0.878c-8.81,1.494-13.677,2.261-14.574,2.261c-2.139,0-5.25-0.598-9.343-1.831c-4.11-1.215-7.054-1.831-8.893-1.831c-2.112,9.735-2.589,19.152-1.364,28.252c0.298,2.448,1.831,4.428,4.559,5.923c4.27,3.046,6.531,4.709,6.849,5.045c2.718,2.111,5.615,5.605,8.642,10.445c0.616,1.849-0.523,4.952-3.419,9.342c-2.887,4.41-5.223,7.008-7.063,7.736c-1.813,0.785-5.765,1.178-11.847,1.178c-8.82,0-12.295,0.131-10.464,0.43c-12.145-1.831-18.984-2.878-20.516-3.158c-7.587-1.532-14.126-3.943-19.582-7.305c-2.756-1.813-5.913-10.333-9.557-25.524c-3.681-16.406-6.717-26.272-9.137-29.635c-0.598-0.896-1.355-1.326-2.261-1.326c-1.533,0-4.045,1.494-7.53,4.559c-3.494,2.99-5.858,4.652-7.054,5.008c-4.242,17.9-6.4,26.402-6.4,25.468c0,7.007,1.972,12.892,5.924,17.77c3.943,4.858,8.063,9.567,12.323,14.107c5.157,5.774,7.736,10.782,7.736,15.042c0,2.41-0.748,4.521-2.28,6.372c-6.381,7.885-17.022,11.847-31.905,11.847c-16.713,0-27.644-2.28-32.792-6.839c-6.699-5.774-10.949-11.865-12.762-18.199c-0.298-1.533-1.055-6.091-2.28-13.678c-0.607-4.578-1.98-7.287-4.082-8.184c-6.101-0.916-13.687-2.578-22.778-5.007c-1.841-1.215-3.811-4.26-5.942-9.118c-3.933-9.399-6.83-15.789-8.661-19.134c-9.128-4.56-23.702-9.698-43.761-15.453c-0.916,1.831-1.345,4.373-1.345,7.718c3.335,4.26,8.343,10.8,15.032,19.581c5.466,7.288,8.203,14.295,8.203,20.965c0,12.781-8.203,19.134-24.609,19.134c-12.453,0-20.955-0.878-25.523-2.709c-6.671-2.728-12.295-9.136-16.854-19.134c-7.596-16.742-11.847-26.159-12.762-28.27c-4.868-11.231-8.204-21.133-10.006-29.653c-1.233-6.055-3.064-15.35-5.485-27.804c-2.121-10.296-5.456-18.358-10.015-24.132C155.332,279.36,147.578,260.665,148.802,244.876z"
};


conect_morh('.shape_svg', morh_arr, "#morph")