From f2f5ecf8b571560e1c6f9988fa9207cdfe2532d0 Mon Sep 17 00:00:00 2001 From: Kyle <41976328+ImKyle4815@users.noreply.github.com> Date: Sun, 24 Oct 2021 13:23:52 -0700 Subject: [PATCH] improved unstable margins / preserve opacity --- img/frames/unstable/margins/pinline.svg | 7 +++++++ img/frames/unstable/margins/pinlineThumb.png | Bin 0 -> 1127 bytes img/frames/unstable/margins/title.svg | 5 +++++ img/frames/unstable/margins/titleThumb.png | Bin 0 -> 1185 bytes js/creator-23.js | 8 +++++--- js/frames/packMarginUnstable.js | 15 ++++++++------- 6 files changed, 25 insertions(+), 10 deletions(-) create mode 100644 img/frames/unstable/margins/pinline.svg create mode 100644 img/frames/unstable/margins/pinlineThumb.png create mode 100644 img/frames/unstable/margins/title.svg create mode 100644 img/frames/unstable/margins/titleThumb.png diff --git a/img/frames/unstable/margins/pinline.svg b/img/frames/unstable/margins/pinline.svg new file mode 100644 index 00000000..a66ba15d --- /dev/null +++ b/img/frames/unstable/margins/pinline.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/img/frames/unstable/margins/pinlineThumb.png b/img/frames/unstable/margins/pinlineThumb.png new file mode 100644 index 0000000000000000000000000000000000000000..085bc3c6d8628907e21e40c71f4fc6e655ff7dab GIT binary patch literal 1127 zcmeAS@N?(olHy`uVBq!ia0vp^5kOqQ!NkD8*cUVDFpz4^baoE#baqxKD9TUE%t>Wn z(3n^|(bnUzgUr$R;H5!Yd~X9>Rh&yVDQG>?2-Rt7y%d&l_283B`WcrdY}sMKwT_kD zUTig=-nm^?JGh!2uy@R!J$X_0lpp(-Tu?gJ{J3t2Nj6O-oLA z^UlzV-?{7$aU`)c3mJcPsWN1~{;`ywKmPq9o6~>q%wHUTayHM0jw8iB=2=Iij~LH3 zo%`9Yuw$x9>yJ4VcNTC9*%!r@{pc;enAVuy*5i{k&%#AVY{*pLW%XanJb!Q?Gpt zpMBts`pe!vF-s=4ZH?Wp`_$euPPcaW;W?e>OQu>aYYYxj=7 zWS+2a-L(9MX6J-89yed>y?^)m-P`-dZ~xUX%(`8)J&|ShS77Y0C3(BMF#HF>1$&oI zW?*3I_H=O!skrra_Wo?)K$!#g=SrwfUex@LwUa|O_uSEyT4n*Rf2LlGYIT|zbkujw zojFz|!ZJ%9sAx2WrL%W7Z`&3tlC|(#y490+MQ3C6PTI0JM|n<8s=K55v*!5j^83H{ zoc~?g|5!7~E6^|`P*>w(gU~LqwVLhL_RE(fPdwEs61Cs+V~CH>_{dd%!IO{q?CT=1Qkw_|5lo9=ky{fWb6BT zUnU-?GY`$;`+e1Wzd{lJ`>6^={qL&VF4izDUY{O)+~j=Ob8)d*UIqWQ`277*UXsK6 z<<%|2^15{k-+$9NJxk*H))jXme$`H#zuAFdV=&93c+0ho94-n>f*lSlN&+ZMY+@KH zU9!7B_%L&~PE9p6w$b?f({I~@NXgexF;l(cjTawY6!FG~`%cb0azCC=(cFJlV)-tv?)%oqn|`Mrvnh63HtqBpsjx?LEX^)`yPRH_ zd(|W6L|@F`-;es#<(wDufBSyyDl_}-<^N{SKG*&H=W^lH_wT;FSYEX${rpG0uNM-( zo(NPG;rb;qqj=BPQvI!gbLM`t+k5}4a-#+F>FKIqKW_2(!?It!bA8p$r+a`2mBG{1 K&t;ucLK6T^ZT)`$ literal 0 HcmV?d00001 diff --git a/img/frames/unstable/margins/title.svg b/img/frames/unstable/margins/title.svg new file mode 100644 index 00000000..44f2d2b3 --- /dev/null +++ b/img/frames/unstable/margins/title.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/img/frames/unstable/margins/titleThumb.png b/img/frames/unstable/margins/titleThumb.png new file mode 100644 index 0000000000000000000000000000000000000000..b88e75add4753c0405628432177ce55f01811e80 GIT binary patch literal 1185 zcmeAS@N?(olHy`uVBq!ia0vp^5kOqQ!NkD8*cUVDFpz4^baoE#baqxKD9TUE%t>Wn z(3n^|(bnUzgUr$R;H5!Yd~X9>Rh&yVDQG>?2-Rt7y%d&l_283B`WcrdY}sMKwT_kD zUTig=-nm^?JGh!2uy@R!J$X_0lpp(-Tu?gJ{J3t2Nj6O-oLA z^UlzV-?{7$aU`)c3mJcPsWN1~{;`ywKmPq9o6~>q%wHUTayHM0jw8iB=2=Iij~LH3 zo%`9Yuw$x9>yJ4VcNTC9*%!r@{pc;enAVuy*5i{k&%#AVY{*pLW%XanJb!Q?Gpt zpMBts`pe!vF-s=4ZH?Wp`_$euPPcaW;W?e>OQu>aYYYxj=7 zWS+2a-L(9MX6J-89yed>y?^)m-P`-dZ~xUX%(`8)J&|ShS77Y0C3(BMF#HF>1$&oI zW?*1C>gnPbQgQ3;EPs#SLYV{m^Q%|erk}gxpsn4lR8$ct)#)k0IoC?`(o*OD94!-) zSSNPeh?l&&*N;`shD}iRinofG=gbw$FPwPBQIb}?ap`(zX3sA(f8M#b?fmyw?`!Wr z|NisezkMq`7DV$LR?}|PQmU$+>&WeT{p;3!tzyr%2l%YmC**&|@=EIMx%=*We>L9v z>%YlY*CmVheF^z{@2cIJn74w06CJki+ZIvTFf*ZBWXXvKB5FQm*(EAFpGe4COzZiO zvgOIU*(yitZS<9nx~{Y5UsrnaW##wQP@q}`R!xtI&*t70`fKnuV}r)5)7;u+Ikz62 zH2&yoeDR0Nlk^Xz6&iN?b1WZi=a-J@xvrdNS9||Yp;qO}S5?0w{o{eIekslKvsU$` ztgzagO`B567#LXu9N@(3viA?d_*z62r~UAFbp1{5)uTsS{iZ)Ncx$_>MJ?UFr*^-o zO|FUcoUWeu^?F6t!56-|pKsIOGbA*?K)w7Nw$pKmN(DZU5Jlacge<(uGP# zA0Jq1nHH5TrXUw%Ghy1t8S8Uj*lde+$@!aJn>j~Zz5k7%c8y-uMeAec+6oN}OdL1} zrOS#sAEPa=I-dEk&zae7Y&1GM=UU@c)RZ#QxtG=yQ<#Y==I^M=)-h1rL9$MX(Cx5Q@ z)#vQ1Us?H7C(a1I8gt(zJ(<({PrfL-mWu+DU!0km SQw*5I89ZJ6T-G@yGywo1dKhp3 literal 0 HcmV?d00001 diff --git a/js/creator-23.js b/js/creator-23.js index 91619c3d..91e24461 100644 --- a/js/creator-23.js +++ b/js/creator-23.js @@ -337,9 +337,11 @@ function drawFrames() { //manually blends colors, basing blending-alpha on the masks and desired draw-opacity, but preserving alpha for (var i = 0; i < existingPixels.length; i += 4) { const functionalAlpha = maskPixels[i + 3] * functionalAlphaMultiplier //functional alpha = alpha ignoring source image - existingPixels[ i ] = existingPixels[ i ] * (1 - functionalAlpha) + newPixels[ i ] * functionalAlpha; //RED - existingPixels[i + 1] = existingPixels[i + 1] * (1 - functionalAlpha) + newPixels[i + 1] * functionalAlpha; //GREEN - existingPixels[i + 2] = existingPixels[i + 2] * (1 - functionalAlpha) + newPixels[i + 2] * functionalAlpha; //BLUE + if (newPixels[i + 3] > 0) { //Only blend if the new image has alpha + existingPixels[ i ] = existingPixels[ i ] * (1 - functionalAlpha) + newPixels[ i ] * functionalAlpha; //RED + existingPixels[i + 1] = existingPixels[i + 1] * (1 - functionalAlpha) + newPixels[i + 1] * functionalAlpha; //GREEN + existingPixels[i + 2] = existingPixels[i + 2] * (1 - functionalAlpha) + newPixels[i + 2] * functionalAlpha; //BLUE + } } frameContext.putImageData(existingData, 0, 0); } else { diff --git a/js/frames/packMarginUnstable.js b/js/frames/packMarginUnstable.js index 37e114c9..a1cbcbca 100644 --- a/js/frames/packMarginUnstable.js +++ b/js/frames/packMarginUnstable.js @@ -1,15 +1,16 @@ //Create objects for common properties across available frames var bounds = {x:-0.044, y:-1/35, width:1.088, height:37/35}; var ogBounds = {x:0, y:0, width:1, height:1}; +var masks = [{src:'/img/frames/unstable/margins/title.svg', name:'Title'}, {src:'/img/frames/unstable/margins/pinline.svg', name:'Bottom'}]; //defines available frames availableFrames = [ - {name:'White Extension', src:'/img/frames/unstable/margins/w.png', bounds:bounds, ogBounds:ogBounds}, - {name:'Blue Extension', src:'/img/frames/unstable/margins/u.png', bounds:bounds, ogBounds:ogBounds}, - {name:'Black Extension', src:'/img/frames/unstable/margins/b.png', bounds:bounds, ogBounds:ogBounds}, - {name:'Red Extension', src:'/img/frames/unstable/margins/r.png', bounds:bounds, ogBounds:ogBounds}, - {name:'Green Extension', src:'/img/frames/unstable/margins/g.png', bounds:bounds, ogBounds:ogBounds}, - {name:'Multicolored Extension', src:'/img/frames/unstable/margins/m.png', bounds:bounds, ogBounds:ogBounds}, - {name:'Land Extension', src:'/img/frames/unstable/margins/c.png', bounds:bounds, ogBounds:ogBounds} + {name:'White Extension', src:'/img/frames/unstable/margins/w.png', bounds:bounds, ogBounds:ogBounds, masks:masks}, + {name:'Blue Extension', src:'/img/frames/unstable/margins/u.png', bounds:bounds, ogBounds:ogBounds, masks:masks}, + {name:'Black Extension', src:'/img/frames/unstable/margins/b.png', bounds:bounds, ogBounds:ogBounds, masks:masks}, + {name:'Red Extension', src:'/img/frames/unstable/margins/r.png', bounds:bounds, ogBounds:ogBounds, masks:masks}, + {name:'Green Extension', src:'/img/frames/unstable/margins/g.png', bounds:bounds, ogBounds:ogBounds, masks:masks}, + {name:'Multicolored Extension', src:'/img/frames/unstable/margins/m.png', bounds:bounds, ogBounds:ogBounds, masks:masks}, + {name:'Land Extension', src:'/img/frames/unstable/margins/c.png', bounds:bounds, ogBounds:ogBounds, masks:masks} ]; //disables/enables the "Load Frame Version" button document.querySelector('#loadFrameVersion').disabled = false;