diff --git a/p5-demo.html b/p5-demo.html
new file mode 100644
index 0000000000..a58ac7267f
--- /dev/null
+++ b/p5-demo.html
@@ -0,0 +1,272 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>p5.js 功能演示</title>
+  <script src="lib/p5.js"></script>
+  <style>
+    body {
+      margin: 0;
+      padding: 0;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      background-color: #f0f0f0;
+      font-family: Arial, sans-serif;
+    }
+    h1 {
+      color: #333;
+      margin: 20px 0;
+    }
+    .container {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
+      max-width: 1200px;
+    }
+    .canvas-container {
+      margin: 10px;
+      background-color: white;
+      border-radius: 8px;
+      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+      overflow: hidden;
+    }
+    .description {
+      padding: 10px;
+      text-align: center;
+      font-size: 14px;
+      color: #333;
+    }
+  </style>
+</head>
+<body>
+  <h1>p5.js 功能演示</h1>
+  <div class="container">
+    <div class="canvas-container">
+      <div id="sketch1"></div>
+      <div class="description">基本形状</div>
+    </div>
+    <div class="canvas-container">
+      <div id="sketch2"></div>
+      <div class="description">五角星(新功能)</div>
+    </div>
+    <div class="canvas-container">
+      <div id="sketch3"></div>
+      <div class="description">颜色和渐变</div>
+    </div>
+    <div class="canvas-container">
+      <div id="sketch4"></div>
+      <div class="description">动画</div>
+    </div>
+    <div class="canvas-container">
+      <div id="sketch5"></div>
+      <div class="description">鼠标交互</div>
+    </div>
+    <div class="canvas-container">
+      <div id="sketch6"></div>
+      <div class="description">粒子系统</div>
+    </div>
+  </div>
+
+  <script>
+    // 基本形状
+    let s1 = function(p) {
+      p.setup = function() {
+        p.createCanvas(300, 200);
+      };
+      
+      p.draw = function() {
+        p.background(240);
+        p.stroke(0);
+        p.strokeWeight(2);
+        
+        // 矩形
+        p.fill(255, 0, 0, 150);
+        p.rect(50, 50, 80, 80);
+        
+        // 圆形
+        p.fill(0, 0, 255, 150);
+        p.ellipse(200, 100, 100, 100);
+        
+        // 三角形
+        p.fill(0, 255, 0, 150);
+        p.triangle(150, 50, 120, 150, 180, 150);
+        
+        // 线条
+        p.stroke(100);
+        p.line(25, 150, 275, 150);
+      };
+    };
+    new p5(s1, 'sketch1');
+    
+    // 五角星(新功能)
+    let s2 = function(p) {
+      let angle = 0;
+      
+      p.setup = function() {
+        p.createCanvas(300, 200);
+      };
+      
+      p.draw = function() {
+        p.background(240);
+        p.translate(p.width/2, p.height/2);
+        p.rotate(angle);
+        
+        // 绘制多个不同的星形
+        p.fill(255, 255, 0);
+        p.stroke(0);
+        p.strokeWeight(1);
+        p.star(0, 0, 80, 40, 5);
+        
+        p.fill(255, 100, 0, 150);
+        p.star(0, 0, 50, 20, 8);
+        
+        angle += 0.01;
+      };
+    };
+    new p5(s2, 'sketch2');
+    
+    // 颜色和渐变
+    let s3 = function(p) {
+      p.setup = function() {
+        p.createCanvas(300, 200);
+      };
+      
+      p.draw = function() {
+        p.background(240);
+        
+        // 创建渐变背景
+        for(let i = 0; i < p.width; i++) {
+          let r = p.map(i, 0, p.width, 255, 0);
+          let g = p.map(i, 0, p.width, 0, 255);
+          let b = p.map(i, 0, p.width, 0, 255);
+          p.stroke(r, g, b);
+          p.line(i, 0, i, p.height);
+        }
+        
+        // 半透明形状
+        p.noStroke();
+        for(let i = 0; i < 5; i++) {
+          let x = p.map(i, 0, 4, 50, 250);
+          p.fill(255, 255, 255, 100);
+          p.ellipse(x, 100, 70, 70);
+        }
+      };
+    };
+    new p5(s3, 'sketch3');
+    
+    // 动画
+    let s4 = function(p) {
+      let x = 0;
+      let speed = 3;
+      
+      p.setup = function() {
+        p.createCanvas(300, 200);
+      };
+      
+      p.draw = function() {
+        p.background(240);
+        
+        // 移动的圆
+        p.fill(255, 0, 0);
+        p.noStroke();
+        p.ellipse(x, 100, 50, 50);
+        
+        x += speed;
+        if (x > p.width + 25 || x < -25) {
+          speed *= -1;
+        }
+      };
+    };
+    new p5(s4, 'sketch4');
+    
+    // 鼠标交互
+    let s5 = function(p) {
+      p.setup = function() {
+        p.createCanvas(300, 200);
+        p.noStroke();
+      };
+      
+      p.draw = function() {
+        p.background(240);
+        
+        // 跟随鼠标的渐变圆
+        for(let i = 10; i > 0; i--) {
+          let diameter = i * 10;
+          let alpha = p.map(i, 0, 10, 255, 0);
+          p.fill(255, 0, 255, alpha);
+          p.ellipse(p.mouseX, p.mouseY, diameter, diameter);
+        }
+        
+        // 说明文字
+        p.fill(0);
+        p.text('移动鼠标在此区域内', 80, 20);
+      };
+    };
+    new p5(s5, 'sketch5');
+    
+    // 粒子系统
+    let s6 = function(p) {
+      let particles = [];
+      
+      p.setup = function() {
+        p.createCanvas(300, 200);
+      };
+      
+      p.draw = function() {
+        p.background(0, 10);
+        
+        // 添加新粒子
+        if(p.random(1) < 0.2) {
+          particles.push(new Particle(p));
+        }
+        
+        // 更新和显示粒子
+        for(let i = particles.length - 1; i >= 0; i--) {
+          particles[i].update();
+          particles[i].display();
+          
+          if(particles[i].isDead()) {
+            particles.splice(i, 1);
+          }
+        }
+      };
+      
+      // 粒子类
+      class Particle {
+        constructor(p) {
+          this.p = p;
+          this.x = p.width / 2;
+          this.y = p.height / 2;
+          this.vx = p.random(-1, 1);
+          this.vy = p.random(-2, -1);
+          this.alpha = 255;
+          this.size = p.random(5, 15);
+          this.color = p.color(
+            p.random(100, 255),
+            p.random(100, 255),
+            p.random(100, 255)
+          );
+        }
+        
+        update() {
+          this.x += this.vx;
+          this.y += this.vy;
+          this.alpha -= 2;
+        }
+        
+        display() {
+          this.p.noStroke();
+          this.color.setAlpha(this.alpha);
+          this.p.fill(this.color);
+          this.p.ellipse(this.x, this.y, this.size, this.size);
+        }
+        
+        isDead() {
+          return this.alpha <= 0;
+        }
+      }
+    };
+    new p5(s6, 'sketch6');
+  </script>
+</body>
+</html> 
\ No newline at end of file
diff --git a/src/core/shape/2d_primitives.js b/src/core/shape/2d_primitives.js
index b1f7d66ae5..4ab9050cc7 100644
--- a/src/core/shape/2d_primitives.js
+++ b/src/core/shape/2d_primitives.js
@@ -1449,4 +1449,70 @@ p5.prototype.triangle = function(...args) {
   return this;
 };
 
