Create a Circular Spectrum

[blpraveen]

Hi,
I am using this plugin and trying to customize to create a circular spectrum instead of vertical spectrum.
Canvas plugin works perfectly no issues.
I am having an issue in generating the rectangular gradient inside a circular spectrum.
Below is the function I am using, the rectangular gradient is not properly generated. I want to know how to set the coordinates of rectangular box which starts inside a circle.

Gradient.prototype.renderGradient = function() {
  var color, colors, gradient, index, xy, _i, _len, _ref, _ref1;

  xy = arguments[0], colors = 2 <= arguments.length ? __slice.call(arguments, 1) : [];

  this.renderSpectrum();      
  var r_width =  this.width * 0.8,
    toRad = (2 * Math.PI) / 360,
    width =  Math.sqrt((r_width * r_width)/2),
    p_side =  r_width + r_width * Math.cos(135 * toRad) - 5;      
    p_end_side =  r_width + r_width * Math.cos(270 * toRad) - 5;      

  gradient = (_ref = this.ctx).createLinearGradient(0,0,width,0);
  console.log(colors);
  gradient.addColorStop(0, (_ref1 = colors.shift()) != null ? _ref1.toString() : void 0);
  for (index = _i = 0, _len = colors.length; _i < _len; index = ++_i) {
    color = colors[index];
    gradient.addColorStop(index + 1 / colors.length, color.toString());
  }
  this.ctx.fillStyle = gradient;        
  this.ctx.fillRect(p_side, p_side, width, width);
  console.log(width);
  console.log(new Color.Black(1).toString());
  gradient = this.ctx.createLinearGradient(0, 0,  -6, width + 80);
  gradient.addColorStop(0, new Color.Black(0).toString());
  gradient.addColorStop(1, new Color.Black(1).toString());      
  this.ctx.fillStyle = gradient;
  return this.ctx.fillRect(p_side, p_side,  width, width);    
};
Gradient.prototype.renderSpectrum = function() {
    var radius = this.width / 2;
    var toRad = (2 * Math.PI) / 360;
    var step = 1 / radius;

   this.ctx.clearRect(0, 0, this.width, this.height);

    for(var i = 0; i < 360; i += step) {
        var rad = i * toRad;
        this.ctx.strokeStyle = 'hsl(' + i + ', 100%, 50%)';
        this.ctx.beginPath();
        this.ctx.moveTo(radius, radius);
        this.ctx.lineTo(radius + radius * Math.cos(rad), radius + radius * Math.sin(rad));
        this.ctx.stroke();
    }

   this.ctx.fillStyle = 'rgb(255, 255, 255)';
   this.ctx.beginPath();
   this.ctx.arc(radius, radius, radius * 0.8, 0, Math.PI * 2, true);
   this.ctx.closePath();
   return this.ctx.fill();

}

[nornagon]

Check out https://github.com/nornagon/thistle

On Monday, February 24, 2014, B L Praveen notifications@github.com wrote:

Hi,
I am using this plugin and trying to customize to create a circular
spectrum instead of vertical spectrum.
Canvas plugin works perfectly no issues.
I am having an issue in generating the rectangular gradient inside a
circular spectrum.
Below is the function rectangular gradient is not properly generated. I
want to know how to set the coordinates of rectangular box which starts
inside a circle.

Gradient.prototype.renderGradient = function() {
var color, colors, gradient, index, xy, _i, _len, _ref, _ref1;

xy = arguments[0], colors = 2 <= arguments.length ? __slice.call(arguments, 1) : [];

this.renderSpectrum();
var r_width = this.width * 0.8,
toRad = (2 * Math.PI) / 360,
width = Math.sqrt((r_width * r_width)/2),
p_side = r_width + r_width * Math.cos(135 * toRad) - 5;
p_end_side = r_width + r_width * Math.cos(270 * toRad) - 5;

gradient = (_ref = this.ctx).createLinearGradient(0,0,width,0);
console.log(colors);
gradient.addColorStop(0, (_ref1 = colors.shift()) != null ? _ref1.toString() : void 0);
for (index = _i = 0, _len = colors.length; _i < _len; index = ++_i) {
color = colors[index];
gradient.addColorStop(index + 1 / colors.length, color.toString());
}
this.ctx.fillStyle = gradient;
this.ctx.fillRect(p_side, p_side, width, width);
console.log(width);
console.log(new Color.Black(1).toString());
gradient = this.ctx.createLinearGradient(0, 0, -6, width + 80);
gradient.addColorStop(0, new Color.Black(0).toString());
gradient.addColorStop(1, new Color.Black(1).toString());
this.ctx.fillStyle = gradient;
return this.ctx.fillRect(p_side, p_side, width, width);
};
Gradient.prototype.renderSpectrum = function() {
var radius = this.width / 2;
var toRad = (2 * Math.PI) / 360;
var step = 1 / radius;

this.ctx.clearRect(0, 0, this.width, this.height);

for(var i = 0; i < 360; i += step) {
    var rad = i * toRad;
    this.ctx.strokeStyle = 'hsl(' + i + ', 100%, 50%)';
    this.ctx.beginPath();
    this.ctx.moveTo(radius, radius);
    this.ctx.lineTo(radius + radius * Math.cos(rad), radius + radius * Math.sin(rad));
    this.ctx.stroke();
}

this.ctx.fillStyle = 'rgb(255, 255, 255)';
this.ctx.beginPath();
this.ctx.arc(radius, radius, radius * 0.8, 0, Math.PI * 2, true);
this.ctx.closePath();
return this.ctx.fill();

}

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/7
.

j

[blpraveen]

Above given link uses coffee script. I am not able to understand the code easily. I could not generate the gradient properly . I am doing wrong in the coordinates. can you help to solve it?

[blpraveen]

How to generate HSL and HSV to fill the rectangle?
I failed to yield proper result
I need to start drawing the gradient inside a circle to fill the rectangle
it is done in the plugin .and starts at 0 , 0 When I try at different point gradient is not drawn properly.

  this.ctx.createLinearGradient(0, 0, -6, this.height)
  gradient = (_ref = this.ctx).createLinearGradient(0,0,width,0);

I am replacing 0,0 with square cordinates and the height of the square
still it doesnt show me the proper HSL and HSV

What am I doing wrong?

I have created a jsfiddle here