Is there a way to modify the snow script to alter the snow color?

Question

Is there a way to modify the snow script to alter the snow color?

I've been experimenting with a script to create a unique effect, inspired by a js fiddle I found online. The original snow effect has been modified to increase speed, change direction, and more.

My goal is to have "snow flakes" in multiple colors (about 4-7) instead of just white. Is there a simple way to achieve this using the existing js fiddle?

Link to the JS Fiddle

Any assistance on this matter would be greatly appreciated! Thank you for your time.

canvas {
    background:#183794;
    margin-bottom:10px;
     -ms-transform: rotate(180deg); /* IE 9 */
    -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
    transform: rotate(180deg);
}

javascript jquery css animation canvas

Answer 1

Answer №1

The previous responses are accurate, however, there is a drawback as the snowflake's color changes with each redraw, which may not be ideal.

Presented below is an improved version where each snowflake retains its assigned color throughout:

APP.snowflake = function(settings) {
    this.context = settings.context;
    this.x = settings.x || 30;
    this.y = settings.y || 30;
    this.radius = settings.radius || 10;
    this.resistance = settings.resistance || 1;
    this.speed = settings.speed || 0;
    this.velocityx = 0;
    this.velocityy = 0;
    this.color = this.getRandomColor();
};

APP.snowflake.prototype.drawSelf = function () {
    // Display the Snowflake in its designated color and position.
    this.context.fillStyle = this.color;
    this.context.beginPath();
    this.context.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
    this.context.closePath();
    this.context.fill();
};

APP.snowflake.prototype.getRandomColor = function() {
    colors = ['#F5A9A9', '#FFBF00', '#FFFFFF', '#FF0040', '#58FA58'];
    selected_color = colors[Math.floor(Math.random()*colors.length)];
    return selected_color;
};

Explore the revised functionality here: http://jsfiddle.net/ry8vLhw4/

Answer 2

The previous responses are accurate, however, there is a drawback as the snowflake's color changes with each redraw, which may not be ideal.

Presented below is an improved version where each snowflake retains its assigned color throughout:

APP.snowflake = function(settings) {
    this.context = settings.context;
    this.x = settings.x || 30;
    this.y = settings.y || 30;
    this.radius = settings.radius || 10;
    this.resistance = settings.resistance || 1;
    this.speed = settings.speed || 0;
    this.velocityx = 0;
    this.velocityy = 0;
    this.color = this.getRandomColor();
};

APP.snowflake.prototype.drawSelf = function () {
    // Display the Snowflake in its designated color and position.
    this.context.fillStyle = this.color;
    this.context.beginPath();
    this.context.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
    this.context.closePath();
    this.context.fill();
};

APP.snowflake.prototype.getRandomColor = function() {
    colors = ['#F5A9A9', '#FFBF00', '#FFFFFF', '#FF0040', '#58FA58'];
    selected_color = colors[Math.floor(Math.random()*colors.length)];
    return selected_color;
};

Explore the revised functionality here: http://jsfiddle.net/ry8vLhw4/

Answer 3

Answer №2

Here is the function responsible for creating the snowflakes.

var colors = ["#ffffff", "silver", "green"];
APP.snowflake.prototype.drawSelf = function () {
    // Draws the Snowflake with a randomly selected color.
    this.context.fillStyle = colors[Math.floor(Math.random() * colors.length)];
    this.context.beginPath();
    this.context.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
    this.context.closePath();
    this.context.fill();
};

If you want to use different colors, simply add them to the 'colors' array and let it randomly choose from there.

The key line here is

this.context.fillStyle = colors[Math.floor(Math.random() * colors.length)];

Check out the updated Fiddle below:

http://jsfiddle.net/7wsetqqa/36/

Answer 4

Here is the function responsible for creating the snowflakes.

var colors = ["#ffffff", "silver", "green"];
APP.snowflake.prototype.drawSelf = function () {
    // Draws the Snowflake with a randomly selected color.
    this.context.fillStyle = colors[Math.floor(Math.random() * colors.length)];
    this.context.beginPath();
    this.context.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
    this.context.closePath();
    this.context.fill();
};

If you want to use different colors, simply add them to the 'colors' array and let it randomly choose from there.

The key line here is

this.context.fillStyle = colors[Math.floor(Math.random() * colors.length)];

Check out the updated Fiddle below:

http://jsfiddle.net/7wsetqqa/36/

Answer 5

Answer №3

The snowflake's color is determined within the drawSelf function.

APP.snowflake.prototype.drawSelf = function () {
    // Draw the Snowflake at its new position.
    this.context.fillStyle = "#ffffff";
    this.context.beginPath();
    this.context.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
    this.context.closePath();
    this.context.fill();
};

To change the color of the snowflake, modify the fillStyle.

Check out this example.

Answer 6

The snowflake's color is determined within the drawSelf function.

APP.snowflake.prototype.drawSelf = function () {
    // Draw the Snowflake at its new position.
    this.context.fillStyle = "#ffffff";
    this.context.beginPath();
    this.context.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
    this.context.closePath();
    this.context.fill();
};

To change the color of the snowflake, modify the fillStyle.

Check out this example.

Answer 7

Answer №4

insert this line right after line 216:

this.color = '#'+Math.floor(Math.random()*16777215).toString(16)

then modify line 221 from:

this.context.fillStyle = "#ffffff";

to

this.context.fillStyle = this.color;

that's all. Check it out here: http://jsfiddle.net/7wsetqqa/40/

Answer 8

insert this line right after line 216:

this.color = '#'+Math.floor(Math.random()*16777215).toString(16)

then modify line 221 from:

this.context.fillStyle = "#ffffff";

to

this.context.fillStyle = this.color;

that's all. Check it out here: http://jsfiddle.net/7wsetqqa/40/

Is there a way to modify the snow script to alter the snow color?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Adjust the height of a DIV element using Jquery Resizable to a minimum height of 1px, smaller than its default value

Modify the CSS class by adding attributes dynamically instead of directly to the element

How can I sync changes between two variables in node.js?

Enter key triggering input change event is unresponsive in Internet Explorer

What is the alternative to using async:false in order to make ajax synchronous?

What could be causing the issues with a deployed AngularJS + RequireJS application that has been concatenated and minified?

The AreaChart in Google is displaying incorrect dates on the axis

The functionality of an Ajax call is limited to a single use, regardless of using

Having trouble monitoring the default close button on a desktop window

sum inside the while loop

Structure of Sencha Touch application

What is the best way to implement CSS Float in typescript programming?

The occurrence of an unforeseen symbol 'a' was encountered

Activate the class when clicked

When an array is added to a Json Object in Jquery, the result is an array of arrays instead of a single array of values

Issue with alignment: Safari browser on MacBook displaying Bootstrap buttons all the way to the right side of the screen

bootstrap thumbnail displayed without a border

Struggling with passing data to a child component in React

What is the process for building a series of HTML elements using jQuery?

Tips for preserving the status of a sidebar