+/**
+ * Draws a five-pointed star.
+ *
+ * The star is drawn at the position specified by the `x` and `y` parameters.
+ * `radius1` sets the outer radius of the star, and `radius2` sets the inner radius.
+ * The parameter `npoints` can be used to specify the number of points in the star
+ * (default is 5 for a five-pointed star).
+ *
+ * @method star
+ * @param  {Number} x x-coordinate of the star.
+ * @param  {Number} y y-coordinate of the star.
+ * @param  {Number} radius1 outer radius of the star.
+ * @param  {Number} radius2 inner radius of the star.
+ * @param  {Number} [npoints] number of points on the star (default is 5).
+ * @chainable
+ *
+ * @example
+ * <div>
+ * <code>
+ * function setup() {
+ *   createCanvas(100, 100);
+ *
+ *   background(200);
+ *
+ *   // Draw a star at the center of the canvas.
+ *   star(50, 50, 40, 20, 5);
+ *
+ *   describe('A white five-pointed star on a gray background.');
+ * }
+ * </code>
+ * </div>
+ *
+ * @example
+ * <div>
+ * <code>
+ * function setup() {
+ *   createCanvas(100, 100);
+ * }
+ *
+ * function draw() {
+ *   background(200);
+ *
+ *   // The star follows the mouse.
+ *   star(mouseX, mouseY, 30, 15, 5);
+ *
+ *   describe('A white five-pointed star follows the mouse.');
+ * }
+ * </code>
+ * </div>
+ */
+p5.prototype.star = function(x, y, radius1, radius2, npoints = 5) {
+  this.beginShape();
+  const angle = constants.TWO_PI / npoints;
+  const halfAngle = angle / 2.0;
+  for (let a = 0; a < constants.TWO_PI; a += angle) {
+    let sx = x + Math.cos(a) * radius1;
+    let sy = y + Math.sin(a) * radius1;
+    this.vertex(sx, sy);
+    sx = x + Math.cos(a + halfAngle) * radius2;
+    sy = y + Math.sin(a + halfAngle) * radius2;
+    this.vertex(sx, sy);
+  }
+  this.endShape(constants.CLOSE);
+  return this;
+};
+
 export default p5;
