Stick Figure — Full Tux v2

Ready

Appearance

Stroke Color

Global Thickness

8 px

Eye Diameter

14 px

Smile Thickness

6 px

Anatomy

Neck Length

22 px

Shoulder Width

200 px

Clavicle Drop

6 px

Torso Length

150 px

Hip Width

130 px

Foot Spread

70 px

Ground Y

520 px

Shoulder (Sternum) Y

248 px

Lean Angle

0°

Arms (joints)

Upper Arm Length

100

Forearm Length

100

L Shoulder Angle

120°

L Elbow Bend

25°

R Shoulder Angle

60°

R Elbow Bend

-25°

Show elbow dots

Smile

Shape

Vertical Offset

28 px

Span

110°

Tuxedo (upper)

Show jacket

Style

Jacket Length

160

Jacket Width

220

Shirt Width

V Depth

105

Collar Rise

Satin Width

Notch Depth

Jacket Color

Satin Color

Shirt Color

Tie

Tie Color

Pocket Square

Shirt studs Show cuffs Sleeve caps

Sleeve Width

Sleeve Length

Roundness

Inset

Lower Body

Show pants Show shoes

Pants Color

Shoes Color

Thigh Width

36 px

Ankle Width

16 px

Crotch Gap

28 px

Hem Gap

6 px

Shoe Width

46 px

Shoe Height

10 px

Images / Stickers

Image 1

100

120

Size

100%

Rotate

0°

Visible

Image 2

220

140

Size

100%

Rotate

0°

Visible

Image 3

340

160

Size

100%

Rotate

0°

Visible

Image 4

460

180

Size

100%

Rotate

0°

Visible

