Mathematic Inside Starfield

Many mathematic statements were being used in our Starfield summative, here are some of the examples:

Translate

Syntax

translate(width/2, height/2);

Description

This statement is a really important part of the project. Translation will decide the vertical and horizontal translations of the displaying object. We've tried running the code without this statement, the stars will start spreading out at the top left corner, rather than the center. Divide the width and height by 2 can center the displaying object.

Function

Syntax

function Star() {...}

function setup() {...}

function draw() {...}

Description

Our summative is base on different functions combine together and display Starfield.

Function Star is for randomizing the locations of the stars, and rerandomize again when the stars hit the edge of the canvas. Randomizing Negative width and positive width for example, this will make the Starfield starts at the center, and spreading out from the center to all different locations. We've also randomized the fill parameters from 0 to 255, this will make the stars have random color. We've also used map() to control the movement of the stars.

Function setup is for setting up the basics of the displaying system. We set the canvas size to 600 by 600, and we have a loop to call in the star function 800 times to generate 800 stars.

Function draw is for the actual display of the stars and background. But first, we added a bit of a bonus to the code, where users can control the speed of the entire Starfield. This is controlled by the mouseX, which means that if the user's mouse is at a negative x value, the speed of Starfield will decrease immediately; if the user's mouse is at a positive x value, the speed of Starfield will increase immediately. We set the background color to black, which you can do by using 0 as the value inside background(). Like we've covered earlier, we translated the width and height so the entire Starfield can start at the center. At the end, we called in the update and show function everytime this function runs.

Color and Shape

Syntax

background(0);

fill(random(0,255),random(0,255),random(0,255));

ellipse(sx, sy, r, r);

Description

We redomized the parameters of the fill function, which can turn the stars into different random colors. We set the background color to black (0), because the space is black. We used ellipse to draw the stars inside the Starfield.

Map

Syntax

var sx = map(this.x / this.z, 0, 1, 0, width);

var sy = map(this.y / this.z, 0, 1, 0, height);

var r = map(this.z, 0, width, 16, 0);

speed = map(mouseX, 0, width, 0, 30);

Description

Mapping helped our code dramatically, mapping can convert the number, which is the first parameter. This will dictate the movement of our stars. The speed statement will allow the user to control the speed of the starfield. This is all thanks to the map() function.