๐ค AI
Hereโs a complete version of your interactive fortune cookie sketch, with `sketch.js` kept well under 70 lines and using the OpenAI API from the browser.
### Important: OpenAI API key
In `sketch.js`, set:
```js
const API_KEY = "YOUR_OPENAI_API_KEY_HERE";
```
For security, only do this in local experiments. For production, you should proxy the request through your own backend instead of exposing the key in client-side code.
---
### sketch.js
```js
let state="closed",t=0,fortune="Click the cookie",nums=[],cookieCol,shadowCol,bgCol;
const API_KEY=""; // add your OpenAI API key here
function setup(){createCanvas(windowWidth,windowHeight);textAlign(CENTER,CENTER);textWrap(WORD);
cookieCol=color(240,194,125);shadowCol=color(205,150,80);bgCol=color(40,0,0);}
function draw(){background(bgCol);translate(width/2,height/2);drawSlip();drawCookie();
fill(255,220);noStroke();textSize(14);if(state==="closed")text("Tap to open your fortune",0,height*0.3-40);}
function drawCookie(){push();noStroke();
let openT=(state==="opening"||state==="open")?t:0;
if(state==="opening"){t=min(1,t+0.03);if(t>=1)state="open";}
let baseR=PI*0.12,spread=openT*PI*0.4,offset=40+openT*70;
for(let s of[-1,1]){push();let ang=s*(baseR+spread);translate(s*offset*openT,-10*openT);rotate(ang);
fill(shadowCol);ellipse(0,8,140,80);fill(cookieCol);ellipse(0,0,140,80);pop();}
fill(190,135,70);ellipse(0,10,60-40*openT,24-16*openT);pop();}
function drawSlip(){let slipT=constrain((t-0.25)/0.6,0,1);if(slipT<=0)return;
push();rectMode(CENTER);noStroke();let w=260*slipT,h=40;
fill(250);rect(0,40,w,h,6);fill(0);textSize(14);
if(w>40)text(fortune,0,36,w-12,h-8);
if(nums.length&&w>80){textSize(11);text("Lucky: "+nums.join(" "),0,56);}pop();}
function mousePressed(){if(state==="opening")return;state="opening";t=0;getFortune();}
function getFortune(){if(!API_KEY){fortune="Set API_KEY in sketch.js";nums=[];return;}
fortune="...";nums=[];for(let i=0;i<5;i++)nums.push(int(random(1,100)));
fetch("https://api.openai.com/v1/chat/completions",{
method:"POST",
headers:{"Content-Type":"application/json","Authorization":"Bearer "+API_KEY},
body:JSON.stringify({model:"gpt-4o-mini",
messages:[
{role:"system",content:"You are a fortune cookie generating short, cryptic fortunes."},
{role:"user",content:"One mysterious fortune, max 15 words, no preface, no quotes."}],
max_tokens:40,temperature:0.9})})
.then(r=>r.json())
.then(d=>{fortune=d.choices&&d.choices[0]?.message?.content.trim()||fortune;})
.catch(e=>fortune="The spirits are silent. Try again.");}
function windowResized(){resizeCanvas(windowWidth,windowHeight);}
```
- The cookie is built from overlapping ellipses with a darker crease to give a 3D feel.
- `t` animates from 0โ1 as the cookie โcracksโ and halves rotate/slide apart.
- The paper slip โunfoldsโ by growing its width based on `t`.
- Clicking when open instantly resets and starts a new cracking animation with a fresh fortune.
Key p5 references:
- [`createCanvas`](https://p5js.org/reference/#/p5/createCanvas)
- [`ellipse`](https://p5js.org/reference/#/p5/ellipse)
- [`text`](https://p5js.org/reference/#/p5/text)
- [`textWrap`](https://p5js.org/reference/#/p5/textWrap)
---
### index.html
Updated to load p5.js 1.11.3 before your sketch:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fortune Cookie</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/p5@1.11.3/lib/p5.min.js"></script>
<script src="sketch.js"></script>
</body>
</html>
```
---
### style.css
You can keep your existing CSS; it already works well for a fullscreen canvas:
```css
body {
margin: 0;
padding: 0;
overflow: hidden;
background: #200000;
}
canvas {
display: block;
}
```
Apply these files, add your API key in `sketch.js`, and youโll have a clickable, animated, AI-powered fortune cookie.