// ---------- Images / Stickers ---------- const IMG_COUNT = 4; const img = [null, {wrap:E('img1Wrap'), el:E('img1'), file:E('img1File'), x:E('img1X'), y:E('img1Y'), s:E('img1Scale'), r:E('img1Rot'), vis:E('img1Visible'), xVal:E('img1XVal'), yVal:E('img1YVal'), sVal:E('img1ScaleVal'), rVal:E('img1RotVal'), reset:E('img1Reset'), clear:E('img1Clear'), meta:{nw:0,nh:0, url:''}}, {wrap:E('img2Wrap'), el:E('img2'), file:E('img2File'), x:E('img2X'), y:E('img2Y'), s:E('img2Scale'), r:E('img2Rot'), vis:E('img2Visible'), xVal:E('img2XVal'), yVal:E('img2YVal'), sVal:E('img2ScaleVal'), rVal:E('img2RotVal'), reset:E('img2Reset'), clear:E('img2Clear'), meta:{nw:0,nh:0, url:''}}, {wrap:E('img3Wrap'), el:E('img3'), file:E('img3File'), x:E('img3X'), y:E('img3Y'), s:E('img3Scale'), r:E('img3Rot'), vis:E('img3Visible'), xVal:E('img3XVal'), yVal:E('img3YVal'), sVal:E('img3ScaleVal'), rVal:E('img3RotVal'), reset:E('img3Reset'), clear:E('img3Clear'), meta:{nw:0,nh:0, url:''}}, {wrap:E('img4Wrap'), el:E('img4'), file:E('img4File'), x:E('img4X'), y:E('img4Y'), s:E('img4Scale'), r:E('img4Rot'), vis:E('img4Visible'), xVal:E('img4XVal'), yVal:E('img4YVal'), sVal:E('img4ScaleVal'), rVal:E('img4RotVal'), reset:E('img4Reset'), clear:E('img4Clear'), meta:{nw:0,nh:0, url:''}}, ]; function setImageHref(el, dataUrl){ el.setAttribute('href', dataUrl); el.setAttributeNS('http://www.w3.org/1999/xlink','href', dataUrl); // legacy compat } function drawImg(i){ const it = img[i]; const scale = Number(it.s.value)/100; const w = Math.max(1, it.meta.nw * scale); const h = Math.max(1, it.meta.nh * scale); it.xVal.textContent = it.x.value; it.yVal.textContent = it.y.value; it.sVal.textContent = it.s.value; it.rVal.textContent = it.r.value; it.el.setAttribute('width', w); it.el.setAttribute('height', h); const cx = w/2, cy = h/2, deg = Number(it.r.value); it.wrap.setAttribute('transform', `translate(${Number(it.x.value)} ${Number(it.y.value)}) rotate(${deg} ${cx} ${cy})`); it.wrap.style.display = (it.vis.checked && it.meta.url) ? 'block' : 'none'; } function clearImg(i){ const it = img[i]; it.meta = {nw:0, nh:0, url:''}; setImageHref(it.el, ''); it.el.setAttribute('width', 0); it.el.setAttribute('height', 0); it.wrap.style.display = 'none'; } function resetImg(i){ const it = img[i]; it.x.value = 80 + (i-1)*120; it.y.value = 120 + (i-1)*20; it.s.value = 100; it.r.value = 0; drawImg(i); } function setupImage(i){ const it = img[i]; it.file.addEventListener('change', e=>{ const f = e.target.files && e.target.files[0]; if(!f) return; const reader = new FileReader(); reader.onload = () => { const url = reader.result; const probe = new Image(); probe.onload = ()=>{ it.meta.nw = probe.naturalWidth; it.meta.nh = probe.naturalHeight; it.meta.url = url; setImageHref(it.el, url); // auto-scale first load to ~240px width const auto = Math.max(5, Math.min(300, Math.round((240 / it.meta.nw) * 100))); if (!e.target.dataset._loadedOnce){ it.s.value = auto; e.target.dataset._loadedOnce = '1'; } drawImg(i); setStatus(`Image ${i} loaded`); }; probe.src = url; }; reader.readAsDataURL(f); }); [it.x,it.y,it.s,it.r,it.vis].forEach(ctrl=>{ ctrl.addEventListener('input', ()=> drawImg(i)); ctrl.addEventListener('change', ()=> drawImg(i)); }); it.reset.addEventListener('click', ()=> resetImg(i)); it.clear.addEventListener('click', ()=> { clearImg(i); setStatus(`Image ${i} cleared`); }); clearImg(i); resetImg(i); } (function initImages(){ for(let i=1;i<=IMG_COUNT;i++) setupImage(i); })(); // ---------- Export ---------- function getSVGString(){ const svg = E('scene').cloneNode(true); svg.setAttribute('xmlns','http://www.w3.org/2000/svg'); svg.setAttribute('xmlns:xlink','http://www.w3.org/1999/xlink'); return new XMLSerializer().serializeToString(svg); } function download(name, href){ const a = document.createElement('a'); a.href = href; a.download = name; document.body.appendChild(a); a.click(); a.remove(); } function exportSVG(){ try{ const txt = getSVGString(); const blob = new Blob([txt], {type:'image/svg+xml;charset=utf-8'}); const url = URL.createObjectURL(blob); download('figure.svg', url); setTimeout(()=>URL.revokeObjectURL(url), 1000); setStatus('SVG downloaded'); }catch(e){ setStatus('SVG export error'); console.error(e); } } function exportPNG(){ try{ const scale = Number(pngScale.value)||2; const txt = getSVGString(); const blob = new Blob([txt], {type:'image/svg+xml;charset=utf-8'}); const url = URL.createObjectURL(blob); const img = new Image(); img.onload = ()=>{ const c = document.createElement('canvas'); c.width = 800*scale; c.height = 600*scale; const ctx = c.getContext('2d'); ctx.fillStyle = '#ffffff'; ctx.fillRect(0,0,c.width,c.height); ctx.drawImage(img,0,0,c.width,c.height); URL.revokeObjectURL(url); download('figure.png', c.toDataURL('image/png')); setStatus('PNG saved'); }; img.onerror = ()=>{ setStatus('PNG export error'); }; img.src = url; }catch(e){ setStatus('PNG export error'); console.error(e); } } // ---------- Lean & stroke ---------- function updateLean(){ S(figureWrap,'transform',`rotate(${Number(leanAngle.value)} ${220} ${Number(groundY.value)})`); } function applyStrokeColor(hexCol){ fig.setAttribute('stroke',hexCol); elbowL.setAttribute('fill',hexCol); elbowR.setAttribute('fill',hexCol); } function setStrokeWidth(px){ [head,neck,clavL,clavR,torso,eyeL,eyeR,mouth,armL,armR,legL,legR].forEach(el=>S(el,'stroke-width',px)); S(mouth,'stroke-width',Number(mouthThickness.value)); strokeWidthVal.textContent=px; } // ---------- Wiring ---------- function redrawAll(){ drawSkeleton(); drawArms(); drawSleeves(); drawTux(); drawPants(); drawShoes(); drawBoard(); updateLean(); } function on(el,ev,fn){el.addEventListener(ev,fn);} // init (polished defaults) (function init(){ try{ applyStrokeColor(strokeColor.value); setStrokeWidth(Number(strokeWidth.value)); drawEyes(Number(eyeDiameter.value)); S(mouth,'stroke-width',Number(mouthThickness.value)); drawMouth(); redrawAll(); // set initial labels pngScaleVal.textContent = pngScale.value; // ensure smile units label matches shape function updateSmileSpanUnitsNow(){ if(smileShape.value==='flat'){ smileSpanLabel.textContent='Width'; smileSpanVal.textContent=smileSpan.value+' px'; smileSpan.max='400'; } else{ smileSpanLabel.textContent='Span'; smileSpanVal.textContent=smileSpan.value+'°'; smileSpan.max='220'; } } updateSmileSpanUnitsNow(); setStatus('Loaded v2 + Images'); }catch(err){ console.error(err); setStatus('Init error: '+err.message); } })(); // listeners on(strokeColor,'input',e=>{const h=hex(e.target.value)||'#111111'; strokeHex.value=h; applyStrokeColor(h);}); on(strokeHex,'change',e=>{const h=hex(e.target.value)||'#111111'; strokeColor.value=h; applyStrokeColor(h);}); on(strokeWidth,'input',e=>{setStrokeWidth(Number(e.target.value)); drawSleeves();}); on(eyeDiameter,'input',e=>{eyeDiameterVal.textContent=e.target.value; drawEyes(Number(e.target.value));}); on(mouthThickness,'input',e=>{S(mouth,'stroke-width',Number(e.target.value)); mouthThicknessVal.textContent=e.target.value;}); [neckLen,shoulderW,clavDrop,torsoLen,hipW,footSpread,groundY,shoulderY].forEach(c=>on(c,'input',()=>{ neckLenVal.textContent=neckLen.value; shoulderWVal.textContent=shoulderW.value; clavDropVal.textContent=clavDrop.value; torsoLenVal.textContent=torsoLen.value; hipWVal.textContent=hipW.value; footSpreadVal.textContent=footSpread.value; groundYVal.textContent=groundY.value; shoulderYVal.textContent=shoulderY.value; redrawAll(); })); on(leanAngle,'input',()=>{leanAngleVal.textContent=leanAngle.value; updateLean();}); [lShoulder,lElbow,rShoulder,rElbow,upperLen,foreLen,showElbows].forEach(c=>on(c,'input',()=>{ lShoulderVal.textContent=lShoulder.value; lElbowVal.textContent=lElbow.value; rShoulderVal.textContent=rShoulder.value; rElbowVal.textContent=rElbow.value; upperLenVal.textContent=upperLen.value; foreLenVal.textContent=foreLen.value; drawArms(); drawSleeves(); drawTux(); })); function updateSmileSpanUnits(){ if(smileShape.value==='flat'){ smileSpanLabel.textContent='Width'; smileSpanVal.textContent=smileSpan.value+' px'; if(smileSpan.max!=='400'){smileSpan.max='400'; if(Number(smileSpan.value)>400) smileSpan.value=200;} } else{ smileSpanLabel.textContent='Span'; smileSpanVal.textContent=smileSpan.value+'°'; if(smileSpan.max!=='220'){smileSpan.max='220'; if(Number(smileSpan.value)>220) smileSpan.value=120;} } } [smileShape,smileOffsetY,smileSpan].forEach(c=>on(c,'input',()=>{smileOffsetYVal.textContent=smileOffsetY.value; updateSmileSpanUnits(); drawMouth();})); [tuxVisible,lapelStyle,tuxJacketW,tuxShirtW,tuxVDepth,tuxLen,tuxCollarRise,satinW,notchDepth,tuxJacketColor,satinColor,tuxShirtColor,tuxTieType,tuxTieColor,pocketColor,showCuffs].forEach(c=>on(c,'input',()=>{ drawTux(); drawSleeves(); })); [sleeveVisible,sleeveW,sleeveLen,sleeveRound,sleeveInset].forEach(c=>on(c,'input',drawSleeves)); // Lower body listeners [pantsVisible,shoesVisible,pantsColor,shoesColor,thighW,ankleW,crotchGap,hemGap,shoeW,shoeH].forEach(c=>on(c,'input',()=>{ thighWVal.textContent=thighW.value; ankleWVal.textContent=ankleW.value; crotchGapVal.textContent=crotchGap.value; hemGapVal.textContent=hemGap.value; shoeWVal.textContent=shoeW.value; shoeHVal.textContent=shoeH.value; drawPants(); drawShoes(); })); // Board listeners [boardVisible,boardX,boardY,boardW,boardH,boardFill,boardStroke,t1,t1Size,t1Y,t1Color,t2,t2Size,t2Y,t2Color,t3,t3Size,t3Y,t3Color].forEach(c=>{c.addEventListener('input',drawBoard); c.addEventListener('change',drawBoard);}); // Export on(pngScale,'input',()=>pngScaleVal.textContent=pngScale.value); on(btnExportSVG,'click',exportSVG); on(btnExportPNG,'click',exportPNG); })();