CODEWITHSUNDEEP
javascriptcsshtml5-canvasrgb
Sam Mcleod
Sam Mcleod

Reputation: 425

Passing a color through a variable in a canvas animation

I am attempting to make a customisable animation on a canvas.

I am trying to change the colour of the animation with the click of a button by passing through a different rgb value.

At the moment I am not getting any response to the click of the button

http://codepen.io/smbazalo/pen/RPrQRN

html

  <button onclick="changedotColor('rgb(63,169,245)')"  ><img  id="blue" class="swatch"></button>

js

var dotcolor_val = "rgb(6,250,212)";
function changedotColor(input_color){
dotcolor_val = input_color;
console.log(input_color)
}

function Circle( args ) {
this.position  = [ 0, 0 ];
this.angle     = 30;
this.speed     = dotSpeed;
this.offset    = 1;
this.length    = 80;
this.size      = 5;
this.color     = dotcolor_val;
this.direction = 'grow';
}

Any advice on what could make this work?//Why this isn't working currently?

Much appreciated

Upvotes: 2

Views: 879

Answers (1)

Bassem
Bassem

Reputation: 3175

You are changing the local variable dotcolor_val via the function changedotColor(), however, this variable's change of value is not being reflected in the Circle instances.

This is the link to the working code: http://codepen.io/anon/pen/RPrQVW

Explanation

In your code you are defining an object Circle with function Circle(args) with a few properties.

You are instantiating and pushing these Circle objects into 3 lists with the following code:

for (i = 1; i < 10; i++) {
  var offset = 1;
  rowOne.push(new Circle({
    angle: 0,
    offset: i
  }));
  rowTwo.push(new Circle({
    angle: 120,
    offset: i
  }));
  rowThree.push(new Circle({
    angle: 240,
    offset: i
  }));
}

rowOne, rowTwo and rowThree contain the Circle objects you have created. Thus, one way to change the color of your created Circles is to do 2 things:

  1. Define a new function in the Circle object that will change the color of the object, as such:

    Circle.prototype.changeColor = function( rgbcolor ) {
    this.color = rgbcolor;
}

  2. When you trigger the function changedotColor() you need to iterate over the 3 lists and their children and trigger the changeColor function, as such:

    function changedotColor(input_color) {    
  for (i = 0; i < 3; i++) {
    rowOne[i].changeColor(input_color);
    rowTwo[i].changeColor(input_color);
    rowThree[i].changeColor(input_color);
  }
}

A different approach would be to modify your render method to take into consideration instance variable changes i.e. color value of the Circle object.

Upvotes: 1

Related Questions