diff --git a/test-star-interactive.html b/test-star-interactive.html
new file mode 100644
index 0000000000..c04ffa3da8
--- /dev/null
+++ b/test-star-interactive.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>p5.js 交互式五角星</title>
+  <script src="lib/p5.js"></script>
+  <style>
+    body {
+      margin: 0;
+      padding: 0;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 100vh;
+    }
+  </style>
+</head>
+<body>
+  <script>
+    let starColor;
+    
+    function setup() {
+      createCanvas(600, 400);
+      starColor = color(255, 255, 0);
+    }
+    
+    function draw() {
+      background(100, 150, 200);
+      
+      // 计算内外半径，根据鼠标与中心的距离变化
+      let outerRadius = map(mouseX, 0, width, 20, 100);
+      let innerRadius = outerRadius * 0.4;
+      
+      // 计算点数，根据鼠标Y位置变化
+      let points = floor(map(mouseY, 0, height, 3, 12));
+      
+      // 绘制跟随鼠标的星星
+      fill(starColor);
+      stroke(0);
+      strokeWeight(2);
+      star(mouseX, mouseY, outerRadius, innerRadius, points);
+      
+      // 显示参数信息
+      fill(255);
+      noStroke();
+      text('移动鼠标: X轴控制大小, Y轴控制点数', 20, 30);
+      text('当前点数: ' + points, 20, 50);
+      text('点击鼠标改变颜色', 20, 70);
+    }
+    
+    function mousePressed() {
+      // 点击更换随机颜色
+      starColor = color(random(255), random(255), random(255));
+    }
+  </script>
+</body>
+</html> 
\ No newline at end of file
diff --git a/test-star.html b/test-star.html
new file mode 100644
index 0000000000..173bc47b1f
--- /dev/null
+++ b/test-star.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>p5.js Star测试</title>
+  <script src="lib/p5.js"></script>
+  <style>
+    body {
+      margin: 0;
+      padding: 0;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 100vh;
+    }
+  </style>
+</head>
+<body>
+  <script>
+    function setup() {
+      createCanvas(600, 400);
+      background(220);
+      
+      // 绘制一个基本的五角星在左侧
+      fill(255, 255, 0);
+      stroke(0);
+      strokeWeight(2);
+      star(150, 200, 60, 30, 5);
+      
+      // 绘制一个八角星在中间
+      fill(0, 255, 255);
+      stroke(0);
+      strokeWeight(2);
+      star(300, 200, 60, 40, 8);
+      
+      // 绘制一个多角星在右侧
+      fill(255, 0, 255);
+      stroke(0);
+      strokeWeight(2);
+      star(450, 200, 60, 50, 12);
+    }
+    
+    function draw() {
+      // 静态绘制，不需要反复执行
+    }
+  </script>
+</body>
+</html> 
\ No newline at end of file
