Develop Reference

`line()` in p5js crosses the edges. Beside doing the math myself, is there an easier way to make the line just connect their edges?

I'm trying to draw a line to connect two given circles.
function setup() {
createCanvas(300, 100);
background(220);
noFill();
ellipse(150, 30, 20, 20);
ellipse(100, 50, 20, 20);
line(100, 50, 150, 30);
}
<script src="https://cdn.jsdelivr.net/npm/p5#1.4.1/lib/p5.min.js"></script>
The parameters I get are the x, y of the circle's center. If I use the info directly, the line crosses both circles.
I know I can do the math, I'd just like to know if there is an easier way to make the line just connect their edges?

One easy way would be draw the line first then draw the circles and fill them with the background color this way the line inside the circles will be hidden, this only work if you don't mind the background and the circles color to be the same
function setup() {
createCanvas(300, 100);
background(220);
line(100, 50, 150, 30);
fill(220);
ellipse(150, 30, 20, 20);
ellipse(100, 50, 20, 20);
}
<script src="https://cdn.jsdelivr.net/npm/p5#1.4.1/lib/p5.min.js"></script>

Using opaque circles
A solution similar to what Sarkar said before, as far as you don't mind the circles having a fill color (whether their color is the same or different to the background color, it doesn't matter), the easiest way of doing this is by simply making the circles cover the line by drawing them afterwards with any fill opaque color.
Using a graphics object
However, if you would like to have this shape as a transparent shape, in order to have more freedom with the use you intend to do of it, you could try this: you create a graphics object, you draw the line, then you activate the erase mode and draw the circles so they erase the part of the line they are overlapping, then you exit the erase mode and draw normally the unfilled circles. Once you have finished with your graphic, you use the image function to draw it over the canvas.
let graphic;
function setup() {
createCanvas(300, 100);
graphic = createGraphics(width, height);
graphic.line(100, 50, 150, 30);
graphic.erase();
graphic.ellipse(150, 30, 20, 20);
graphic.ellipse(100, 50, 20, 20);
graphic.noErase();
graphic.noFill();
graphic.ellipse(150, 30, 20, 20);
graphic.ellipse(100, 50, 20, 20);
background(220);
image(graphic,0,0);
}
<script src="https://cdn.jsdelivr.net/npm/p5#1.4.1/lib/p5.min.js"></script>

How to calculate the vertical height in jsPDF?

I'm using the jspdf library and I'm facing some problems in the content position, suppose I have this pdf:
var doc = new jsPDF();
doc.setFontSize(12);
doc.text("some text", 15, 14); //<- vertical height is 14
as you can see I placed the text to x = 15 and y = 14, how can I calculate the used height (y) for add the next content? eg:
doc.addImage(someImage, 'JPEG', 15, 10, 60, 10);
as you can see I have an image that is:
x: 15
y: 10
width: 60
height: 10
but how can I know the used vertical height to add the new content? Because in the example above the image will overlay the text (y = 10).
I'm looking for a function that calculate the used height in the document, so I can know where to place the new content in the (vertical y) height.
Maybe there is another and simple solution to do this?
Thanks in advance.

You can use a work around for this as follows.
Crete a variable var y=14 and use this variable in your text part.
doc.text("some text", 15, y);
You can reuse the same variable in order to place image after it. or may be if you need space, you can reuse this variable as
var img_y=y+10;
doc.addImage(someImage, 'JPEG', 15, img_y, 60, 10);

how to put black text on top of gray rect in jspdf

I am using jspdf to convert my html page to PDF. So far I have figured out styles in the HTML don't apply to the PDF document. So I'm using doc.text and doc.rect.
I need the text on top of the rectangle but it seems to be that the rectangle is always on the top and it covers the text. How can I resolve this?
This is what I have tried:
var doc = new jsPDF();
doc.setFontSize(17);
doc.setTextColor(255, 0, 0);
doc.text(100,25, 'USD.00');
doc.setFillColor(255,255,200);
doc.rect(100, 20, 10, 10, 'F')

Draw your rectangle before you draw your text
var doc = new jsPDF();
doc.setFontSize(17);
doc.setFillColor(255,255,200);
doc.rect(100, 20, 10, 10, 'F');
doc.setTextColor(255, 0, 0);
doc.text(100,25, 'USD.00');

In jsPDF must be write code in sequence, then first draw the retangle and last write your text.
var doc = new jsPDF();
doc.setDrawColor(0);
doc.setFillColor(255, 0, 0);
doc.rect(40, 50, 30, 12, 'FD'); //Fill and Border
doc.setFontSize(8);
doc.setFontType('normal');
doc.text('hello', 42, 51);

You can use getTextWidth method to set proper width for a rectangle, but then you have to set font size/type before getting the width.
http://raw.githack.com/MrRio/jsPDF/master/docs/module-annotations.html#~getTextWidth

Donut / Radial Chart with Raphael

Im a beginner to Raphael. Can anyone show me how I can do a donut/radial chart, with animation, similar to these.
http://dribbble.com/shots/670348-Segment-Graphs
Im working at it now. So far Ive got this far. I will update as I make progress. My sumbling block right now is animating a change in color for the outer ring.
window.onload = function () {
// Creates canvas 320 × 200 at 10, 50
var paper = Raphael(10, 50, 320, 200);
// Creates circle at x = 50, y = 40, with radius 10
var circle1 = paper.circle(50, 40, 40);
var circle2 = paper.circle(50, 40, 20);
circle2.attr("fill", "#fff");
circle2.attr("stroke", "#fff");
circle1.attr("fill", "#336699");
circle1.attr("stroke", "#fff");
}

Credits:
On the raphael website there is an example that uses arcs. There is another question on stackoverflow with a similar topic: drawing centered arcs in raphael js. The accepted answer there has a simplified and commented version of the most important parts of the code, plus there is a jsfiddle link showing the code in action: http://jsfiddle.net/Bzdnm/2/
So what I did: I took the code from the linked question, combined it with eve, another javascript library made by the creator of RaphaelJS and what I got was this: http://jsfiddle.net/cristighenea/aP7MK/
At a glance:
1.after the arc is created we rotate it 180 degrees and begin animating it:
theArc.rotate(180, 100, 100).animate({
arc: [100, 100, amount, 100, 40]
}, 1900, function(){
//animation finish callback goes here
});
2.using eve we bind an event to *raphael.anim.frame.**
3.each time the event is fired we update the text in the middle with the new value of the arc
If you have any questions let me know

moving custom font doesn't work

I'm trying to move a text via animation using raphael's print(), but it doesn't work:
var paper = Raphael(document.getElementById("stage"), 640, 480);
var text = paper.print(300, 200, "Test Text", paper.getFont("Yanone"), 50);
text.animate({
y: 400
}, 1000);
Anyone have ideas what I may be missing?

I think you should use the text function instead of the print function if you want to animate it later. I'm not sure why but it works ...
Here is an example with both ways of doing it:
var paper = Raphael("canvas", 640, 480);
var fonts = [0, paper.getFont("DIN")];
//using print
var p = paper.print(70, 150, "Custom fonts", fonts[1], 20).attr({fill: "#f00"});
//using text (font-family is the same as in getFont)
var t = paper.text(100, 150, "Custom fonts")
t.attr({"font-family": "DIN", "font-size":50, "opacity": 0.5});
t.attr({"fill": "#000"});
And on the second one you can do this for example :
t.animate({"font-size":40,"fill":"#0f0"},2000);
t.animate({"x":150},5000);