1128 lines
59 KiB
JavaScript
1128 lines
59 KiB
JavaScript
const canvas=document.querySelector('#field');
|
||
const ctx=canvas.getContext('2d',{alpha:false});
|
||
const ui={
|
||
formula:document.querySelector('#formula-panel'),
|
||
gallery:document.querySelector('#gallery-panel'),
|
||
archive:document.querySelector('#archive'),
|
||
cross:document.querySelector('#cross'),
|
||
progress:document.querySelector('#generation-progress'),
|
||
generationStatus:document.querySelector('#generation-status'),
|
||
renderStatus:document.querySelector('#render-status'),
|
||
storageStatus:document.querySelector('#storage-status')
|
||
};
|
||
|
||
const LEGACY_STORE_KEY='fractalier:clean-start:v2';
|
||
const DB_NAME='fractalier-player-data';
|
||
const DB_STATE='state';
|
||
const DB_HISTORY='population';
|
||
const MAX_PATHS=3200;
|
||
const REVEAL_TIME=2200;
|
||
const PREVIEW_TIME=1800;
|
||
const HISTORY_PAGE=48;
|
||
const MIX_OPTIONS=[.2,.35,.5,.65,.8];
|
||
const MUTATION_PROFILES=[
|
||
{name:'stable',strength:.55,structural:.025},
|
||
{name:'natural',strength:1,structural:.07},
|
||
{name:'active',strength:1.45,structural:.15},
|
||
{name:'volatile',strength:2,structural:.26}
|
||
];
|
||
|
||
let width=0,height=0,background;
|
||
let view={scale:1,offsetX:0,offsetY:0};
|
||
let database=null,storedHistoryIds=new Set(),historyVisible=HISTORY_PAGE;
|
||
let animationFrame=0,animationToken=0,previewAnimationFrame=0,previewToken=0,lastProgress=1,galleryOpen=false,toastTimer=0,isBusy=false;
|
||
let state=freshState();
|
||
|
||
function normalizeBreeding(value){
|
||
const requested=Number(value?.mix);
|
||
const requestedLevel=Number(value?.mutationLevel);
|
||
const mix=MIX_OPTIONS.reduce((closest,option)=>Math.abs(option-requested)<Math.abs(closest-requested)?option:closest,.5);
|
||
return{
|
||
mix:Number.isFinite(requested)?mix:.5,
|
||
mutationLevel:Number.isFinite(requestedLevel)?clamp(Math.round(requestedLevel),0,3):1
|
||
};
|
||
}
|
||
function freshState(){return{version:7,history:[],nextId:1,current:null,selectedParents:[],breeding:normalizeBreeding({mix:.5,mutationLevel:1})}}
|
||
function baseGenome(){
|
||
return{
|
||
family:'arboreal',branches:2,angle:.52,scale:.68,depth:8,symmetry:1,anchors:1,anchorStart:.65,
|
||
twist:0,bend:.055,turn:0,angleDrift:0,scaleDrift:0,alternation:0,closure:0,
|
||
angleWave:0,angleFrequency:1.618,scaleWave:0,scaleFrequency:2.399963,phase:0,
|
||
curvatureDrift:0,branchBias:0,facets:14,tipSides:0,tipScale:.28,
|
||
figureSides:0,figureSpan:.5,figureScale:.22,figureEvery:2,figureSpin:0,
|
||
curveMode:0,curveAmplitude:0,curveFrequency:1,
|
||
rootLayout:0,rootSpread:Math.PI*2,rootSpacing:.12,
|
||
rootLength:.235,lineWidth:1.75,hue:94,hueStep:8,saturation:72,lightness:70,growthOverlap:.42
|
||
};
|
||
}
|
||
function normalizeGenome(genome){return{...baseGenome(),...(genome||{})}}
|
||
function clamp(value,min,max){return Math.max(min,Math.min(max,value))}
|
||
function randomFrom(seed,...values){
|
||
let value=seed|0;
|
||
for(const part of values)value=Math.imul(value^Math.floor(part*100003),2654435761);
|
||
value^=value>>>16;
|
||
return(value>>>0)/4294967296;
|
||
}
|
||
function randomSeed(){
|
||
if(globalThis.crypto?.getRandomValues){const value=new Uint32Array(1);crypto.getRandomValues(value);return value[0]}
|
||
return Math.floor(Math.random()*4294967295);
|
||
}
|
||
function pick(seed,salt,items){return items[Math.floor(randomFrom(seed,salt)*items.length)]}
|
||
function range(seed,salt,min,max){return min+randomFrom(seed,salt)*(max-min)}
|
||
function formulaId(id){return`F${String(id).padStart(3,'0')}`}
|
||
function familyName(family){
|
||
return{
|
||
arboreal:'Recursive bloom',
|
||
radial:'Radial constellation',
|
||
crystal:'Geometric crystal',
|
||
spiral:'Spiral recursion',
|
||
lattice:'Connected lattice',
|
||
fan:'Angular fan',
|
||
field:'Parallel field',
|
||
bilateral:'Bilateral weave'
|
||
}[family]||'Recursive structure';
|
||
}
|
||
function curveName(mode){return['linear','sine','cosine','tangent','harmonic'][Math.round(mode)]||'linear'}
|
||
function layoutName(mode){return['radial','fan','parallel','bilateral'][Math.round(mode)]||'radial'}
|
||
function mixName(mix){
|
||
const a=Math.round(mix*100);
|
||
return`${a}% A · ${100-a}% B`;
|
||
}
|
||
function classifyFamily(genome){
|
||
if(genome.family)return genome.family;
|
||
if(genome.rootLayout===1)return'fan';
|
||
if(genome.rootLayout===2)return'field';
|
||
if(genome.rootLayout===3)return'bilateral';
|
||
if(genome.closure>.35)return'lattice';
|
||
if(Math.abs(genome.turn)>.35||Math.abs(genome.twist)>.3)return'spiral';
|
||
if(genome.symmetry>=6&&Math.abs(genome.bend)<.08)return'crystal';
|
||
if(genome.symmetry>1)return'radial';
|
||
return'arboreal';
|
||
}
|
||
function normalizeRecord(item){
|
||
const genome=normalizeGenome(item?.genome);
|
||
genome.family=classifyFamily(genome);
|
||
return{
|
||
id:Number(item?.id)||1,
|
||
seed:Number(item?.seed)||Number(item?.id)||1,
|
||
genome,
|
||
thumbnail:item?.thumbnail||'',
|
||
thumbnailVersion:item?.thumbnailVersion||0,
|
||
createdAt:item?.createdAt||Date.now(),
|
||
source:item?.source||'legacy',
|
||
parents:item?.parents||[],
|
||
inheritance:item?.inheritance||null,
|
||
mutations:item?.mutations||[],
|
||
breeding:item?.breeding?normalizeBreeding(item.breeding):null
|
||
};
|
||
}
|
||
|
||
function openDatabase(){
|
||
return new Promise((resolve,reject)=>{
|
||
const request=indexedDB.open(DB_NAME,2);
|
||
request.onupgradeneeded=()=>{
|
||
if(!request.result.objectStoreNames.contains(DB_STATE))request.result.createObjectStore(DB_STATE);
|
||
if(!request.result.objectStoreNames.contains(DB_HISTORY))request.result.createObjectStore(DB_HISTORY,{keyPath:'id'});
|
||
};
|
||
request.onsuccess=()=>resolve(request.result);
|
||
request.onerror=()=>reject(request.error);
|
||
});
|
||
}
|
||
function readStore(store,key){
|
||
return new Promise((resolve,reject)=>{
|
||
const objectStore=database.transaction(store,'readonly').objectStore(store);
|
||
const request=key===undefined?objectStore.getAll():objectStore.get(key);
|
||
request.onsuccess=()=>resolve(request.result);
|
||
request.onerror=()=>reject(request.error);
|
||
});
|
||
}
|
||
async function hydrateState(){
|
||
let legacy=null;
|
||
try{legacy=JSON.parse(localStorage.getItem(LEGACY_STORE_KEY))}catch{}
|
||
try{
|
||
database=await openDatabase();
|
||
const[saved,records]=await Promise.all([readStore(DB_STATE,'main'),readStore(DB_HISTORY)]);
|
||
const source=saved||legacy;
|
||
const rawHistory=records.length?records:(source?.history||source?.population||[]);
|
||
const history=rawHistory.map(normalizeRecord).sort((a,b)=>a.id-b.id);
|
||
const oldCurrent=source?.current;
|
||
const currentHistoryRecord=oldCurrent?history.find(item=>item.id===Number(oldCurrent.id)):null;
|
||
const current=oldCurrent?.genome?{
|
||
id:Number(oldCurrent.id)||history.at(-1)?.id||1,
|
||
seed:Number(oldCurrent.seed)||randomSeed(),
|
||
genome:normalizeGenome(oldCurrent.genome),
|
||
source:oldCurrent.source&&oldCurrent.source!=='restored'?oldCurrent.source:currentHistoryRecord?.source||'restored',
|
||
parents:oldCurrent.parents||[],inheritance:oldCurrent.inheritance||null,mutations:oldCurrent.mutations||[],
|
||
breeding:oldCurrent.breeding?normalizeBreeding(oldCurrent.breeding):currentHistoryRecord?.breeding||null
|
||
}:history.length?{...history.at(-1),source:'restored'}:null;
|
||
const nextId=Math.max(Number(source?.nextId||source?.nextOrganismId)||1,...history.map(item=>item.id+1),current?current.id+1:1);
|
||
const selectedParents=(source?.selectedParents||[]).filter(id=>history.some(item=>item.id===id)).slice(0,2);
|
||
const breeding=normalizeBreeding(source?.breeding);
|
||
state={version:7,history,nextId,current,selectedParents,breeding};
|
||
storedHistoryIds=new Set(records.map(item=>item.id));
|
||
if(saved?.version!==7||(!records.length&&history.length))saveState();
|
||
}catch(error){
|
||
console.warn('IndexedDB is unavailable; using a temporary session',error);
|
||
const history=(legacy?.population||[]).map(normalizeRecord);
|
||
state={
|
||
version:7,history,nextId:Math.max(1,...history.map(item=>item.id+1)),current:history.at(-1)||null,
|
||
selectedParents:[],breeding:normalizeBreeding(legacy?.breeding)
|
||
};
|
||
}
|
||
}
|
||
function persistableCurrent(){
|
||
if(!state.current)return null;
|
||
const{id,seed,genome,source,parents,inheritance,mutations,breeding}=state.current;
|
||
return{id,seed,genome,source,parents,inheritance,mutations,breeding};
|
||
}
|
||
function saveState(){
|
||
if(!database){ui.storageStatus.textContent='storage unavailable';return}
|
||
try{
|
||
const transaction=database.transaction([DB_STATE,DB_HISTORY],'readwrite');
|
||
transaction.objectStore(DB_STATE).put({
|
||
version:7,nextId:state.nextId,current:persistableCurrent(),selectedParents:state.selectedParents,
|
||
breeding:state.breeding,history:[]
|
||
},'main');
|
||
const historyStore=transaction.objectStore(DB_HISTORY);
|
||
const additions=state.history.filter(item=>!storedHistoryIds.has(item.id));
|
||
for(const item of additions)historyStore.put(item);
|
||
transaction.oncomplete=()=>{
|
||
for(const item of additions)storedHistoryIds.add(item.id);
|
||
if(ui.storageStatus.textContent!=='persistent local storage')ui.storageStatus.textContent='saved in this browser';
|
||
};
|
||
transaction.onerror=()=>{ui.storageStatus.textContent='local save failed'};
|
||
}catch(error){ui.storageStatus.textContent='local save failed';console.warn('Could not save the formula collection',error)}
|
||
}
|
||
async function refreshStorageStatus(){
|
||
if(!database){ui.storageStatus.textContent='storage unavailable';return}
|
||
try{
|
||
const persistent=await navigator.storage?.persisted?.();
|
||
ui.storageStatus.textContent=persistent?'persistent local storage':'saved in this browser';
|
||
}catch{ui.storageStatus.textContent='saved in this browser'}
|
||
}
|
||
async function requestPersistentStorage(){
|
||
if(!database||!navigator.storage?.persist)return;
|
||
try{
|
||
const persistent=await navigator.storage.persist();
|
||
ui.storageStatus.textContent=persistent?'persistent local storage':'saved in this browser';
|
||
}catch{ui.storageStatus.textContent='saved in this browser'}
|
||
}
|
||
|
||
function createGenome(seed){
|
||
const family=pick(seed,1,['arboreal','radial','radial','crystal','spiral','lattice','fan','field','bilateral']);
|
||
const g={...baseGenome(),family};
|
||
g.hue=range(seed,2,28,330);
|
||
g.hueStep=range(seed,3,-18,24);
|
||
g.saturation=range(seed,4,62,84);
|
||
g.lightness=range(seed,5,62,78);
|
||
g.lineWidth=range(seed,6,1.25,2.25);
|
||
g.rootLength=range(seed,7,.19,.29);
|
||
g.growthOverlap=range(seed,8,.35,.72);
|
||
g.phase=range(seed,9,0,Math.PI*2);
|
||
|
||
if(family==='arboreal'){
|
||
g.branches=pick(seed,10,[2,2,2,3]);g.symmetry=1;g.depth=g.branches===3?pick(seed,11,[5,6]):pick(seed,11,[7,8,9]);
|
||
g.angle=range(seed,12,.34,.78);g.scale=range(seed,13,.61,.74);g.bend=range(seed,14,-.16,.16);
|
||
g.twist=range(seed,15,-.055,.055);g.angleDrift=range(seed,16,-.035,.035);g.scaleDrift=range(seed,17,-.045,.045);
|
||
g.angleWave=range(seed,18,.015,.105);g.scaleWave=range(seed,19,.008,.052);
|
||
g.angleFrequency=range(seed,60,1.15,2.65);g.scaleFrequency=range(seed,61,1.4,3.1);
|
||
g.curvatureDrift=range(seed,62,-.08,.08);g.branchBias=range(seed,63,-.055,.055);
|
||
g.facets=pick(seed,64,[7,10,14,14]);
|
||
g.figureSides=randomFrom(seed,94)<.2?pick(seed,95,[3,4,5]):0;
|
||
g.figureSpan=range(seed,96,.22,.5);g.figureScale=range(seed,97,.12,.24);g.figureEvery=pick(seed,98,[2,3]);
|
||
g.figureSpin=range(seed,99,-.22,.22);
|
||
g.curveMode=pick(seed,120,[0,0,0,1,2]);g.curveAmplitude=g.curveMode?range(seed,121,.04,.16):0;
|
||
g.curveFrequency=range(seed,122,.65,1.5);
|
||
}else if(family==='radial'){
|
||
g.branches=2;g.symmetry=pick(seed,20,[3,4,5,6,8]);g.depth=pick(seed,21,[5,6,7]);
|
||
g.angle=range(seed,22,.24,.68);g.scale=range(seed,23,.56,.69);g.bend=range(seed,24,-.11,.11);
|
||
g.twist=range(seed,25,-.12,.12);g.angleDrift=range(seed,26,-.025,.045);
|
||
g.angleWave=range(seed,27,.035,.17);g.scaleWave=range(seed,28,.015,.09);
|
||
g.angleFrequency=range(seed,65,.8,2.8);g.scaleFrequency=range(seed,66,1.1,3.4);
|
||
g.curvatureDrift=range(seed,67,-.14,.14);g.branchBias=range(seed,68,-.09,.09);
|
||
g.facets=pick(seed,69,[8,10,14,14]);
|
||
g.figureSides=pick(seed,100,[0,0,3,4,5,6,8]);g.figureSpan=range(seed,101,.2,.62);
|
||
g.figureScale=range(seed,102,.1,.24);g.figureEvery=pick(seed,103,[2,2,3]);g.figureSpin=range(seed,104,-.35,.35);
|
||
g.curveMode=pick(seed,123,[0,0,1,2]);g.curveAmplitude=g.curveMode?range(seed,124,.04,.18):0;
|
||
g.curveFrequency=range(seed,125,.75,1.8);
|
||
}else if(family==='crystal'){
|
||
g.branches=2;g.symmetry=pick(seed,30,[4,6,6,8]);g.depth=pick(seed,31,[5,6]);
|
||
g.angle=pick(seed,32,[Math.PI/6,Math.PI/4,Math.PI/3]);g.scale=range(seed,33,.55,.66);
|
||
g.bend=0;g.twist=pick(seed,34,[0,0,Math.PI/12,-Math.PI/12]);g.closure=range(seed,35,.08,.38);
|
||
g.hueStep=range(seed,36,-8,12);
|
||
g.angleWave=range(seed,37,0,.065);g.scaleWave=range(seed,38,0,.045);
|
||
g.angleFrequency=pick(seed,70,[Math.PI/2,Math.PI*2/3,Math.PI]);g.scaleFrequency=pick(seed,71,[Math.PI/2,Math.PI]);
|
||
g.facets=pick(seed,72,[3,4,6]);g.tipSides=randomFrom(seed,73)<.4?pick(seed,74,[3,4,6]):0;
|
||
g.tipScale=range(seed,75,.22,.48);
|
||
g.figureSides=pick(seed,105,[3,4,6,6,8]);g.figureSpan=pick(seed,106,[.25,.5,.5,.75,1]);
|
||
g.figureScale=range(seed,107,.12,.28);g.figureEvery=pick(seed,108,[1,2]);g.figureSpin=pick(seed,109,[0,Math.PI/6,-Math.PI/6]);
|
||
g.curveMode=pick(seed,126,[0,0,0,3]);g.curveAmplitude=g.curveMode?range(seed,127,.025,.1):0;
|
||
g.curveFrequency=range(seed,128,.75,1.35);
|
||
}else if(family==='spiral'){
|
||
g.branches=pick(seed,40,[1,2,2]);g.symmetry=pick(seed,41,[3,4,5,6]);g.depth=g.branches===1?9:pick(seed,42,[5,6,7]);
|
||
g.angle=range(seed,43,.25,.6);g.scale=range(seed,44,.61,.76);g.twist=range(seed,45,-.42,.42);
|
||
g.turn=range(seed,46,.28,1.15)*(randomFrom(seed,47)<.5?-1:1);g.bend=range(seed,48,-.18,.18);
|
||
g.alternation=range(seed,49,-.18,.18);
|
||
g.angleWave=range(seed,76,.07,.25);g.scaleWave=range(seed,77,.025,.105);
|
||
g.angleFrequency=range(seed,78,.7,2.35);g.scaleFrequency=range(seed,79,1.2,3.6);
|
||
g.curvatureDrift=range(seed,80,.08,.3)*(randomFrom(seed,81)<.5?-1:1);
|
||
g.branchBias=range(seed,82,-.16,.16);g.facets=pick(seed,83,[8,10,14]);
|
||
g.figureSides=pick(seed,110,[0,0,3,5,6]);g.figureSpan=range(seed,111,.18,.48);
|
||
g.figureScale=range(seed,112,.11,.25);g.figureEvery=pick(seed,113,[2,3]);g.figureSpin=range(seed,114,-.55,.55);
|
||
g.curveMode=pick(seed,129,[1,1,2,4]);g.curveAmplitude=range(seed,130,.1,.32);
|
||
g.curveFrequency=range(seed,131,.65,1.8);
|
||
}else if(family==='lattice'){
|
||
g.branches=pick(seed,50,[2,2,3]);g.symmetry=pick(seed,51,[3,4,5,6]);g.depth=g.branches===3?4:pick(seed,52,[5,6]);
|
||
g.angle=range(seed,53,.36,.9);g.scale=range(seed,54,.52,.64);g.closure=range(seed,55,.48,.92);
|
||
g.bend=range(seed,56,-.08,.08);g.twist=range(seed,57,-.1,.1);g.hueStep=range(seed,58,5,26);
|
||
g.angleWave=range(seed,84,.015,.11);g.scaleWave=range(seed,85,.012,.07);
|
||
g.angleFrequency=pick(seed,86,[Math.PI/2,Math.PI*2/3,Math.PI]);g.scaleFrequency=range(seed,87,1.1,3.2);
|
||
g.curvatureDrift=range(seed,88,-.1,.1);g.branchBias=range(seed,89,-.075,.075);
|
||
g.facets=pick(seed,90,[3,4,6,10]);g.tipSides=randomFrom(seed,91)<.28?pick(seed,92,[3,4,5,6]):0;
|
||
g.tipScale=range(seed,93,.18,.4);
|
||
g.figureSides=pick(seed,115,[3,4,4,6,8]);g.figureSpan=pick(seed,116,[.25,.5,.75,1]);
|
||
g.figureScale=range(seed,117,.12,.3);g.figureEvery=pick(seed,118,[1,2,2]);g.figureSpin=range(seed,119,-.28,.28);
|
||
g.curveMode=pick(seed,132,[0,0,1,3]);g.curveAmplitude=g.curveMode?range(seed,133,.03,.13):0;
|
||
g.curveFrequency=range(seed,134,.75,1.5);
|
||
}else if(family==='fan'){
|
||
g.rootLayout=1;g.rootSpread=range(seed,140,.7,2.45);g.symmetry=pick(seed,141,[3,4,5,7]);
|
||
g.branches=pick(seed,142,[1,2,2]);g.depth=g.branches===1?8:pick(seed,143,[5,6,7]);
|
||
g.angle=range(seed,144,.26,.68);g.scale=range(seed,145,.59,.73);g.bend=range(seed,146,-.13,.13);
|
||
g.twist=range(seed,147,-.12,.12);g.angleWave=range(seed,148,.04,.18);g.scaleWave=range(seed,149,.01,.08);
|
||
g.angleFrequency=range(seed,150,.8,2.4);g.scaleFrequency=range(seed,151,1.1,3.2);
|
||
g.branchBias=range(seed,152,-.12,.12);g.facets=pick(seed,153,[8,10,14]);
|
||
g.figureSides=pick(seed,154,[0,0,3,4,5]);g.figureSpan=range(seed,155,.2,.55);
|
||
g.figureScale=range(seed,156,.1,.22);g.figureEvery=pick(seed,157,[2,3]);
|
||
g.curveMode=pick(seed,158,[0,1,1,2,4]);g.curveAmplitude=g.curveMode?range(seed,159,.05,.22):0;
|
||
g.curveFrequency=range(seed,160,.7,1.9);
|
||
}else if(family==='field'){
|
||
g.rootLayout=2;g.rootSpread=range(seed,161,0,.36);g.rootSpacing=range(seed,162,.065,.15);
|
||
g.symmetry=pick(seed,163,[3,4,5,6,8]);g.branches=pick(seed,164,[1,2,2]);g.depth=g.branches===1?8:pick(seed,165,[5,6]);
|
||
g.angle=range(seed,166,.2,.58);g.scale=range(seed,167,.57,.71);g.bend=range(seed,168,-.1,.1);
|
||
g.twist=range(seed,169,-.07,.07);g.angleWave=range(seed,170,.025,.13);g.scaleWave=range(seed,171,.01,.065);
|
||
g.angleFrequency=range(seed,172,.8,2.2);g.scaleFrequency=range(seed,173,1.2,3);
|
||
g.alternation=range(seed,174,-.12,.12);g.facets=pick(seed,175,[8,10,14]);
|
||
g.figureSides=pick(seed,176,[0,0,3,4,6]);g.figureSpan=range(seed,177,.18,.5);
|
||
g.figureScale=range(seed,178,.09,.2);g.figureEvery=pick(seed,179,[2,3]);
|
||
g.curveMode=pick(seed,180,[0,0,1,2,3]);g.curveAmplitude=g.curveMode?range(seed,181,.035,.16):0;
|
||
g.curveFrequency=range(seed,182,.7,1.7);
|
||
}else{
|
||
g.rootLayout=3;g.rootSpread=range(seed,183,0,.65);g.rootSpacing=range(seed,184,.055,.14);
|
||
g.symmetry=pick(seed,185,[2,4,4,6]);g.branches=pick(seed,186,[1,2,2]);g.depth=g.branches===1?8:pick(seed,187,[5,6]);
|
||
g.angle=range(seed,188,.25,.7);g.scale=range(seed,189,.57,.7);g.bend=range(seed,190,-.12,.12);
|
||
g.twist=range(seed,191,-.1,.1);g.angleWave=range(seed,192,.035,.16);g.scaleWave=range(seed,193,.01,.07);
|
||
g.angleFrequency=range(seed,194,.8,2.3);g.scaleFrequency=range(seed,195,1.1,3.1);
|
||
g.alternation=range(seed,196,-.15,.15);g.closure=range(seed,197,0,.3);g.facets=pick(seed,198,[7,10,14]);
|
||
g.figureSides=pick(seed,199,[0,3,4,6]);g.figureSpan=range(seed,200,.2,.58);
|
||
g.figureScale=range(seed,201,.1,.22);g.figureEvery=pick(seed,202,[2,3]);
|
||
g.curveMode=pick(seed,203,[0,1,2,4]);g.curveAmplitude=g.curveMode?range(seed,204,.05,.2):0;
|
||
g.curveFrequency=range(seed,205,.7,1.8);
|
||
}
|
||
return g;
|
||
}
|
||
const mutationRules={
|
||
branches:[1,1,4,true],angle:[.18,.12,1.45],scale:[.09,.45,.82],depth:[1,4,9,true],
|
||
symmetry:[1,1,8,true],anchors:[1,1,2,true],anchorStart:[.16,.35,.92],twist:[.15,-.65,.65],
|
||
bend:[.15,-.5,.5],turn:[.38,-1.5,1.5],angleDrift:[.06,-.16,.16],scaleDrift:[.06,-.14,.14],
|
||
alternation:[.14,-.55,.55],closure:[.22,0,1],rootLength:[.045,.14,.34],lineWidth:[.35,.8,2.8],
|
||
angleWave:[.12,0,.5],angleFrequency:[.65,.35,4.5],scaleWave:[.08,0,.24],scaleFrequency:[.65,.35,4.5],
|
||
phase:[Math.PI/2,0,Math.PI*2],curvatureDrift:[.12,-.4,.4],branchBias:[.14,-.45,.45],facets:[2,3,18,true],
|
||
tipSides:[1,0,8,true],tipScale:[.12,.08,.6],hue:[48,0,360],hueStep:[16,-30,30],
|
||
figureSides:[1,0,10,true],figureSpan:[.18,.12,1],figureScale:[.12,.08,.55],
|
||
figureEvery:[1,1,4,true],figureSpin:[.3,-1.2,1.2],
|
||
curveMode:[1,0,4,true],curveAmplitude:[.14,0,.6],curveFrequency:[.5,.35,3.5],
|
||
rootLayout:[1,0,3,true],rootSpread:[.45,0,Math.PI*2],rootSpacing:[.045,.04,.24],
|
||
saturation:[12,48,92],lightness:[10,48,86],growthOverlap:[.16,.2,.85]
|
||
};
|
||
function mutationCountFor(level,roll){
|
||
if(level===0)return roll<.92?0:1;
|
||
if(level===1)return roll<.8?0:roll<.98?1:2;
|
||
if(level===2)return roll<.55?0:roll<.9?1:2;
|
||
return roll<.25?0:roll<.6?1:roll<.87?2:3;
|
||
}
|
||
function crossoverGenomes(parentA,parentB,seed,options={}){
|
||
const a=normalizeGenome(parentA.genome),b=normalizeGenome(parentB.genome),child={},inherited={a:0,b:0};
|
||
const keys=Object.keys(baseGenome()).filter(key=>key!=='family');
|
||
const breeding=normalizeBreeding(options),profile=MUTATION_PROFILES[breeding.mutationLevel];
|
||
const targetA=clamp(Math.round(keys.length*breeding.mix),1,keys.length-1);
|
||
const fromAKeys=new Set(keys.map((key,index)=>({key,index,score:randomFrom(seed,200+index)}))
|
||
.sort((left,right)=>left.score-right.score||left.index-right.index).slice(0,targetA).map(item=>item.key));
|
||
for(const[index,key]of keys.entries()){
|
||
const fromA=fromAKeys.has(key);
|
||
child[key]=fromA?a[key]:b[key];inherited[fromA?'a':'b']++;
|
||
}
|
||
const mutations=[],mutationCount=mutationCountFor(breeding.mutationLevel,randomFrom(seed,280)),used=new Set();
|
||
for(let index=0;index<mutationCount;index++){
|
||
let choice=Math.floor(randomFrom(seed,281+index)*keys.length);
|
||
while(used.has(choice)||!mutationRules[keys[choice]])choice=(choice+1)%keys.length;
|
||
used.add(choice);
|
||
const key=keys[choice],[amount,min,max,integer]=mutationRules[key];
|
||
const direction=randomFrom(seed,300+index)<.5?-1:1;
|
||
let value;
|
||
if(key==='tipSides'||key==='figureSides'){
|
||
const upper=key==='tipSides'?8:10;
|
||
value=child[key]===0?3+Math.floor(randomFrom(seed,310+index)*(upper-2)):randomFrom(seed,320+index)<.18?0:child[key]+direction;
|
||
if(value>0)value=clamp(Math.round(value),3,upper);
|
||
}else if(key==='curveMode'){
|
||
value=child[key]===0?1+Math.floor(randomFrom(seed,310+index)*4):randomFrom(seed,320+index)<.16?0:clamp(child[key]+direction,1,4);
|
||
}else if(key==='rootLayout'){
|
||
value=child[key]===0?1+Math.floor(randomFrom(seed,310+index)*3):randomFrom(seed,320+index)<.16?0:clamp(child[key]+direction,1,3);
|
||
}else{
|
||
const step=integer?Math.max(1,Math.round(amount*profile.strength)):amount*profile.strength;
|
||
value=integer?child[key]+direction*step:child[key]+direction*step*(.45+randomFrom(seed,310+index)*.55);
|
||
}
|
||
if(integer)value=Math.round(value);
|
||
child[key]=key==='phase'||key==='hue'?((value%max)+max)%max:clamp(value,min,max);
|
||
if(key==='rootLayout'&&child.rootLayout>0){
|
||
child.rootSpread=child.rootLayout===1?range(seed,325+index,.7,2.4):range(seed,325+index,0,.6);
|
||
child.rootSpacing=range(seed,327+index,.06,.16);
|
||
}
|
||
mutations.push(key);
|
||
}
|
||
if(a.figureSides===0&&b.figureSides===0&&child.figureSides===0&&randomFrom(seed,330)<profile.structural*1.25){
|
||
child.figureSides=3+Math.floor(randomFrom(seed,331)*6);
|
||
child.figureSpan=pick(seed,332,[.25,.5,.75,1]);
|
||
child.figureScale=range(seed,333,.12,.3);
|
||
child.figureEvery=pick(seed,334,[1,2,2,3]);
|
||
child.figureSpin=range(seed,335,-.45,.45);
|
||
mutations.push('figureSides');
|
||
}
|
||
if(a.curveMode===0&&b.curveMode===0&&child.curveMode===0&&randomFrom(seed,340)<profile.structural){
|
||
child.curveMode=1+Math.floor(randomFrom(seed,341)*4);
|
||
child.curveAmplitude=range(seed,342,.06,.24);
|
||
child.curveFrequency=range(seed,343,.6,2.2);
|
||
mutations.push('curveMode');
|
||
}
|
||
if(a.rootLayout===0&&b.rootLayout===0&&child.rootLayout===0&&randomFrom(seed,350)<profile.structural){
|
||
child.rootLayout=1+Math.floor(randomFrom(seed,351)*3);
|
||
child.rootSpread=child.rootLayout===1?range(seed,352,.7,2.4):range(seed,352,0,.6);
|
||
child.rootSpacing=range(seed,353,.06,.16);
|
||
mutations.push('rootLayout');
|
||
}
|
||
child.family=classifyFamily({...child,family:null});
|
||
return{genome:child,inherited,mutations,breeding};
|
||
}
|
||
|
||
function trigonometricWave(mode,phase){
|
||
if(mode===1)return Math.cos(phase);
|
||
if(mode===2)return Math.sin(phase);
|
||
if(mode===3)return 2/Math.PI*Math.atan(Math.tan(phase));
|
||
if(mode===4)return .68*Math.cos(phase)+.32*Math.cos(phase*2+Math.PI/3);
|
||
return 0;
|
||
}
|
||
function traceCurve(x,y,direction,length,turn,bend,samples=14,curveMode=0,curveAmplitude=0,curveFrequency=1,curvePhase=0){
|
||
const points=[[x,y]],step=length/samples;
|
||
let px=x,py=y,lastDirection=direction;
|
||
for(let index=1;index<=samples;index++){
|
||
const t=(index-.5)/samples;
|
||
const wavePhase=t*Math.PI*2*curveFrequency+curvePhase;
|
||
lastDirection=direction+turn*t+bend*Math.sin(Math.PI*t)+curveAmplitude*trigonometricWave(curveMode,wavePhase);
|
||
px+=Math.cos(lastDirection)*step;py+=Math.sin(lastDirection)*step;
|
||
points.push([px,py]);
|
||
}
|
||
return{points,endX:px,endY:py,endDirection:lastDirection};
|
||
}
|
||
function traceGenomeCurve(node,g,facets){
|
||
const samples=g.curveMode===0||g.curveAmplitude===0
|
||
?facets
|
||
:clamp(Math.max(facets,Math.ceil(g.curveFrequency*8)),facets,24);
|
||
const curvePhase=g.phase+node.depth*g.angleFrequency+node.root*Math.PI*2/Math.max(1,g.symmetry);
|
||
return traceCurve(
|
||
node.x,node.y,node.direction,node.length,node.turn,node.bend,samples,
|
||
g.curveMode,g.curveAmplitude,g.curveFrequency,curvePhase
|
||
);
|
||
}
|
||
function pointOnCurve(curve,position){
|
||
const target=clamp(position,0,1)*(curve.points.length-1);
|
||
const index=Math.min(curve.points.length-2,Math.floor(target)),part=target-index;
|
||
const a=curve.points[index],b=curve.points[index+1];
|
||
return{x:a[0]+(b[0]-a[0])*part,y:a[1]+(b[1]-a[1])*part,direction:Math.atan2(b[1]-a[1],b[0]-a[0])};
|
||
}
|
||
function branchOffsets(count,angle){
|
||
if(count===1)return[0];
|
||
return Array.from({length:count},(_,index)=>(index-(count-1)/2)*angle*(count===2?2:1));
|
||
}
|
||
function traceFigureSegment(curve,node,g){
|
||
const sides=clamp(Math.round(g.figureSides),3,10);
|
||
const edges=clamp(Math.round(sides*g.figureSpan),1,sides);
|
||
const radius=Math.max(.003,node.length*g.figureScale);
|
||
const start=curve.endDirection+Math.PI/2+g.phase*.2+node.depth*g.figureSpin;
|
||
const centerX=curve.endX-Math.cos(start)*radius,centerY=curve.endY-Math.sin(start)*radius;
|
||
return Array.from({length:edges+1},(_,index)=>{
|
||
const theta=start+index*Math.PI*2/sides;
|
||
return[centerX+Math.cos(theta)*radius,centerY+Math.sin(theta)*radius];
|
||
});
|
||
}
|
||
function rootPlacement(g,root,count){
|
||
const t=count===1?.5:root/(count-1),centered=t-.5,layout=Math.round(g.rootLayout);
|
||
if(layout===1){
|
||
return{x:0,y:.28,direction:-Math.PI/2+centered*g.rootSpread};
|
||
}
|
||
if(layout===2){
|
||
return{
|
||
x:centered*g.rootSpacing*(count-1),
|
||
y:.3+Math.sin(t*Math.PI*2+g.phase)*g.rootSpacing*.12,
|
||
direction:-Math.PI/2+centered*g.rootSpread
|
||
};
|
||
}
|
||
if(layout===3){
|
||
const upward=root%2===0,tilt=centered*g.rootSpread;
|
||
return{
|
||
x:centered*g.rootSpacing*(count-1),y:0,
|
||
direction:(upward?-Math.PI/2:Math.PI/2)+(upward?tilt:-tilt)
|
||
};
|
||
}
|
||
return count===1
|
||
?{x:0,y:.34,direction:-Math.PI/2}
|
||
:{x:0,y:0,direction:-Math.PI/2+root*Math.PI*2/count};
|
||
}
|
||
function compileGeometry(genome){
|
||
const g=normalizeGenome(genome),paths=[],queue=[];
|
||
const facets=clamp(Math.round(g.facets),3,18),rootCount=clamp(Math.round(g.symmetry),1,8);
|
||
for(let root=0;root<rootCount;root++){
|
||
const placement=rootPlacement(g,root,rootCount);
|
||
queue.push({...placement,length:g.rootLength,depth:0,root,turn:g.turn,bend:g.bend});
|
||
}
|
||
let cursor=0;
|
||
while(cursor<queue.length&&paths.length<MAX_PATHS){
|
||
const node=queue[cursor++],curve=traceGenomeCurve(node,g,facets);
|
||
const generationGap=.71/(g.depth+1),stagger=((node.root*17+cursor*7)%13)/13*generationGap*.14;
|
||
const birth=node.depth*generationGap+stagger,duration=generationGap*(1.65+g.growthOverlap);
|
||
paths.push({
|
||
points:curve.points,depth:node.depth,root:node.root,birth,duration,
|
||
hue:(g.hue+node.depth*g.hueStep+node.root*360/Math.max(1,g.symmetry)+3600)%360,
|
||
saturation:g.saturation,lightness:g.lightness,width:Math.max(.42,g.lineWidth*Math.pow(.84,node.depth))
|
||
});
|
||
const figureEvery=clamp(Math.round(g.figureEvery),1,4);
|
||
if(g.figureSides>=3&&node.depth>0&&node.depth%figureEvery===0&&paths.length<MAX_PATHS){
|
||
paths.push({
|
||
points:traceFigureSegment(curve,node,g),depth:node.depth+.45,root:node.root,
|
||
birth:birth+duration*.32,duration:duration*.72,
|
||
hue:(g.hue+node.depth*g.hueStep+38+node.root*360/Math.max(1,g.symmetry)+3600)%360,
|
||
saturation:g.saturation,lightness:clamp(g.lightness+7,0,92),
|
||
width:Math.max(.38,g.lineWidth*Math.pow(.83,node.depth))
|
||
});
|
||
}
|
||
const harmonicPhase=(node.depth+1)*g.scaleFrequency+g.phase+node.root*Math.PI*2/Math.max(1,g.symmetry);
|
||
const effectiveScale=clamp(
|
||
g.scale+g.scaleDrift*Math.sin((node.depth+1)*2.399963)+g.scaleWave*Math.cos(harmonicPhase),
|
||
.38,.88
|
||
);
|
||
const terminal=node.depth>=g.depth||node.length*effectiveScale<.0035;
|
||
if(terminal){
|
||
const tipSides=Math.round(g.tipSides);
|
||
if(tipSides>=3&&paths.length<MAX_PATHS){
|
||
const radius=Math.max(.004,node.length*g.tipScale),rotation=curve.endDirection+Math.PI/2+g.phase*.25;
|
||
const points=Array.from({length:tipSides+1},(_,index)=>{
|
||
const theta=rotation+index*Math.PI*2/tipSides;
|
||
return[curve.endX+Math.cos(theta)*radius,curve.endY+Math.sin(theta)*radius];
|
||
});
|
||
paths.push({
|
||
points,depth:node.depth+1,root:node.root,birth:birth+duration*.56,duration:duration*.72,
|
||
hue:(g.hue+(node.depth+1)*g.hueStep+72+3600)%360,saturation:g.saturation,
|
||
lightness:clamp(g.lightness+8,0,92),width:Math.max(.38,g.lineWidth*Math.pow(.82,node.depth+1))
|
||
});
|
||
}
|
||
continue;
|
||
}
|
||
const anchorPositions=g.anchors===1?[1]:Array.from({length:g.anchors},(_,index)=>g.anchorStart+(1-g.anchorStart)*index/(g.anchors-1));
|
||
const angularPhase=node.depth*g.angleFrequency+g.phase+node.root*Math.PI*2/Math.max(1,g.symmetry);
|
||
const effectiveAngle=clamp(g.angle+g.angleDrift*node.depth+g.angleWave*Math.sin(angularPhase),.08,1.65);
|
||
const offsets=g.branches===1?[effectiveAngle*.55*Math.sin(angularPhase)]:branchOffsets(g.branches,effectiveAngle);
|
||
for(const[anchorIndex,position]of anchorPositions.entries()){
|
||
const anchor=pointOnCurve(curve,position),anchorScale=Math.pow(.86,g.anchors-1-anchorIndex);
|
||
const children=[],alternating=g.alternation*((node.depth+anchorIndex)%2?-1:1);
|
||
const bias=g.branchBias*Math.sin(angularPhase+anchorIndex*Math.PI/2);
|
||
for(const offset of offsets){
|
||
if(queue.length>=MAX_PATHS*2)break;
|
||
const side=offset===0?1:Math.sign(offset);
|
||
const child={
|
||
x:anchor.x,y:anchor.y,direction:anchor.direction+offset+g.twist*(node.depth+1)+alternating+bias,
|
||
length:node.length*effectiveScale*anchorScale,depth:node.depth+1,root:node.root,
|
||
turn:(g.turn+g.curvatureDrift*(node.depth+1)/Math.max(1,g.depth))*side,bend:g.bend*side
|
||
};
|
||
children.push(child);queue.push(child);
|
||
}
|
||
if(g.closure>.05&&children.length>1&&paths.length<MAX_PATHS){
|
||
const endpoints=children.map(child=>{
|
||
const predicted=traceGenomeCurve(child,g,facets);
|
||
return[predicted.endX,predicted.endY];
|
||
});
|
||
if(g.closure>.62&&endpoints.length>2)endpoints.push(endpoints[0]);
|
||
paths.push({
|
||
points:endpoints,depth:node.depth+1,root:node.root,birth:(node.depth+1)*generationGap+generationGap*.28,
|
||
duration:generationGap*(1.3+g.growthOverlap),hue:(g.hue+(node.depth+1)*g.hueStep+42+3600)%360,
|
||
saturation:g.saturation,lightness:clamp(g.lightness+6,0,92),
|
||
width:Math.max(.4,g.lineWidth*Math.pow(.82,node.depth+1)*g.closure)
|
||
});
|
||
}
|
||
}
|
||
}
|
||
return paths;
|
||
}
|
||
function geometryBounds(paths){
|
||
let minX=Infinity,maxX=-Infinity,minY=Infinity,maxY=-Infinity;
|
||
for(const path of paths||[])for(const point of path.points){
|
||
minX=Math.min(minX,point[0]);maxX=Math.max(maxX,point[0]);
|
||
minY=Math.min(minY,point[1]);maxY=Math.max(maxY,point[1]);
|
||
}
|
||
return Number.isFinite(minX)?{minX,maxX,minY,maxY}:{minX:-.25,maxX:.25,minY:-.25,maxY:.25};
|
||
}
|
||
function pathProgress(path,progress){
|
||
const raw=clamp((progress-path.birth)/path.duration,0,1);
|
||
return raw<.5?2*raw*raw:1-Math.pow(-2*raw+2,2)/2;
|
||
}
|
||
|
||
function updateView(){
|
||
const bounds=state.current?.bounds||geometryBounds(state.current?.paths);
|
||
const galleryRect=galleryOpen?ui.gallery.getBoundingClientRect():null;
|
||
const actionTop=document.querySelector('.action-bar').getBoundingClientRect().top;
|
||
const formulaVisible=ui.formula.getClientRects().length>0;
|
||
const compactLandscape=galleryOpen&&height<520;
|
||
let left,right,top,bottom;
|
||
if(width>=1180){
|
||
left=386;right=galleryOpen?width-326:width-34;top=82;bottom=height-116;
|
||
}else if(compactLandscape){
|
||
left=22;right=galleryRect.left-14;top=82;bottom=actionTop-14;
|
||
}else if(width>760){
|
||
left=formulaVisible?356:22;right=width-28;top=82;
|
||
bottom=galleryOpen?galleryRect.top-14:actionTop-14;
|
||
}else{
|
||
left=22;right=width-22;top=formulaVisible?Math.max(270,ui.formula.getBoundingClientRect().bottom+14):82;
|
||
bottom=galleryOpen?galleryRect.top-14:actionTop-14;
|
||
}
|
||
if(right-left<160){left=22;right=width-22}
|
||
if(bottom-top<90)top=Math.max(72,bottom-90);
|
||
const worldWidth=Math.max(.08,bounds.maxX-bounds.minX),worldHeight=Math.max(.08,bounds.maxY-bounds.minY);
|
||
const scale=Math.min((right-left)/worldWidth,(bottom-top)/worldHeight)*.88;
|
||
view.scale=Math.min(scale,Math.min(width,height)*2.1);
|
||
view.offsetX=(left+right)/2-(bounds.minX+bounds.maxX)/2*view.scale;
|
||
view.offsetY=(top+bottom)/2-(bounds.minY+bounds.maxY)/2*view.scale;
|
||
}
|
||
function resize(){
|
||
const ratio=Math.min(devicePixelRatio||1,1.25);
|
||
width=innerWidth;height=innerHeight;
|
||
canvas.width=Math.round(width*ratio);canvas.height=Math.round(height*ratio);
|
||
ctx.setTransform(canvas.width/width,0,0,canvas.height/height,0,0);
|
||
background=ctx.createRadialGradient(width*.5,height*.5,0,width*.5,height*.5,Math.max(width,height)*.72);
|
||
background.addColorStop(0,'#17382f');background.addColorStop(.52,'#0a1d18');background.addColorStop(1,'#050d0c');
|
||
updateView();render(lastProgress);
|
||
}
|
||
function worldToScreen(x,y){return[x*view.scale+view.offsetX,y*view.scale+view.offsetY]}
|
||
function drawPartialPath(targetContext,path,local){
|
||
const target=(path.points.length-1)*local,full=Math.floor(target),fraction=target-full;
|
||
if(target<=0)return;
|
||
targetContext.beginPath();
|
||
const first=worldToScreen(path.points[0][0],path.points[0][1]);
|
||
targetContext.moveTo(first[0],first[1]);
|
||
for(let index=1;index<=full;index++){
|
||
const point=worldToScreen(path.points[index][0],path.points[index][1]);
|
||
targetContext.lineTo(point[0],point[1]);
|
||
}
|
||
if(full<path.points.length-1&&fraction>0){
|
||
const a=path.points[full],b=path.points[full+1];
|
||
const point=worldToScreen(a[0]+(b[0]-a[0])*fraction,a[1]+(b[1]-a[1])*fraction);
|
||
targetContext.lineTo(point[0],point[1]);
|
||
}
|
||
targetContext.stroke();
|
||
}
|
||
function drawFractal(targetContext,progress){
|
||
if(!state.current)return;
|
||
targetContext.lineCap='round';targetContext.lineJoin='round';
|
||
for(const path of state.current.paths){
|
||
const local=pathProgress(path,progress);
|
||
if(local<=0)continue;
|
||
targetContext.globalAlpha=(.5+Math.min(.34,path.depth*.026))*(.82+local*.18);
|
||
targetContext.lineWidth=path.width;
|
||
targetContext.strokeStyle=`hsl(${path.hue} ${path.saturation}% ${path.lightness}%)`;
|
||
drawPartialPath(targetContext,path,local);
|
||
}
|
||
targetContext.globalAlpha=1;
|
||
}
|
||
function render(progress=1){
|
||
lastProgress=progress;
|
||
ctx.fillStyle=background;ctx.fillRect(0,0,width,height);
|
||
const seed=state.current?.seed||7193;
|
||
for(let index=0;index<30;index++){
|
||
ctx.fillStyle=`rgba(215,255,225,${.035+randomFrom(seed,index,800)*.1})`;
|
||
ctx.fillRect(randomFrom(seed,index,801)*width,randomFrom(seed,index,802)*height,1,1);
|
||
}
|
||
drawFractal(ctx,progress);
|
||
}
|
||
function createExportCanvas(includeBackground){
|
||
if(includeBackground)return canvas;
|
||
const transparent=document.createElement('canvas');
|
||
transparent.width=canvas.width;transparent.height=canvas.height;
|
||
const target=transparent.getContext('2d');
|
||
target.setTransform(canvas.width/width,0,0,canvas.height/height,0,0);
|
||
drawFractal(target,1);
|
||
return transparent;
|
||
}
|
||
function downloadImage(includeBackground){
|
||
if(!state.current)return;
|
||
const link=document.createElement('a'),variant=includeBackground?'background':'transparent';
|
||
link.download=`fractalier-${formulaId(state.current.id)}-${variant}.png`;
|
||
link.href=createExportCanvas(includeBackground).toDataURL('image/png');
|
||
link.click();closeExportMenu();
|
||
showToast(`${variant==='background'?'Background':'Transparent'} PNG downloaded`);
|
||
}
|
||
function downloadBlob(blob,filename){
|
||
const link=document.createElement('a'),url=URL.createObjectURL(blob);
|
||
link.download=filename;link.href=url;link.click();
|
||
setTimeout(()=>URL.revokeObjectURL(url),1000);
|
||
}
|
||
function exportFormula(){
|
||
if(!state.current)return;
|
||
const{id,seed,genome,parents,inheritance,mutations,breeding}=state.current;
|
||
const payload={
|
||
format:'fractalier-formula',version:1,id:formulaId(id),seed,
|
||
equation:'F[n+1] = union_r L_layout(r) union_i(s[n] R(i alpha[n] + n tau) K(kappa[n] + gamma T(f t + phi)) A[i](F[n])) union Cq(E[n]) union Pm^lambda(E[n])',
|
||
genome,parents:parents.map(formulaId),inheritance,mutations,breeding
|
||
};
|
||
downloadBlob(new Blob([JSON.stringify(payload,null,2)],{type:'application/json'}),`fractalier-${formulaId(id)}.json`);
|
||
closeExportMenu();showToast('Formula JSON downloaded');
|
||
}
|
||
function sanitizeImportedGenome(payload){
|
||
if(!payload||typeof payload!=='object'||Array.isArray(payload))throw new Error('The JSON root must be an object');
|
||
if(payload.format&&payload.format!=='fractalier-formula')throw new Error('This is not a Fractalier formula');
|
||
const candidate=payload.genome||payload;
|
||
if(!candidate||typeof candidate!=='object'||Array.isArray(candidate))throw new Error('The file does not contain a genome');
|
||
const defaults=baseGenome(),genome={...defaults},keys=Object.keys(defaults).filter(key=>key!=='family');
|
||
let recognized=0;
|
||
for(const key of keys){
|
||
if(typeof candidate[key]!=='number'||!Number.isFinite(candidate[key]))continue;
|
||
recognized++;
|
||
let value=candidate[key],rule=mutationRules[key];
|
||
if(rule){
|
||
const[,min,max,integer]=rule;
|
||
if(integer)value=Math.round(value);
|
||
value=clamp(value,min,max);
|
||
}
|
||
if((key==='tipSides'||key==='figureSides')&&value>0)value=clamp(Math.round(value),3,key==='tipSides'?8:10);
|
||
genome[key]=value;
|
||
}
|
||
if(recognized<5)throw new Error('No recognizable Fractalier genome was found');
|
||
genome.family=classifyFamily({...genome,family:null});
|
||
return genome;
|
||
}
|
||
function importFormulaPayload(payload){
|
||
const genome=sanitizeImportedGenome(payload);
|
||
const importedSeed=Number(payload?.seed);
|
||
const seed=Number.isFinite(importedSeed)?Math.abs(Math.trunc(importedSeed))>>>0:randomSeed();
|
||
const id=state.nextId++;
|
||
showFormula({id,seed,genome,source:'import',parents:[],inheritance:null,mutations:[]});
|
||
showToast(`Imported as ${formulaId(id)}`);
|
||
return id;
|
||
}
|
||
async function importFormulaFile(file){
|
||
if(!file)return;
|
||
if(file.size>256*1024)throw new Error('The formula file is too large');
|
||
const payload=JSON.parse(await file.text());
|
||
return importFormulaPayload(payload);
|
||
}
|
||
async function exportVideo(){
|
||
if(!state.current||isBusy)return;
|
||
closeExportMenu();
|
||
if(!canvas.captureStream||typeof MediaRecorder==='undefined'){
|
||
showToast('Video export is not supported by this browser');return;
|
||
}
|
||
const mimeType=['video/webm;codecs=vp9','video/webm;codecs=vp8','video/webm']
|
||
.find(type=>MediaRecorder.isTypeSupported(type));
|
||
if(!mimeType){showToast('WebM export is not supported by this browser');return}
|
||
cancelAnimationFrame(animationFrame);animationToken++;
|
||
const chunks=[],stream=canvas.captureStream(60);
|
||
const recorder=new MediaRecorder(stream,{mimeType,videoBitsPerSecond:8_000_000});
|
||
recorder.ondataavailable=event=>{if(event.data.size)chunks.push(event.data)};
|
||
const stopped=new Promise((resolve,reject)=>{
|
||
recorder.onstop=resolve;
|
||
recorder.onerror=event=>reject(event.error||new Error('Video recording failed'));
|
||
});
|
||
try{
|
||
setBusy(true);ui.generationStatus.textContent='recording';ui.renderStatus.textContent='encoding WebM animation…';
|
||
render(0);ui.progress.style.width='0%';recorder.start();
|
||
await new Promise(resolve=>{
|
||
const start=performance.now();
|
||
const frame=now=>{
|
||
const linear=clamp((now-start)/REVEAL_TIME,0,1),progress=1-Math.pow(1-linear,2.4);
|
||
render(progress);ui.progress.style.width=`${linear*100}%`;
|
||
if(linear<1){animationFrame=requestAnimationFrame(frame);return}
|
||
render(1);setTimeout(resolve,180);
|
||
};
|
||
animationFrame=requestAnimationFrame(frame);
|
||
});
|
||
recorder.stop();await stopped;
|
||
downloadBlob(new Blob(chunks,{type:mimeType}),`fractalier-${formulaId(state.current.id)}-growth.webm`);
|
||
showToast('Animated WebM downloaded');
|
||
}catch(error){
|
||
console.warn('Could not export the animation',error);showToast('Video export failed');
|
||
}finally{
|
||
for(const track of stream.getTracks())track.stop();
|
||
render(1);ui.progress.style.width='100%';setBusy(false);
|
||
}
|
||
}
|
||
function paintFormulaMiniature(target,paths,seed,progress=1){
|
||
const canvasWidth=target.canvas.width,canvasHeight=target.canvas.height,bounds=geometryBounds(paths);
|
||
target.setTransform(1,0,0,1,0,0);target.globalAlpha=1;
|
||
const backdrop=target.createRadialGradient(canvasWidth/2,canvasHeight/2,0,canvasWidth/2,canvasHeight/2,Math.max(canvasWidth,canvasHeight)*.64);
|
||
backdrop.addColorStop(0,'#17382f');backdrop.addColorStop(.58,'#0a1d18');backdrop.addColorStop(1,'#050d0c');
|
||
target.fillStyle=backdrop;target.fillRect(0,0,canvasWidth,canvasHeight);
|
||
for(let index=0;index<18;index++){
|
||
target.fillStyle=`rgba(215,255,225,${.035+randomFrom(seed,index,880)*.1})`;
|
||
target.fillRect(randomFrom(seed,index,881)*canvasWidth,randomFrom(seed,index,882)*canvasHeight,1,1);
|
||
}
|
||
const worldWidth=Math.max(.04,bounds.maxX-bounds.minX),worldHeight=Math.max(.04,bounds.maxY-bounds.minY);
|
||
const scale=Math.min((canvasWidth-28)/worldWidth,(canvasHeight-28)/worldHeight);
|
||
const offsetX=canvasWidth/2-(bounds.minX+bounds.maxX)/2*scale;
|
||
const offsetY=canvasHeight/2-(bounds.minY+bounds.maxY)/2*scale;
|
||
const point=([x,y])=>[x*scale+offsetX,y*scale+offsetY];
|
||
target.lineCap='round';target.lineJoin='round';
|
||
for(const path of paths){
|
||
const local=pathProgress(path,progress);
|
||
if(local<=0||path.points.length<2)continue;
|
||
const targetPoint=(path.points.length-1)*local,full=Math.floor(targetPoint),fraction=targetPoint-full;
|
||
const first=point(path.points[0]);target.beginPath();target.moveTo(first[0],first[1]);
|
||
for(let index=1;index<=full;index++){const next=point(path.points[index]);target.lineTo(next[0],next[1])}
|
||
if(full<path.points.length-1&&fraction>0){
|
||
const a=path.points[full],b=path.points[full+1];
|
||
const next=point([a[0]+(b[0]-a[0])*fraction,a[1]+(b[1]-a[1])*fraction]);
|
||
target.lineTo(next[0],next[1]);
|
||
}
|
||
target.globalAlpha=(.58+Math.min(.28,path.depth*.025))*(.85+local*.15);
|
||
target.lineWidth=Math.max(.38,path.width*.62);
|
||
target.strokeStyle=`hsl(${path.hue} ${path.saturation}% ${path.lightness}%)`;target.stroke();
|
||
}
|
||
target.globalAlpha=1;
|
||
}
|
||
function renderFormulaThumbnail(genome,seed){
|
||
const thumb=document.createElement('canvas');thumb.width=300;thumb.height=200;
|
||
paintFormulaMiniature(thumb.getContext('2d'),compileGeometry(genome),seed,1);
|
||
return thumb.toDataURL('image/webp',.76);
|
||
}
|
||
function storeHistoryRecord(record){
|
||
if(!database)return;
|
||
try{database.transaction(DB_HISTORY,'readwrite').objectStore(DB_HISTORY).put(record)}
|
||
catch(error){console.warn('Could not update a collection thumbnail',error)}
|
||
}
|
||
function ensureThumbnail(record){
|
||
if(record.thumbnail&&record.thumbnailVersion===4)return;
|
||
record.thumbnail=renderFormulaThumbnail(record.genome,record.seed);
|
||
record.thumbnailVersion=4;storeHistoryRecord(record);
|
||
}
|
||
|
||
function setBusy(busy){
|
||
isBusy=busy;
|
||
document.querySelector('#export-toggle').disabled=busy;
|
||
ui.generationStatus.textContent=busy?'generating':'ready';
|
||
ui.renderStatus.textContent=busy?'drawing recursive paths…':'idle · canvas at rest';
|
||
updateSelectionUI();
|
||
}
|
||
function animateFormula(onComplete){
|
||
cancelAnimationFrame(animationFrame);
|
||
const token=++animationToken,start=performance.now();
|
||
const reduced=matchMedia('(prefers-reduced-motion: reduce)').matches,duration=reduced?120:REVEAL_TIME;
|
||
setBusy(true);ui.progress.style.width='0%';
|
||
const frame=now=>{
|
||
if(token!==animationToken)return;
|
||
const linear=clamp((now-start)/duration,0,1);
|
||
const progress=1-Math.pow(1-linear,2.4);
|
||
render(progress);ui.progress.style.width=`${linear*100}%`;
|
||
if(linear<1){animationFrame=requestAnimationFrame(frame);return}
|
||
render(1);setBusy(false);onComplete?.();
|
||
};
|
||
animationFrame=requestAnimationFrame(frame);
|
||
}
|
||
function runtimeFormula({id,seed,genome,source,parents=[],inheritance=null,mutations=[],breeding=null}){
|
||
const normalized=normalizeGenome(genome),paths=compileGeometry(normalized);
|
||
return{id,seed,genome:normalized,source,parents,inheritance,mutations,breeding,paths,bounds:geometryBounds(paths)};
|
||
}
|
||
function createFounderRecord(){
|
||
const seed=randomSeed(),id=state.nextId++,genome=createGenome(seed);
|
||
return{
|
||
id,seed,genome,source:'founder',parents:[],inheritance:null,mutations:[],createdAt:Date.now(),
|
||
thumbnail:renderFormulaThumbnail(genome,seed),thumbnailVersion:4
|
||
};
|
||
}
|
||
function ensureInitialPopulation(){
|
||
let initialized=false;
|
||
if(state.current&&!state.history.some(item=>item.id===state.current.id)){
|
||
const{id,seed,genome,source,parents=[],inheritance=null,mutations=[],breeding=null}=state.current;
|
||
state.history.push({
|
||
id,seed,genome:normalizeGenome(genome),source,parents,inheritance,mutations,breeding,createdAt:Date.now(),
|
||
thumbnail:renderFormulaThumbnail(genome,seed),thumbnailVersion:4
|
||
});
|
||
initialized=true;
|
||
}
|
||
while(state.history.length<2){state.history.push(createFounderRecord());initialized=true}
|
||
if(!state.current||initialized)state.current={...state.history.at(-1)};
|
||
if(initialized)state.selectedParents=state.history.slice(-2).map(item=>item.id);
|
||
if(initialized)saveState();
|
||
}
|
||
function addCurrentToHistory(){
|
||
if(!state.current||state.history.some(item=>item.id===state.current.id))return;
|
||
const{id,seed,genome,source,parents,inheritance,mutations,breeding}=state.current;
|
||
state.history.push({
|
||
id,seed,genome:{...genome},source,parents,inheritance,mutations,breeding,createdAt:Date.now(),
|
||
thumbnail:renderFormulaThumbnail(genome,seed),thumbnailVersion:4
|
||
});
|
||
saveState();renderArchive();
|
||
}
|
||
function showFormula(entry,{selectAfter=true}={}){
|
||
state.selectedParents=[];
|
||
state.current=runtimeFormula(entry);
|
||
updateView();updateFormulaUI();renderArchive();saveState();
|
||
animateFormula(()=>{
|
||
addCurrentToHistory();
|
||
if(selectAfter)state.selectedParents=[state.current.id];
|
||
saveState();renderArchive();
|
||
});
|
||
}
|
||
function viewStoredFormula(item){
|
||
if(isBusy)return;
|
||
state.current=runtimeFormula(item);
|
||
updateFormulaUI();renderArchive();saveState();
|
||
closeGalleryOnSmallScreen();updateView();animateFormula();
|
||
}
|
||
function selectedRecords(){return state.selectedParents.map(id=>state.history.find(item=>item.id===id)).filter(Boolean)}
|
||
function crossSelected(){
|
||
const selected=selectedRecords();if(selected.length!==2||isBusy)return;
|
||
const seed=randomSeed(),id=state.nextId++;
|
||
const result=crossoverGenomes(selected[0],selected[1],seed,state.breeding);
|
||
showFormula({
|
||
id,seed,genome:result.genome,source:'crossover',parents:[selected[0].id,selected[1].id],
|
||
inheritance:result.inherited,mutations:result.mutations,breeding:result.breeding
|
||
});
|
||
}
|
||
function toggleParent(id){
|
||
if(isBusy)return;
|
||
const selected=state.selectedParents,index=selected.indexOf(id);
|
||
if(index>=0)selected.splice(index,1);
|
||
else if(selected.length<2)selected.push(id);
|
||
else{selected.shift();selected.push(id)}
|
||
saveState();renderArchive();
|
||
if(selected.length===2&&width<=760)setGallery(false);
|
||
}
|
||
|
||
const geneLabels={branches:'branches',angle:'angle',scale:'scale',depth:'recursion',symmetry:'root count',anchors:'anchors',
|
||
anchorStart:'anchor position',twist:'twist',bend:'bend',turn:'turn',angleDrift:'angle drift',scaleDrift:'scale drift',
|
||
alternation:'alternation',closure:'closure',angleWave:'angle resonance',angleFrequency:'angle frequency',
|
||
scaleWave:'scale pulse',scaleFrequency:'scale frequency',phase:'harmonic phase',curvatureDrift:'curvature drift',
|
||
branchBias:'branch bias',facets:'faceting',tipSides:'terminal polygon',tipScale:'terminal scale',
|
||
figureSides:'figure order',figureSpan:'figure segment',figureScale:'figure scale',
|
||
figureEvery:'figure interval',figureSpin:'figure rotation',
|
||
curveMode:'trigonometric curve',curveAmplitude:'curve amplitude',curveFrequency:'curve frequency',
|
||
rootLayout:'root layout',rootSpread:'root spread',rootSpacing:'root spacing',
|
||
rootLength:'root length',lineWidth:'line width',hue:'color',hueStep:'color shift',
|
||
saturation:'saturation',lightness:'lightness',growthOverlap:'growth overlap'};
|
||
function updateFormulaUI(){
|
||
const c=state.current,g=c?.genome||baseGenome();
|
||
document.querySelector('#formula-name').textContent=familyName(g.family);
|
||
document.querySelector('#organism-id').textContent=c?formulaId(c.id):'F000';
|
||
document.querySelector('#trait-branch').textContent=g.branches;
|
||
document.querySelector('#trait-angle').textContent=`${Math.round(g.angle*180/Math.PI)}°`;
|
||
document.querySelector('#trait-scale').textContent=g.scale.toFixed(2);
|
||
document.querySelector('#trait-symmetry').textContent=g.symmetry;
|
||
document.querySelector('#trait-depth').textContent=g.depth;
|
||
document.querySelector('#trait-closure').textContent=g.closure.toFixed(2);
|
||
document.querySelector('#trait-wave').textContent=`${Math.round(g.angleWave*180/Math.PI)}°`;
|
||
document.querySelector('#trait-pulse').textContent=g.scaleWave.toFixed(2);
|
||
document.querySelector('#trait-facets').textContent=g.facets;
|
||
document.querySelector('#trait-figure').textContent=g.figureSides>=3
|
||
?`${Math.round(g.figureSpan*g.figureSides)}/${g.figureSides}-gon`
|
||
:'none';
|
||
document.querySelector('#trait-curve').textContent=g.curveMode
|
||
?`${curveName(g.curveMode)} ${g.curveFrequency.toFixed(1)}×`
|
||
:'linear';
|
||
document.querySelector('#trait-layout').textContent=layoutName(g.rootLayout);
|
||
const lineage=document.querySelector('#lineage');
|
||
if(c?.parents?.length===2){
|
||
const inherited=c.inheritance?`${c.inheritance.a}/${c.inheritance.b} genes`:'mixed genes';
|
||
const breeding=c.breeding
|
||
?` · ${mixName(c.breeding.mix)} · ${MUTATION_PROFILES[c.breeding.mutationLevel].name}`
|
||
:'';
|
||
const mutations=c.mutations?.length?` · mutation: ${c.mutations.map(key=>geneLabels[key]||key).join(', ')}`:' · no mutation';
|
||
lineage.textContent=`${formulaId(c.parents[0])} × ${formulaId(c.parents[1])} · inherited ${inherited}${breeding}${mutations}`;
|
||
}else if(c?.source==='import')lineage.textContent='imported formula · external genome';
|
||
else lineage.textContent='founder formula · no parents';
|
||
updateSelectionUI();
|
||
}
|
||
function updateSelectionUI(){
|
||
const selected=selectedRecords();
|
||
const slot=(selector,label,item)=>{
|
||
document.querySelector(selector).innerHTML=`<b>${label}</b> ${item?`${formulaId(item.id)} · ${familyName(item.genome.family)}`:'choose a formula'}`;
|
||
};
|
||
slot('#parent-a','A',selected[0]);slot('#parent-b','B',selected[1]);
|
||
ui.cross.disabled=isBusy||selected.length!==2;
|
||
const crossLabel=ui.cross.querySelector('span');
|
||
if(selected.length===2){
|
||
crossLabel.textContent=`Cross ${formulaId(selected[0].id)} × ${formulaId(selected[1].id)}`;
|
||
document.querySelector('#action-kicker').textContent=`${mixName(state.breeding.mix)} · ${MUTATION_PROFILES[state.breeding.mutationLevel].name} mutation`;
|
||
document.querySelector('#action-title').textContent=`${familyName(selected[0].genome.family)} × ${familyName(selected[1].genome.family)}`;
|
||
}else if(selected.length===1){
|
||
crossLabel.textContent='Choose parent B';
|
||
document.querySelector('#action-kicker').textContent=`parent A · ${formulaId(selected[0].id)}`;
|
||
document.querySelector('#action-title').textContent='Choose one more formula from the Gallery';
|
||
}else{
|
||
crossLabel.textContent='Cross A × B';
|
||
document.querySelector('#action-kicker').textContent='selective generation · choose A and B';
|
||
document.querySelector('#action-title').textContent='Choose two parents from the Gallery';
|
||
}
|
||
}
|
||
function syncBreedingUI(){
|
||
document.querySelector('#gene-mix').value=String(state.breeding.mix);
|
||
document.querySelector('#mutation-level').value=String(state.breeding.mutationLevel);
|
||
}
|
||
function hideArchivePreview(){
|
||
previewToken++;cancelAnimationFrame(previewAnimationFrame);
|
||
document.querySelector('#genome-preview').classList.add('hidden');
|
||
}
|
||
function showArchivePreview(item,card){
|
||
if(matchMedia('(hover: none)').matches)return;
|
||
const token=++previewToken;
|
||
cancelAnimationFrame(previewAnimationFrame);
|
||
const preview=document.querySelector('#genome-preview');
|
||
const previewCanvas=document.querySelector('#preview-canvas'),paths=compileGeometry(item.genome);
|
||
paintFormulaMiniature(previewCanvas.getContext('2d'),paths,item.seed,0);
|
||
document.querySelector('#preview-id').textContent=formulaId(item.id);
|
||
document.querySelector('#preview-meta').textContent=item.parents?.length===2
|
||
?`${formulaId(item.parents[0])} × ${formulaId(item.parents[1])} · ${familyName(item.genome.family)}`
|
||
:`${familyName(item.genome.family)} · ${item.source==='import'?'imported':'founder'}`;
|
||
preview.classList.remove('hidden');
|
||
const panel=ui.gallery.getBoundingClientRect(),cardBox=card.getBoundingClientRect(),previewWidth=preview.offsetWidth;
|
||
const left=panel.left-previewWidth-12>=12?panel.left-previewWidth-12:Math.min(innerWidth-previewWidth-12,panel.right+12);
|
||
const top=clamp(cardBox.top+cardBox.height/2-preview.offsetHeight/2,72,innerHeight-preview.offsetHeight-38);
|
||
preview.style.left=`${left}px`;preview.style.top=`${top}px`;
|
||
if(matchMedia('(prefers-reduced-motion: reduce)').matches){
|
||
paintFormulaMiniature(previewCanvas.getContext('2d'),paths,item.seed,1);return;
|
||
}
|
||
const start=performance.now();
|
||
let lastPaint=0;
|
||
const frame=now=>{
|
||
if(token!==previewToken)return;
|
||
const linear=clamp((now-start)/PREVIEW_TIME,0,1);
|
||
if(now-lastPaint>=30||linear===1){
|
||
paintFormulaMiniature(previewCanvas.getContext('2d'),paths,item.seed,1-Math.pow(1-linear,2.2));
|
||
lastPaint=now;
|
||
}
|
||
if(linear<1)previewAnimationFrame=requestAnimationFrame(frame);
|
||
};
|
||
previewAnimationFrame=requestAnimationFrame(frame);
|
||
}
|
||
function renderArchive(){
|
||
hideArchivePreview();ui.archive.replaceChildren();
|
||
const items=[...state.history].sort((a,b)=>b.id-a.id);
|
||
for(const item of items.slice(0,historyVisible)){
|
||
ensureThumbnail(item);
|
||
const card=document.createElement('article');
|
||
if(item.id===state.current?.id)card.classList.add('current');
|
||
const selectedIndex=state.selectedParents.indexOf(item.id);
|
||
if(selectedIndex>=0)card.classList.add(selectedIndex===0?'selected-a':'selected-b');
|
||
card.dataset.formulaId=item.id;card.tabIndex=0;card.setAttribute('role','button');
|
||
card.setAttribute('aria-label',`View ${formulaId(item.id)}, ${familyName(item.genome.family)}`);
|
||
card.addEventListener('click',()=>viewStoredFormula(item));
|
||
card.addEventListener('keydown',event=>{
|
||
if(event.target===card&&(event.key==='Enter'||event.key===' ')){event.preventDefault();viewStoredFormula(item)}
|
||
});
|
||
card.addEventListener('mouseenter',()=>showArchivePreview(item,card));card.addEventListener('mouseleave',hideArchivePreview);
|
||
card.addEventListener('focus',()=>showArchivePreview(item,card));card.addEventListener('blur',hideArchivePreview);
|
||
const image=document.createElement('img');image.src=item.thumbnail;image.alt=`Fractal ${formulaId(item.id)}`;image.loading='lazy';
|
||
const label=document.createElement('span');label.textContent=formulaId(item.id);
|
||
const parentPick=document.createElement('button');parentPick.className='parent-pick';
|
||
parentPick.textContent=selectedIndex>=0?(selectedIndex===0?'A':'B'):'+';
|
||
parentPick.setAttribute('aria-label',selectedIndex>=0
|
||
?`Remove ${formulaId(item.id)} from parent ${selectedIndex===0?'A':'B'}`
|
||
:`Select ${formulaId(item.id)} as a parent`);
|
||
parentPick.title=selectedIndex>=0?'Remove parent':'Select for crossing';
|
||
parentPick.addEventListener('click',event=>{event.stopPropagation();toggleParent(item.id)});
|
||
card.append(image,label,parentPick);ui.archive.append(card);
|
||
}
|
||
const remaining=Math.max(0,items.length-historyVisible),loadMore=document.querySelector('#load-more');
|
||
loadMore.classList.toggle('hidden',remaining===0);loadMore.textContent=`Show more · ${remaining}`;
|
||
document.querySelector('#gallery-count').textContent=state.history.length;
|
||
updateSelectionUI();
|
||
}
|
||
function setGallery(open){
|
||
galleryOpen=open;
|
||
ui.gallery.classList.toggle('open',open);ui.gallery.classList.toggle('closed',!open);
|
||
document.body.classList.toggle('gallery-open',open);
|
||
document.querySelector('#gallery-toggle').setAttribute('aria-expanded',String(open));
|
||
hideArchivePreview();updateView();render(lastProgress);
|
||
}
|
||
function closeGalleryOnSmallScreen(){if(width<1180)setGallery(false)}
|
||
function toggleGallery(){setGallery(!galleryOpen)}
|
||
function closeExportMenu(){
|
||
document.querySelector('#export-menu').classList.add('hidden');
|
||
document.querySelector('#export-toggle').setAttribute('aria-expanded','false');
|
||
}
|
||
function showToast(message){
|
||
const toast=document.querySelector('#toast');clearTimeout(toastTimer);
|
||
toast.textContent=message;toast.classList.remove('hidden');
|
||
toastTimer=setTimeout(()=>toast.classList.add('hidden'),1800);
|
||
}
|
||
|
||
ui.cross.addEventListener('click',crossSelected);
|
||
document.querySelector('#gallery-toggle').addEventListener('click',toggleGallery);
|
||
document.querySelector('#gallery-close').addEventListener('click',()=>setGallery(false));
|
||
document.querySelector('#clear-parents').addEventListener('click',()=>{
|
||
state.selectedParents=[];saveState();renderArchive();
|
||
});
|
||
document.querySelector('#load-more').addEventListener('click',()=>{historyVisible+=HISTORY_PAGE;renderArchive()});
|
||
document.querySelector('#export-toggle').addEventListener('click',event=>{
|
||
event.stopPropagation();const menu=document.querySelector('#export-menu'),open=menu.classList.contains('hidden');
|
||
menu.classList.toggle('hidden',!open);event.currentTarget.setAttribute('aria-expanded',String(open));
|
||
});
|
||
document.querySelector('#export-menu').addEventListener('click',event=>event.stopPropagation());
|
||
document.querySelector('#save-background').addEventListener('click',()=>downloadImage(true));
|
||
document.querySelector('#save-transparent').addEventListener('click',()=>downloadImage(false));
|
||
document.querySelector('#save-video').addEventListener('click',exportVideo);
|
||
document.querySelector('#save-formula').addEventListener('click',exportFormula);
|
||
document.querySelector('#import-formula').addEventListener('click',()=>{
|
||
closeExportMenu();document.querySelector('#formula-file').click();
|
||
});
|
||
document.querySelector('#formula-file').addEventListener('change',async event=>{
|
||
const input=event.currentTarget,file=input.files?.[0];
|
||
try{await importFormulaFile(file)}
|
||
catch(error){console.warn('Could not import the formula',error);showToast(error instanceof SyntaxError?'Invalid JSON file':error.message||'Formula import failed')}
|
||
finally{input.value=''}
|
||
});
|
||
document.querySelector('#gene-mix').addEventListener('change',event=>{
|
||
state.breeding=normalizeBreeding({...state.breeding,mix:Number(event.currentTarget.value)});
|
||
saveState();updateSelectionUI();
|
||
});
|
||
document.querySelector('#mutation-level').addEventListener('change',event=>{
|
||
state.breeding=normalizeBreeding({...state.breeding,mutationLevel:Number(event.currentTarget.value)});
|
||
saveState();updateSelectionUI();
|
||
});
|
||
document.addEventListener('click',closeExportMenu);
|
||
document.addEventListener('pointerdown',requestPersistentStorage,{once:true,capture:true});
|
||
document.addEventListener('keydown',event=>{
|
||
if(event.key==='Escape'){closeExportMenu();hideArchivePreview();if(width<1180)setGallery(false);return}
|
||
if(event.repeat||event.target.closest('button,input,select,textarea'))return;
|
||
if(event.code==='Space'){event.preventDefault();if(!ui.cross.disabled)crossSelected()}
|
||
});
|
||
addEventListener('resize',()=>{
|
||
resize();
|
||
});
|
||
addEventListener('beforeunload',saveState);
|
||
|
||
async function boot(){
|
||
await hydrateState();
|
||
syncBreedingUI();
|
||
await refreshStorageStatus();
|
||
ensureInitialPopulation();
|
||
galleryOpen=true;
|
||
ui.gallery.classList.toggle('closed',!galleryOpen);ui.gallery.classList.toggle('open',galleryOpen);
|
||
document.body.classList.toggle('gallery-open',galleryOpen);
|
||
document.querySelector('#gallery-toggle').setAttribute('aria-expanded',String(galleryOpen));
|
||
if(state.current)state.current=runtimeFormula(state.current);
|
||
resize();renderArchive();
|
||
if(state.current){
|
||
updateFormulaUI();updateView();
|
||
animateFormula(()=>{
|
||
addCurrentToHistory();
|
||
if(!state.selectedParents.length)state.selectedParents=[state.current.id];
|
||
saveState();renderArchive();
|
||
});
|
||
}
|
||
}
|
||
boot();
|