ilinx/text_base/tao_starfield/sketch.js

let stars;
let viewPoint;

function setup() {
    var canvas;
  canvas = createCanvas(windowWidth, windowHeight);
  canvas.position(0,0);
  canvas.style("z-index","-1");

  background(0,0,0);  
  frameRate(40);
  //pixelDensity(3.0);
  setViewPoint(0, 0);
  resetStarfield();
  rect(0, 0, windowWidth, windowHeight);
}

function resetStarfield() {
  stars = [];
}

function setViewPoint(x, y) {
  viewPoint = createVector(
    map(x, 0, width, 0, 15), 
    map(y, 0, height, 0, 15)
  );
}

function windowResized() {
	resizeCanvas(windowWidth+300, windowHeight+300);
  resetStarfield();
}

// function doubleClicked() {
//   var fs = fullscreen();
//   fullscreen(!fs);
// }

function mousePressed() {
  noCursor();
}

function mouseReleased() {
  cursor();
}

function draw() {

  // Space, the final frontier...
  clear();
  background(0,0,0);  

  // Make it so!
  if(mouseIsPressed) {
    setViewPoint(0, 0);
    for(let i = 0; i < 20; i++) {
      let star = new Star(createVectorTunnel(0,0));
      stars.push(star);
    }
  } else {
    setViewPoint(mouseX - width / 2, mouseY - height / 2);
  }

  // 1/4 impulse.
  for(let i = 0; i < 15; i++) {
    let star = new Star(createVectorField());
    stars.push(star);
  }
  
  // On the screen.
  for(let i = 0; i < stars.length; i++) {
    const star = stars[i];
    if(star.isDead()) {
      stars.splice(i, 1);
    } else {
      star.draw();
    }
  }

}

function createVectorTunnel() {
  const radius = 50;
  const angle = random(0.0, 180.0);

  let x = width/2 + radius * cos(angle);
  let y = height/2 + radius * sin(angle);

  return createVector(x,y);
}

function createVectorField() {
  return createVector(random(0, width), random(0, height));
}

function Star(position) {
  this.color = 0;
  this.size = 0.3;
  this.position = position;
  this.vector = createVector(
    this.position.x - width / 2,
    this.position.y - height / 2
  );
  this.direction = this.vector.copy().normalize();

  this.draw = function() {

    noStroke();
    //fill(25, 196, 98);
    fill(map(this.color,0,100,0,254));

    this.direction.mult(random(1.01, 1.05));
    this.position.add(this.direction);
    this.position.add(viewPoint);

    ellipse(this.position.x,this.position.y, this.size);

    this.size += 0.03;
    if(this.color <= 100) {
      this.color += 3;
    }
  }

  this.isDead = function() {
    return this.position.x < 0 || this.position.y < 0 || this.position.x > width || this.position.y > height;
  }
}