# Launching AI-AppBuilder | Create and Edit P5JS Apps With ChatGPT

Strive Editor lets you create, run and edit p5js projects with a ChatGPT-like interface. The chat keeps the context of the previous messages and the code generated so you can iteratively improve the project.

Here, I ask “Change the colour of the cubes with the position of my mouse.” “When I click change the cubes to spheres” Oh, and it works on mobile as well.

You can continue my chat by following this link: Strive Editor

We created AI-AppBuilder as an educational tool to teach students about prompt engineering and to inspire more students to learn coding by lowering the barrier of entry to creating cool animations/games.

With this tool, any 9-year-old with no coding experience can create pretty sophisticated apps just using natural language.

We recently ran a coding competition with 80+ students worldwide where they were tasked to create a game/animation using nothing but prompting on AI-AppBuilder. The things these students (younger than 16) made are breathtaking.

You can see all the submissions and students’ video presentations here: Airtable - AI Challenge Gallery

We’re looking to work with educators to improve this tool and reach & inspire as many students as possible. If you’re interested in giving feedback or helping, please reach out to us at hello@strivemath.com or fill out this feedback form: https://forms.gle/E4PJbLy35ibsVTvk6

9 Likes

Feel free to leave feedback and questions here in the comments as well, looking forward to hearing from the community I did a quick run by just clicking at an already existing prompt for making a double-pendulum, then improved it a little w/ the 4 remaining prompts:

``````const R1 = 100, R2 = 100, M1 = 10, M2 = 10, G = 1;
let a1 = 0, a2 = 0;
let a1_v=0, a2_v=0;
let cx, cy;

function setup() {
createCanvas(365, 365).mousePressed(reset);
reset();
}

function draw() {
background(51);
stroke(255);

const num1 = -G * (2 * M1 + M2) * sin(a1);
const num2 = -M2 * G * sin(a1 - 2 * a2);
const num3 = -2 * sin(a1 - a2) * M2;
const num4 = a2_v * a2_v * R2 + a1_v * a1_v * R1 * cos(a1 - a2);
const den = R1 * (2 * M1 + M2 - M2 * cos(2 * a1 - 2 * a2));
let a1_a = (num1 + num2 + num3 * num4) / den;

const num1_2 = 2 * sin(a1 - a2);
const num2_2 = a1_v * a1_v * R1 * (M1 + M2);
const num3_2 = G * (M1 + M2) * cos(a1);
const num4_2 = a2_v * a2_v * R2 * M2 * cos(a1 - a2);
const den2 = R2 * (2 * M1 + M2 - M2 * cos(2 * a1 - 2 * a2));
let a2_a = (num1_2 * (num2_2 + num3_2 + num4_2)) / den2;

translate(cx, cy);
const x1 = R1 * sin(a1);
const y1 = R1 * cos(a1);

const x2 = x1 + R2 * sin(a2);
const y2 = y1 + R2 * cos(a2);

line(0, 0, x1, y1);
fill(0);
ellipse(x1, y1, M1, M1);

line(x1, y1, x2, y2);
ellipse(x2, y2, M2, M2);

a1_v += a1_a;
a2_v += a2_a;

a1 += a1_v;
a2 += a2_v;

a1_v *= 0.99;
a2_v *= 0.99;
}

function reset() {
a1 = PI / 2;
a2 = PI / 2;
a1_v = 0;
a2_v = 0;
cx = width / 2;
cy = 200;
background(51);
}
``````
1 Like

Awesome stuff any ideas on things we could do to improve it?

I didn’t check for it but I guess libraries aren’t allowed for the sketches?

Another important issue is that I had to spend all my remaining prompts attempting to “refine” the code.

For example, I wanted the AI chat to find all variables which were eligible to be declared using `const`.

But the bot has failed to recognize variables a1_a & a2_a could use `const`.

Then I decided to use the “Edit Code” feature and fix that myself.

However, for the PoV of the AI, the current code was still the 1 provided by the bot, w/o my manual fix!

It’d be very nice to allow manual editing of the generated code, so we could save our prompts.

4 Likes

Great Tool! One can now let the computer debug its own code and iterate before giving an output with a silly mistake.

2 Likes