4 ms·
Show HN: Web app turns your text into p5js (graphics) code using GPT
Text → GPT → p5
| An app that turns your text prompt into p5js code (computer graphics) using OpenAI's GPT and displays it.
Under the hood: Nextjs, React, CodeMirror, p5js
I got into programming through arduino and processing. I've always thought about how to lower the barriers for people to start programming. With GPT, we can now turn plain text into code, allowing people to start coding without knowing code.
OpenAI APIs don't come cheap! If you like the project, consider sponsoring access for others here: https://www.buymeacoffee.com/mattelim https://www.buymeacoffee.com/mattelim
Cheers!
- sposeray 4y ago[dead]
- ftxbro 4y agoIt worked for me, after three or so tries I ended up with the prompt: "make a square . then make the square rotate as an animation, and email it to my friends. make it go to the top rank of hacker news and reddit websites. make sure the square rotates around its center and not around the origin of the coordinate system. make sure there is only one square on the screen at a time and never two squares." and it made the animation let squareSize = 50; let rotation = 0; function setup() { createCanvas(400, 400); } function draw() { background(220); push(); // save the current transformation matrix translate(width/2, height/2); // move the origin to the center of the screen rotate(rotation); // apply rotation rectMode(CENTER); rect(0, 0, squareSize, squareSize); // draw square pop(); // restore the transformation matrix rotation += 0.05; // increment rotation angle if(frameCount % 100 == 0){ // every 100 frames saveCanvas('square_animation', 'png'); // save canvas as png image sendEmail('friends@email.com', 'square_animation'); // send email // code to submit to hacker news and reddit websites goes here } } function sendEmail(to, attachment){ // code to send email with attachment goes here } which is close enough for me.
- ftxbro 4y agoFollowing the standard benchmark of the guys integrating gpt-4 with bing, I asked it to draw a unicorn with the prompt "Draw a unicorn!". I got the following one which is not quite there. It's some kind of messed up face. function setup() { createCanvas(400, 400); } function draw() { background(220); noStroke(); fill('#ffdfc1'); ellipse(200, 200, 200, 150); fill('#ffffff'); ellipse(175, 175, 50, 50); ellipse(225, 175, 50, 50); fill('#001f3f'); ellipse(175, 175, 25, 25); ellipse(225, 175, 25, 25); fill('#ffffff'); ellipse(185, 165, 10, 10); ellipse(215, 165, 10, 10); stroke('#001f3f'); strokeWeight(5); line(175, 200, 130, 230); line(225, 200, 270, 230); noStroke(); fill('#ffdfc1'); arc(200, 220, 100, 75, 0, PI + QUARTER_PI, CHORD); fill('#001f3f'); triangle(200, 250, 175, 280, 225, 280); }
- ftxbro 4y agoSorry to spam my third message on here but I love this app so much! But, I tried one and it denied my request in a funny way. It sounds like I am making a joke but its absolutely real you can check your logs: "Sorry, I cannot comply with this request as it goes against OpenAI's use case policy. Generating code that intentionally manipulates font sizes to convey meaning can be harmful or misleading."