🚀 Hello, Kimi K2! Open-Source Agentic Model! 🔹 1T total / 32B active MoE model 🔹 SOTA on SWE Bench Verified, Tau2 & AceBench among open models 🔹Strong in coding and agentic tasks 🐤 Multimodal & thought-mode not supported for now
write a p5.js program that shows a ball bouncing inside a spinning hexagon. The ball should be affected by gravity and friction, and it must bounce off the rotating walls realistically, add sliders to adjust parameters, I can adjust slider anytime and this should reflect the change in real time .
create all code in file and make it freaking awesome to blow people mind
Slider should have Rotation Speed, Ring Size , Ball Size
（和訳）：
p5.jsで、回転する六角形の中でボールが跳ね返るプログラムを書いてください。ボールは重力と摩擦の影響を受け、回転する壁をリアルに跳ね返さなければならない。パラメータを調整するスライダーを追加し、私はいつでもスライダーを調整することができ、これはリアルタイムで変更を反映する必要があります。
ファイル内のすべてのコードを作成し、人々の心を吹き飛ばすために、それはめちゃくちゃ素晴らしいものにする
スライダーは、回転速度、リングサイズ、ボールサイズを持つ必要があります。
結果はこちら
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Spinning Hexagon Bounce</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&display=swap');
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: linear-gradient(135deg, #0c0c0c 0%, #1a1a2e 50%, #16213e 100%);
font-family: 'Orbitron', monospace;
overflow: hidden;
}
#canvas-container {
position: relative;
border: 2px solid #00ffff;
border-radius: 20px;
box-shadow:
0 0 50px rgba(0, 255, 255, 0.5),
inset 0 0 50px rgba(0, 255, 255, 0.1);
background: radial-gradient(circle at center, rgba(0, 255, 255, 0.1) 0%, transparent 70%);
}
.controls {
position: absolute;
top: 20px;
left: 20px;
background: rgba(0, 0, 0, 0.8);
padding: 20px;
border-radius: 15px;
border: 1px solid #00ffff;
box-shadow: 0 0 20px rgba(0, 255, 255, 0.3);
backdrop-filter: blur(10px);
}
.slider-container {
margin-bottom: 15px;
display: flex;
align-items: center;
gap: 10px;
}
label {
display: inline-block;
width: 120px;
color: #00ffff;
font-weight: 700;
font-size: 12px;
text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
}
input[type="range"] {
width: 150px;
height: 6px;
background: linear-gradient(to right, #00ffff 0%, #ff00ff 100%);
border-radius: 5px;
outline: none;
-webkit-appearance: none;
cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 16px;
height: 16px;
background: #fff;
border-radius: 50%;
box-shadow: 0 0 10px rgba(0, 255, 255, 0.8);
cursor: pointer;
}
input[type="range"]::-moz-range-thumb {
width: 16px;
height: 16px;
background: #fff;
border-radius: 50%;
box-shadow: 0 0 10px rgba(0, 255, 255, 0.8);
cursor: pointer;
border: none;
}
.value-display {
color: #fff;
font-weight: 400;
font-size: 12px;
min-width: 40px;
text-align: right;
text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
}
h3 {
color: #00ffff;
margin-top: 0;
margin-bottom: 15px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 2px;
text-shadow: 0 0 15px rgba(0, 255, 255, 0.8);
}
.particle {
position: absolute;
width: 2px;
height: 2px;
background: #00ffff;
border-radius: 50%;
pointer-events: none;
animation: float 3s infinite ease-in-out;
}
@keyframes float {
0%, 100% { transform: translateY(0px) rotate(0deg); opacity: 0.3; }
50% { transform: translateY(-20px) rotate(180deg); opacity: 1; }
}
</style>
</head>
<body>
<div id="canvas-container">
<div class="controls">
<h3>Controls</h3>
<div class="slider-container">
<label for="rotationSpeed">Rotation Speed</label>
<input type="range" id="rotationSpeed" min="0" max="0.1" step="0.001" value="0.01">
<span class="value-display" id="rotationSpeedValue">0.01</span>
</div>
<div class="slider-container">
<label for="ringSize">Ring Size</label>
<input type="range" id="ringSize" min="100" max="350" step="5" value="200">
<span class="value-display" id="ringSizeValue">200</span>
</div>
<div class="slider-container">
<label for="ballSize">Ball Size</label>
<input type="range" id="ballSize" min="5" max="30" step="1" value="15">
<span class="value-display" id="ballSizeValue">15</span>
</div>
</div>
</div>
<script>
let hexagonRadius = 200;
let ballRadius = 15;
let rotationSpeed = 0.01;
let angle = 0;
let ball = {
pos: { x: 0, y: 0 },
vel: { x: 0, y: 0 },
acc: { x: 0, y: 0.2 }
};
let particles = [];
let trail = [];
function setup() {
const canvas = createCanvas(800, 600);
canvas.parent('canvas-container');
// Initialize ball position
ball.pos.x = 0;
ball.pos.y = -hexagonRadius / 2;
// Add event listeners for sliders
document.getElementById('rotationSpeed').addEventListener('input', function() {
rotationSpeed = parseFloat(this.value);
document.getElementById('rotationSpeedValue').textContent = this.value;
});
document.getElementById('ringSize').addEventListener('input', function() {
hexagonRadius = parseInt(this.value);
document.getElementById('ringSizeValue').textContent = this.value;
});
document.getElementById('ballSize').addEventListener('input', function() {
ballRadius = parseInt(this.value);
document.getElementById('ballSizeValue').textContent = this.value;
});
// Create background particles
for (let i = 0; i < 20; i++) {
particles.push({
x: random(width),
y: random(height),
speed: random(0.5, 2),
size: random(1, 3),
opacity: random(0.3, 0.8)
});
}
}
function draw() {
// Dynamic background
background(10, 10, 20, 25);
// Draw background particles
drawBackgroundParticles();
// Update rotation
angle += rotationSpeed;
// Update physics
updateBallPhysics();
// Draw hexagon with glow effect
drawHexagon();
// Draw ball with trail and glow
drawBall();
// Draw force field effect
drawForceField();
}
function drawBackgroundParticles() {
for (let p of particles) {
p.y -= p.speed;
if (p.y < -10) {
p.y = height + 10;
p.x = random(width);
}
fill(0, 255, 255, p.opacity * 255);
noStroke();
circle(p.x - width/2 + 400, p.y - height/2 + 300, p.size);
}
}
function drawForceField() {
push();
translate(width / 2, height / 2);
rotate(angle);
// Outer force field rings
for (let i = 3; i > 0; i--) {
stroke(0, 255, 255, 50 - i * 15);
strokeWeight(1);
noFill();
let pulse = sin(frameCount * 0.05 + i) * 10;
circle(0, 0, (hexagonRadius + ballRadius) * 2 + i * 40 + pulse);
}
pop();
}
function updateBallPhysics() {
// Apply gravity
ball.vel.x += ball.acc.x;
ball.vel.y += ball.acc.y;
// Apply friction
ball.vel.x *= 0.999;
ball.vel.y *= 0.999;
// Update position
ball.pos.x += ball.vel.x;
ball.pos.y += ball.vel.y;
// Check collision with hexagon
checkHexagonCollision();
// Add to trail
trail.push({x: ball.pos.x, y: ball.pos.y});
if (trail.length > 20) {
trail.shift();
}
}
function checkHexagonCollision() {
// Convert ball position to polar coordinates relative to the rotating hexagon
const ballX = ball.pos.x;
const ballY = ball.pos.y;
// Calculate the angle of the ball relative to the center
const ballAngle = atan2(ballY, ballX);
// Calculate the distance from the center to the ball
const ballDistance = dist(0, 0, ballX, ballY);
// Calculate the angle of the hexagon side
const sides = 6;
const segmentAngle = TWO_PI / sides;
// Find which segment of the hexagon the ball is in
let segmentIndex = floor((ballAngle - angle + TWO_PI + segmentAngle/2) / segmentAngle) % sides;
// Calculate the angle of the closest hexagon side
const sideAngle = segmentIndex * segmentAngle + angle;
// Calculate the distance from the center to the hexagon edge at this angle
// For a regular polygon, this is the apothem divided by cos of the angle difference
const angleDiff = abs(ballAngle - sideAngle);
const adjustedAngle = min(angleDiff, TWO_PI - angleDiff);
// Calculate the distance from center to edge
const edgeDistance = hexagonRadius * cos(PI / sides) / cos(adjustedAngle);
// Check for collision
if (ballDistance + ballRadius > edgeDistance) {
// Collision occurred
// Calculate normal vector (from center to edge point)
const normalX = cos(sideAngle);
const normalY = sin(sideAngle);
// Calculate dot product of velocity and normal
const dotProduct = ball.vel.x * normalX + ball.vel.y * normalY;
// Reflect velocity with some energy loss
const restitution = 0.85;
ball.vel.x -= 2 * dotProduct * normalX * restitution;
ball.vel.y -= 2 * dotProduct * normalY * restitution;
// Move ball outside of hexagon to prevent sticking
const correction = (ballDistance + ballRadius - edgeDistance) * 1.05;
ball.pos.x -= correction * cos(ballAngle);
ball.pos.y -= correction * sin(ballAngle);
// Add collision particles
createCollisionParticles(ball.pos.x, ball.pos.y, normalX, normalY);
}
}
let collisionParticles = [];
function createCollisionParticles(x, y, nx, ny) {
for (let i = 0; i < 8; i++) {
collisionParticles.push({
x: x,
y: y,
vx: (nx + random(-0.5, 0.5)) * random(3, 8),
vy: (ny + random(-0.5, 0.5)) * random(3, 8),
life: 30,
maxLife: 30
});
}
}
function drawHexagon() {
push();
translate(width / 2, height / 2);
rotate(angle);
// Draw hexagon with gradient effect
strokeWeight(3);
for (let i = 0; i < 3; i++) {
stroke(0, 255, 255, 150 - i * 50);
noFill();
beginShape();
for (let i = 0; i < 6; i++) {
const angle = TWO_PI / 6 * i;
const x = hexagonRadius * cos(angle);
const y = hexagonRadius * sin(angle);
vertex(x, y);
}
endShape(CLOSE);
}
// Neon glow effect
stroke(0, 255, 255);
strokeWeight(2);
beginShape();
for (let i = 0; i < 6; i++) {
const angle = TWO_PI / 6 * i;
const x = hexagonRadius * cos(angle);
const y = hexagonRadius * sin(angle);
vertex(x, y);
}
endShape(CLOSE);
// Add corner highlights
noStroke();
fill(255, 255, 255, 200);
for (let i = 0; i < 6; i++) {
const angle = TWO_PI / 6 * i;
const x = hexagonRadius * cos(angle);
const y = hexagonRadius * sin(angle);
circle(x, y, 6);
}
pop();
}
function drawBall() {
push();
translate(width / 2, height / 2);
// Draw trail with gradient
for (let i = 0; i < trail.length; i++) {
const alpha = map(i, 0, trail.length, 0, 200);
const size = map(i, 0, trail.length, ballRadius * 0.3, ballRadius * 1.2);
fill(255, 100, 100, alpha);
noStroke();
circle(trail[i].x, trail[i].y, size);
}
// Draw ball with glow
for (let i = 3; i > 0; i--) {
fill(255, 100, 100, 100 - i * 30);
noStroke();
circle(ball.pos.x, ball.pos.y, ballRadius * 2 + i * 4);
}
// Main ball
fill(255, 50, 50);
stroke(255, 200, 200);
strokeWeight(1);
circle(ball.pos.x, ball.pos.y, ballRadius * 2);
// Inner highlight
fill(255, 200, 200);
noStroke();
circle(ball.pos.x - ballRadius * 0.3, ball.pos.y - ballRadius * 0.3, ballRadius * 0.8);
pop();
// Draw collision particles
drawCollisionParticles();
}
function drawCollisionParticles() {
for (let i = collisionParticles.length - 1; i >= 0; i--) {
let p = collisionParticles[i];
p.x += p.vx;
p.y += p.vy;
p.life--;
let alpha = map(p.life, 0, p.maxLife, 0, 255);
let size = map(p.life, 0, p.maxLife, 0, 5);
push();
translate(width/2, height/2);
fill(0, 255, 255, alpha);
noStroke();
circle(p.x, p.y, size);
pop();
if (p.life <= 0) {
collisionParticles.splice(i, 1);
}
}
}
// Add mouse interaction
function mousePressed() {
if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {
// Add velocity based on mouse position
ball.vel.x += (mouseX - width/2 - ball.pos.x) * 0.01;
ball.vel.y += (mouseY - height/2 - ball.pos.y) * 0.01;
}
}
</script>
</body>
</html>
write a program for an invader game in p5.js. Add a slider to adjust parameters, I can adjust the slider at any time, this should reflect changes in real time.
Create all the code in the file to blow people's minds and make it insanely awesome
The slider should have enemy movement speed, enemy size.
（和訳）：
p5.jsで、インベーダーゲームのプログラムを書いてください。パラメータを調整するスライダーを追加し、私はいつでもスライダーを調整することができ、これはリアルタイムで変更を反映する必要があります。
ファイル内のすべてのコードを作成して人々の心を吹き飛ばすために、それはめちゃくちゃ素晴らしいものにする
スライダーは、敵の移動速度、敵のサイズを持つ必要があります。
結果はこちら
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>🔥 NEON SPACE-INVADER ARMAGEDDON 🔥</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&display=swap');
html,body{margin:0;height:100%;background:radial-gradient(ellipse at center,#000 0%,#111 60%,#000 100%);font-family:Orbitron,monospace;overflow:hidden}
#ui{
position:absolute;top:20px;left:20px;
background:rgba(0,0,0,.7);padding:20px;border-radius:15px;
border:1px solid #0ff;box-shadow:0 0 20px #0ff, inset 0 0 20px #0ff2;
color:#0ff;backdrop-filter:blur(10px)
}
.slider-box{display:flex;align-items:center;margin-bottom:12px}
label{width:140px;font-size:12px;font-weight:700}
input[type=range]{width:140px}
.value{width:40px;text-align:right;font-size:12px}
</style>
</head>
<body>
<div id="ui">
<h3 style="margin:0 0 10px">⚙️ CONTROLS</h3>
<div class="slider-box">
<label>Enemy Speed</label>
<input id="speed" type="range" min="0.2" max="4" step="0.1" value="1">
<span class="value" id="speedVal">1</span>
</div>
<div class="slider-box">
<label>Enemy Size</label>
<input id="size" type="range" min="10" max="60" step="1" value="30">
<span class="value" id="sizeVal">30</span>
</div>
</div>
<script>
let player, bullets=[], enemies=[], particles=[];
let enemySpeed=1, enemySize=30;
let score=0, level=1;
function setup(){
createCanvas(windowWidth,windowHeight);
player={x:width/2,y:height-60,w:50,h:20};
spawnWave();
// sliders
document.getElementById('speed').oninput=e=>{enemySpeed=parseFloat(e.target.value);document.getElementById('speedVal').textContent=e.target.value};
document.getElementById('size').oninput=e=>{enemySize=parseInt(e.target.value);document.getElementById('sizeVal').textContent=e.target.value};
}
function draw(){
background(0,0,0,25); // slight trail
drawStars();
// player
push();
translate(player.x,player.y);
fill(0,255,255);stroke(255);strokeWeight(2);
rect(-player.w/2,-player.h/2,player.w,player.h,5);
triangle(0,-player.h/2, -10,-player.h/2-15, 10,-player.h/2-15);
pop();
// bullets
for(let i=bullets.length-1;i>=0;i--){
let b=bullets[i];
b.y-=10;
stroke(0,255,255);strokeWeight(3);point(b.x,b.y);
if(b.y<0){bullets.splice(i,1);continue}
// hit test
for(let j=enemies.length-1;j>=0;j--){
let e=enemies[j];
if(dist(b.x,b.y,e.x,e.y)<enemySize/2){
score+=10;
explode(e.x,e.y);
enemies.splice(j,1);
bullets.splice(i,1);
break;
}
}
}
// enemies
let shift=false;
for(let e of enemies){
e.x+=e.dx*enemySpeed;
if(e.x<=enemySize/2||e.x>=width-enemySize/2){shift=true}
}
if(shift){
for(let e of enemies){e.y+=40;e.dx*=-1}
}
for(let e of enemies){
push();
translate(e.x,e.y);
rotate(sin(frameCount*0.1)*0.2);
noFill();stroke(255,0,128);strokeWeight(2);
for(let i=0;i<3;i++){
rect(-enemySize/2+i*2,-enemySize/2+i*2,enemySize-i*4,enemySize-i*4,3);
}
fill(255,0,128,180);noStroke();
circle(0,0,enemySize*0.4);
pop();
}
// particles
for(let i=particles.length-1;i>=0;i--){
let p=particles[i];
p.x+=p.vx;p.y+=p.vy;p.life--;
stroke(p.r,p.g,p.b,p.life*255/30);
strokeWeight(p.sz);point(p.x,p.y);
if(p.life<=0)particles.splice(i,1);
}
// level
if(enemies.length===0){level++;spawnWave()}
// hud
fill(0,255,255);textSize(20);textAlign(LEFT);
text(`SCORE ${score}`,20,40);
text(`LEVEL ${level}`,20,70);
}
function drawStars(){
stroke(255,255,255,100);
for(let i=0;i<200;i++){
let x=noise(i,frameCount*0.0005)*width;
let y=noise(i+1000,frameCount*0.0005)*height;
strokeWeight(random(1,2));
point(x,y);
}
}
function spawnWave(){
enemies=[];
for(let r=0;r<4+level;r++){
for(let c=0;c<12;c++){
enemies.push({
x:c*(enemySize+20)+enemySize,
y:r*(enemySize+20)+enemySize,
dx:1
});
}
}
}
function keyPressed(){
if(key===' '||keyCode===UP_ARROW){
bullets.push({x:player.x,y:player.y-20});
}
}
function keyIsDown(k){
if(k===LEFT_ARROW)player.x=max(player.w/2,player.x-6);
if(k===RIGHT_ARROW)player.x=min(width-player.w/2,player.x+6);
}
function explode(x,y){
for(let i=0;i<40;i++){
let a=random(TWO_PI);
particles.push({
x,y,
vx:cos(a)*random(1,6),
vy:sin(a)*random(1,6),
life:30,
r:random([255,0,255]),
g:random([0,255,255]),
b:random([255,255,0]),
sz:random(2,5)
});
}
}
function windowResized(){resizeCanvas(windowWidth,windowHeight)}
</script>
</body>
</html>
