Category: UAL

I created a star class in p5, using the beginShape(), vertex() and endShape() functions. My main aim was to parameterise everything.

Star Generator

A star can be constructed by alternating points between two circles, one inner and one outer. The inner circle needs to be offset by half the angle of the difference between outer points.

constructor(position,radius,points,diff,col){
  this.position = position;
  this.radius = radius;
  this.points = points;
  this.diff = diff;
  this.col = col;
}

I construct a star object giving it a position (Vector), radius, number of points, difference between the inner/outer circle and colour.

drawself(){
  let pointsOuter = [];
  let pointsInner = [];
  
  let angleSpacing = 2*PI/this.points;
    
  for(let i = 0; i < this.points; i++){
    let x = this.position.x + this.radius*cos(i*angleSpacing);
    let y = this.position.y + this.radius*sin(i*angleSpacing);
    pointsOuter.push(createVector(x,y));
      
    x = this.position.x + (this.radius-this.diff)*cos((i+0.5)*angleSpacing);
    y = this.position.y + (this.radius-this.diff)*sin((i+0.5)*angleSpacing);
    pointsInner.push(createVector(x,y));
  }
  
  fill(this.col);
  beginShape();
  for(let i = 0; i < pointsOuter.length; i++){
    vertex(pointsOuter[i].x,pointsOuter[i].y);
    vertex(pointsInner[i].x,pointsInner[i].y);
  }
  vertex(pointsOuter[0].x,pointsOuter[0].y);
  endShape();
}

I use two arrays to make it easier to organise the points. I define points on the inner and outer circles. The inner circle points are offset by half.

I use sliders to be able to change parameters while the sketch is running.

I have a program that can generate stars with an arbitary number of points, radius and difference (pointiness).

https://editor.p5js.org/woojinJang_/sketches/HJfCFfONw

Making a Scene

I can export this object and use it in a new project. I want to create a scene/wallpaper using multiple stars.

The first thing I do is create an array of star objects.

let stars = [];
const starsCount = 300;

function setup() {
  createCanvas(windowWidth, windowHeight);
  for(let i = 0; i < starsCount; i++){
    let pos = createVector(i*(width/starsCount),random(height));
    let radius = random(5,30);
    let points = 8;
    let diff = radius*0.95;
    let col = 'white'

    stars.push(new Star(pos,radius,points,diff,col,radius*0.1));
  }
}

I give them a random position on the y axis but spread them evenly on the x axis, this makes it stops stars from clumping together too much and becoming distracting.

I set the radius to a random value and tie the speed to the radius, creating a parallax effect.

I then add a new method to the star to move it.

step(){
  this.position.y += this.speed;
  if(this.position.y > height+this.radius*2){
    this.position.y = -this.radius*2;
  }
}

When wrapping the star around, I ensure that it is fully off the screen. This stops the stars from ‘popping’ in and out of the scene.

I also add a bit of variance in the inner size of the star using a sin function, creating a sparkling effect.

let shine = sin(frameCount*0.1)*0.3;

Final Product

I set the background to a calming, wintery blue.

https://editor.p5js.org/woojinJang_/full/Kcq3kNo04