{
  "version": 3,
  "sources": ["ssg:https://framerusercontent.com/modules/UgNwQfdobmtdwNLUye1O/3Cwq15sHuHi3SHV5GDmM/P5SplashMobile.js"],
  "sourcesContent": ["import{jsx as _jsx}from\"react/jsx-runtime\";import{useEffect,useRef}from\"react\";export default function P5SplashMobile(props){const sketchRef=useRef(null);useEffect(()=>{const p5Script=document.createElement(\"script\");p5Script.src=\"https://cdn.jsdelivr.net/npm/p5@1.11.0/lib/p5.min.js\";p5Script.async=true;document.head.appendChild(p5Script);p5Script.onload=()=>{const sketch=p=>{let currentRadius=50;let centerX,centerY;let angle=0;const penSize=10;const angleSmoothness=.05;const changeInterval=5e3// Clear the canvas every 5 seconds\n;let lastClearTime=0;let prevCenterX,prevCenterY;let speed=5// Base speed of movement\n;let lastSpeedChange=0;const speedChangeInterval=1e3// Change speed every 1 second\n;// Array to hold shapes for each frame until cleared\nconst shapes=[];p.setup=()=>{p.createCanvas(p.windowWidth,p.windowHeight);p.frameRate(30)// Lower frame rate for performance optimization\n;clearCanvas();// Start from a random position\nprevCenterX=p.random(currentRadius,p.width-currentRadius);prevCenterY=p.random(currentRadius,p.height-currentRadius);};p.draw=()=>{// Clear the canvas if the interval has passed\nif(p.millis()-lastClearTime>changeInterval){clearCanvas();}// Introduce speed variation at intervals\nif(p.millis()-lastSpeedChange>speedChangeInterval){speed=p.random(1,10);lastSpeedChange=p.millis();}// Smooth angle change\nangle+=angleSmoothness*p.random(-1,4);// Calculate new center position\nconst dx=speed*p.cos(angle);const dy=speed*p.sin(angle)*1.5// Emphasize vertical movement\n;const newCenterX=prevCenterX+dx;const newCenterY=prevCenterY+dy;// Check boundaries and reflect angle if necessary\nif(newCenterX<currentRadius||newCenterX>p.width-currentRadius){angle=p.PI-angle;}if(newCenterY<currentRadius||newCenterY>p.height-currentRadius){angle=-angle;}// Update center position with constraints\ncenterX=p.constrain(newCenterX,currentRadius,p.width-currentRadius);centerY=p.constrain(newCenterY,currentRadius,p.height-currentRadius);// Calculate positions of held and rotating ends based on current angle\nconst heldX=centerX+currentRadius*p.cos(angle);const heldY=centerY+currentRadius*p.sin(angle);const rotatingX=centerX-currentRadius*p.cos(angle);const rotatingY=centerY-currentRadius*p.sin(angle);// Store line and endpoint circle positions\nshapes.push({x1:heldX,y1:heldY,x2:rotatingX,y2:rotatingY});// Draw all shapes stored since last clear\nfor(const shape of shapes){// Draw line and circles at endpoints\np.stroke(0);p.strokeWeight(2);p.line(shape.x1,shape.y1,shape.x2,shape.y2);p.fill(0);p.noStroke();p.ellipse(shape.x1,shape.y1,penSize,penSize)// Draw held end circle\n;p.ellipse(shape.x2,shape.y2,penSize,penSize)// Draw rotating end circle\n;}// Update previous position for the next frame\nprevCenterX=centerX;prevCenterY=centerY;};const clearCanvas=()=>{p.background(255);lastClearTime=p.millis();shapes.length=0// Clear shapes array to start fresh\n;};p.windowResized=()=>{p.resizeCanvas(p.windowWidth,p.windowHeight);};};new p5(sketch,sketchRef.current);};return()=>{if(sketchRef.current){sketchRef.current.remove();}document.head.removeChild(p5Script);};},[]);return /*#__PURE__*/_jsx(\"div\",{style:containerStyle,ref:sketchRef});}const containerStyle={height:\"100%\",display:\"flex\",justifyContent:\"center\",alignItems:\"center\",overflow:\"hidden\"};\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"P5SplashMobile\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./P5SplashMobile.map"],
  "mappings": "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",
  "names": ["P5SplashMobile", "props", "sketchRef", "pe", "ue", "p5Script", "sketch", "p", "currentRadius", "centerX", "centerY", "angle", "penSize", "angleSmoothness", "changeInterval", "lastClearTime", "prevCenterX", "prevCenterY", "speed", "lastSpeedChange", "speedChangeInterval", "shapes", "clearCanvas", "dx", "dy", "newCenterX", "newCenterY", "heldX", "heldY", "rotatingX", "rotatingY", "shape", "containerStyle"]
}