Starfield 0.069 - OpenProcessing

index.html
xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Starfield</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            cursor: none;
        }
        canvas {
            display: block;
        }
    </style>
    <!-- Include p5.js library -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
</head>
<body>
    <script>
        let stars = [];
        let speed;
        let camX = 0;
        let camY = 0;
​
        function setup() {
          createCanvas(windowWidth, windowHeight, WEBGL);
          speed = 15; // Increase speed
          
          // Create a random set of stars with cyberpunk colors
          for (let i = 0; i < 800; i++) {
            stars[i] = new Star();
          }
        }
​
        function draw() {
          background(0);
          camX = map(mouseX, 0, width, -width/2, width/2);
          camY = map(mouseY, 0, height, -height/2, height/2);
          camera(camX, camY, (height / 2) / tan(PI/6), camX, camY, 0, 0, 1, 0);
​
          for (let i = 0; i < stars.length; i++) {
            stars[i].update();
            stars[i].show();
          }
        }
​
        class Star {
          constructor() {
            this.x = random(-width, width);
            this.y = random(-height, height);
            this.z = random(width);
            this.pz = this.z;
            this.color = color(random(100, 200), random(100, 200), random(100, 200), random(100, 255)); // Cyberpunk color
          }
​
          update() {
            this.z = this.z - speed;
​
            if (this.z < 1) {
              this.z = width;
              this.x = random(-width, width);
              this.y = random(-height, height);
              this.pz = this.z;
            }
          }
​
          show() {
            fill(this.color);
            noStroke();
​
            let sx = map(this.x / this.z, 0, 1, 0, width);
            let sy = map(this.y / this.z, 0, 1, 0, height);
​
            let r = map(this.z, 0, width, 8, 0); // Smaller stars for streak effect
            ellipse(sx, sy, r, r);
​
            let px = map(this.x / this.pz, 0, 1, 0, width);
            let py = map(this.y / this.pz, 0, 1, 0, height);
​
            this.pz = this.z;
​
            stroke(this.color);
            line(px, py, sx, sy);
          }
        }
​
        function windowResized() {
          resizeCanvas(windowWidth, windowHeight);
        }
    </script>
</body>
</html>
​