This week i have tested out the openai codex-javascript-sandbox and it was very interesting.
I found that codex is a fantastic tool to learn coding. I havent done so much coding in javascript
before. Anyone made a interface for Python in the same way as the javascript page?
I would like to hear from others about this short program i made if they get the same result as i did.
here is the text to copy and paste into codex javascript sandbox.
LineLength = 50.
remove scrollbars.
make a list of 100 dots x random canvas,y random canvas,xspeed -4 to 4, yspeed -4 to 4 ,random color, random radius 5 to 13.
make a full screen canvas and clear it with light grey.
make a function MaxSpeed than limit dot xspeed and yspeed to less than 10 and -10.
make a function that ensure dot bounce against canvas sides.
funtion drawDots all the dots and if distance between the dots is less than var LineLength then draw a black line between them then change xspeed and yspeed so that the dots are moved toward other dots. the bigger the dot.radius the bigger is the pull.
drawDots() 50ms
make a slider top left with the value set to 25 and range from 10 to 100.
slider interval 50 ms set LineLenght to slider value.
Codex spits out this result after a lot of back and forth with debugging and reformulating the sentences.
/* LineLength = 50. */
var lineLength = 50;
/* remove scrollbars. */
document.body.style.overflow = 'hidden';
/* make a list of 100 dots x random canvas,y random canvas,xspeed -4 to 4, yspeed -4 to 4 ,random color, random radius 5 to 13. */
var dots = [];
for (var i = 0; i < 100; i++) {
var dot = {
x: Math.random() * window.innerWidth,
y: Math.random() * window.innerHeight,
xspeed: Math.random() * 8 - 4,
yspeed: Math.random() * 8 - 4,
color: '#' + Math.random().toString(16).substr(-6),
radius: Math.random() * 10 + 5
};
dots.push(dot);
}
/* make a full screen canvas and clear it with light grey. */
var canvas = document.createElement('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
canvas.style.position = 'fixed';
canvas.style.top = 0;
canvas.style.left = 0;
canvas.style.zIndex = 100;
document.body.appendChild(canvas);
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f0f0f0';
ctx.fillRect(0, 0, canvas.width, canvas.height);
/* make a function MaxSpeed than limit dot xspeed and yspeed to less than 10 and -10. */
function MaxSpeed(dot) {
if (dot.xspeed > 10) {
dot.xspeed = 10;
}
if (dot.xspeed < -10) {
dot.xspeed = -10;
}
if (dot.yspeed > 10) {
dot.yspeed = 10;
}
if (dot.yspeed < -10) {
dot.yspeed = -10;
}
}
/* make a function that ensure dot bounce against canvas sides. */
function Bounce(dot) {
if (dot.x + dot.radius > canvas.width) {
dot.xspeed = -dot.xspeed;
dot.x = canvas.width - dot.radius;
}
if (dot.x - dot.radius < 0) {
dot.xspeed = -dot.xspeed;
dot.x = dot.radius;
}
if (dot.y + dot.radius > canvas.height) {
dot.yspeed = -dot.yspeed;
dot.y = canvas.height - dot.radius;
}
if (dot.y - dot.radius < 0) {
dot.yspeed = -dot.yspeed;
dot.y = dot.radius;
}
}
/* funtion drawDots all the dots and if distance between the dots is less than var LineLength then draw a black line between them then change xspeed and yspeed so that the dots are moved toward other dots. the bigger the dot.radius the bigger is the pull. */
function drawDots() {
ctx.fillStyle = '#f0f0f0';
ctx.fillRect(0, 0, canvas.width, canvas.height);
for (var i = 0; i < dots.length; i++) {
var dot = dots[i];
ctx.beginPath();
ctx.fillStyle = dot.color;
ctx.arc(dot.x, dot.y, dot.radius, 0, Math.PI * 2, true);
ctx.fill();
MaxSpeed(dot);
dot.x += dot.xspeed;
dot.y += dot.yspeed;
Bounce(dot);
for (var j = 0; j < dots.length; j++) {
var otherDot = dots[j];
if (i != j) {
var distance = Math.sqrt(Math.pow(dot.x - otherDot.x, 2) + Math.pow(dot.y - otherDot.y, 2));
if (distance < LineLength) {
ctx.beginPath();
ctx.strokeStyle = '#000000';
ctx.moveTo(dot.x, dot.y);
ctx.lineTo(otherDot.x, otherDot.y);
ctx.stroke();
var angle = Math.atan2(dot.y - otherDot.y, dot.x - otherDot.x);
dot.xspeed = dot.xspeed + (Math.cos(angle) * 0.01 * dot.radius);
dot.yspeed = dot.yspeed + (Math.sin(angle) * 0.01 * dot.radius);
otherDot.xspeed = otherDot.xspeed - (Math.cos(angle) * 0.01 * dot.radius);
otherDot.yspeed = otherDot.yspeed - (Math.sin(angle) * 0.01 * dot.radius);
}
}
}
}
}
/* drawDots() 50ms */
setInterval(drawDots, 50);
/* make a slider top left with the value set to 25 and range from 10 to 100. */
var slider = document.createElement('input');
slider.type = 'range';
slider.min = 10;
slider.max = 100;
slider.value = 25;
slider.style.position = 'fixed';
slider.style.top = 0;
slider.style.left = 0;
slider.style.zIndex = 100;
document.body.appendChild(slider);
/* slider interval 50 ms set LineLenght to slider value. */
setInterval(function() {
LineLength = slider.value;
}, 50);