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 [email protected] 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/maccman/colorcanvas/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