I want to add labels to a g.raphael pie chart to display with each segment. I can't find any code to do this and haven't been able to figure it out on my own - can anyone help?
I would suggest that you go with the example code from raphael:
http://raphaeljs.com/pie.html
The label is added in this line:
txt = paper.text(cx + (r + delta + 55) * Math.cos(-popangle * rad),
cy + (r + delta + 25) * Math.sin(-popangle * rad),
labels[j]).attr({fill: bcolor, stroke: "none", opacity: 0, "font-size": 20});
Related
Most of You interested in Raycasting probably know the Lodev and Permadi tutorials:
https://lodev.org/cgtutor/raycasting2.html
https://permadi.com/1996/05/ray-casting-tutorial-11/
At first I implemented so called "vertical floor/ceiling" raycast, it continues drawig column by column wall routine, it just starst drawing floors when the wall is done, that optimized thinking, but the algorithm itself is very, very slow.
So I tried Lodevs "horizontal floor/ceiling" raycast and it was huuuuge difference and speed up..
everything would be OK, but this algorithm, despite that is fast, wastes performance on filling up the
whole screen with floor and ceiling, and after that it draws walls.
I would like to optimize that feature, so the floor and ceiiling would be drawn after walls are drawn and fill only the empty spaces.
Maybe the solution would be to remember blank spaces during wall casting, and then create array containing that x, y coords, so during floor and ceil casting we already know where to draw.. what do you think. Do you know better aproaches, maybe some hints, learing sources, algorithms? Thanks in advance...
ps. I am using mouse to look around, so the horizon is changing.
I am developing on Windows but pararell I am porting my code to faster Amigas with m68k 060/080 cpus with RTG in 320x240x32 or 640x480x32.. I got nice results so far.. so trying to optimize az much as I can everything.
Below some of my tests, and progresses...
PC <-> AMIGA (WIN UAE)
https://www.youtube.com/watch?v=hcFBPfDYZig
AMIGA, V600 080/78 Mhz - 320x240x32 no textures (sorry for quality)
https://www.youtube.com/watch?v=6dv46hT1A_Y
Since the question is not related to any language, I answer from a Javascript perspective.
I implemented the so called "vertical floor/ceiling" technique as well.
But instead of drawing pixels per pixel with ctx.drawImage() I use putImageData.
First I get the data from the tiles I want to render using a temporary canvas:
var tempCanvas = document.createElement('canvas');
var tempCtx = tempCanvas.getContext('2d');
tempCanvas.width = 64;
tempCanvas.height = 64;
var wallsSprite = new Image();
wallsSprite.onload = function () {
tempCtx.drawImage(wallsSprite, 0, 128, 64, 64, 0, 0, 64, 64);
floorData = tempCtx.getImageData(0, 0, 64, 64);
tempCtx.drawImage(wallsSprite, 0, 192, 64, 64, 0, 0, 64, 64);
ceilData = tempCtx.getImageData(0, 0, 64, 64);
}
wallsSprite.src = "./walls_2.png";
I create an empty imageData:
var floorSprite = this.ctx.createImageData(600, 400);
Then I do my "vertical floor/ceiling" raycasting:
//we check if the wall reaches the bottom of the canvas
// this.wallToBorder = (400 - wallHeight) / 2;
if (this.wallToBorder > 0) {
// we calculate how many pixels we have from bottom of wall to border of canvas
var pixelsToBottom = Math.floor(this.wallToBorder);
//we calculate the distance between the first pixel at the bottom of the wall and the player eyes (canvas.height / 2)
var pixelRowHeight = 200 - pixelsToBottom;
// then we loop through every pixels until we reach the border of the canvas
for (let i = pixelRowHeight; i < 200; i += 1) {
// we calculate the straight distance between the player and the pixel
var directDistFloor = (this.screenDist * 200) / (Math.floor(i));
// we calculate it's real world distance with the angle relative to the player
var realDistance = (directDistFloor / Math.cos(this.angleR));
// we calculate it's real world coordinates with the player angle
this.floorPointx = this.player.x + Math.cos(this.angle) * realDistance / (this.screenDist / 100);
this.floorPointy = this.player.y + Math.sin(this.angle) * realDistance / (this.screenDist / 100);
// we map the texture
var textY = Math.floor(this.floorPointx % 64);
var textX = Math.floor(this.floorPointy % 64);
// we modify floorSprite array:
if (floorData && ceilData) {
floorSprite.data[(this.index * 4) + (i + 200) * 4 * 600] = floorData.data[textY * 4 * 64 + textX * 4]
floorSprite.data[(this.index * 4) + (i + 200) * 4 * 600 + 1] = floorData.data[textY * 4 * 64 + textX * 4 + 1]
floorSprite.data[(this.index * 4) + (i + 200) * 4 * 600 + 2] = floorData.data[textY * 4 * 64 + textX * 4 + 2]
floorSprite.data[(this.index * 4) + (i + 200) * 4 * 600 + 3] = 255;
floorSprite.data[(this.index * 4) + (200 - i) * 4 * 600] = ceilData.data[textY * 4 * 64 + textX * 4]
floorSprite.data[(this.index * 4) + (200 - i) * 4 * 600 + 1] = ceilData.data[textY * 4 * 64 + textX * 4 + 1]
floorSprite.data[(this.index * 4) + (200 - i) * 4 * 600 + 2] = ceilData.data[textY * 4 * 64 + textX * 4 + 2]
floorSprite.data[(this.index * 4) + (200 - i) * 4 * 600 + 3] = 255;
}
}
}
}
}
finally we draw the floor and ceiling before the walls are rendered:
this.ctx.putImageData(floorSprite, 0, 0);
The result is super fast since:
we don't need to calculate ceiling texture coordinates since we deduce them from the floor coordinates.
we draw the ceiling/floor only once per loop, not pixels per pixel.
only the pixels that are visible are redrawn so it doesn't wastes performance on filling up the whole screen with floor and ceiling, and after that it draws walls.
Maybe it could be optimized with mixing horizontal raysting and putImageData put the game speed with wall/ceiling rendering or without is almost the same.
Here is the result
I have a rectangle, and there lines that outgoing from center of it into arbitrary position outside of rectangle. I need to clamp them to rectangle edges, so endpoint will lie on rectangle. I tried using intersection algorithms and it works, but it pretty slow because it handles any kind of collisions, while I have specific conditions: start of segment is always in center of rectangle, and end of line is always outside of rectangle, maybe there some fast algorithm for this?
I assume that rectangle dimensions are width, height and rectangle center is at (0,0)
(otherwise subtract center coordinates from endx, endy variables and add them to final results)
if abs(endx) * height <= abs(endy) * width //top or bottom side
return height/2 * endx / abs(endy), sign(endy) * height/2
else //left or right side
return sign(endx) * width/2, width/2 * endy / abs(endx)
Python quick check:
from math import copysign
def rectclamp(rectcenterx, rectcentery, width, height, lineendx, lineendy):
endx = lineendx - rectcenterx
endy = lineendy - rectcentery
if abs(endx) * height <= abs(endy) * width: #at top or bottom
return (rectcenterx + height / 2 * endx / abs(endy),
rectcentery + copysign(1, endy) * height / 2)
else:
return (rectcenterx + copysign(1, endx) * width/2,
rectcentery+ width/2 * endy / abs(endx))
print(rectclamp(6, 4, 12, 8, 9, 9))
print(rectclamp(6, 4, 12, 8, 27, 10))
print(rectclamp(6, 4, 12, 8, -12, -8))
>>>
(8.4, 8.0) #top edge
(12.0, 5.714285714285714) # right edge
(0.0, 0.0) #corner
I want to draw arrows on my Highcharts chart and came up with this so far. Looks nice but has problems:
higher stroke-width gives a longer arrow.
rotating the arrow will require complicated calculation like here.
If I could use a SVG marker on a Highcharts path like in this SVG tutorial drawing arrows would become much easier
My code:
renderer.path(['M', 200, 0, 'L', 200, 200,'L', 225, 200,'L',200,250,'L', 175, 200,'L', 200, 200])
.attr({
'stroke-width': 5,
stroke: 'red',fill:'red'
})
.add();
renderer.path(['M', 400, 0, 'L', 400, 200,'L', 425, 200,'L',400,250,'L', 375, 200,'L', 400, 200])
.attr({
'stroke-width': 50,
stroke: 'red',fill:'red'
})
.add();
I managed to draw arrows without using SVG marker. The arrow points exactly to the right spot, regardless of the rotation. It can even take into account the radius of the start and end point.
See fiddle
function drawArrow(startX, startY, startRadius, endX, endY, endRadius, width) {
var angle = Math.PI + Math.atan((endX - startX) / (endY - startY)),
arrowLength = 3 * width,
arrowWidth = 1.5 * width,
path = [],
startArrowX,
startArrowY,
margin = 5;
if (endY >= startY) {
//correct for circle radius
startX -= ((startRadius + margin) * Math.sin(angle));
startY -= ((startRadius + margin) * Math.cos(angle));
endX += ((endRadius + margin) * Math.sin(angle));
endY += ((endRadius + margin) * Math.cos(angle));
//correct for arrow head length
endX += (arrowLength * Math.sin(angle));
endY += (arrowLength * Math.cos(angle));
//draw arrow head
path.push('M', endX, endY);
path.push(
'L',
endX - arrowWidth * Math.cos(angle),
endY + arrowWidth * Math.sin(angle));
path.push(
endX - arrowLength * Math.sin(angle),
endY - arrowLength * Math.cos(angle));
path.push(
endX + arrowWidth * Math.cos(angle),
endY - arrowWidth * Math.sin(angle), 'Z');
} else {
//correct for circle radius
startX += ((startRadius + margin) * Math.sin(angle));
startY += ((startRadius + margin) * Math.cos(angle));
endX -= ((endRadius + margin) * Math.sin(angle));
endY -= ((endRadius + margin) * Math.cos(angle));
//correct for arrow head length
endX -= (arrowLength * Math.sin(angle));
endY -= (arrowLength * Math.cos(angle));
//draw arrow head
path.push('M', endX, endY);
path.push(
'L',
endX + arrowWidth * Math.cos(angle),
endY - arrowWidth * Math.sin(angle));
path.push(
endX + arrowLength * Math.sin(angle),
endY + arrowLength * Math.cos(angle));
path.push(
endX - arrowWidth * Math.cos(angle),
endY + arrowWidth * Math.sin(angle), 'Z');
}
renderer.path(path)
.attr({
'stroke-width': 1,
stroke: '#989898',
fill: '#989898'
}).add();
renderer.path(['M', startX, startY, 'L', endX, endY])
.attr({
'stroke-width': width,
stroke: '#989898'
}).add();
I have 10 legend elements that I want to show in two rows on top of my D3.js chart. I have tried the following
legend.append("rect").attr("width", 20).attr("height", 15).style("fill", function(d) {
return color(d.packageName);
});
legend.append("text").attr("dx", +25).attr("dy", "0.8em").style("text-anchor","front").style("fill", "#666").text(function(d) {
return d.packageName;
});
var margin = {
top: 30,
right: 20,
bottom: 30,
left: 40
};
d3.selectAll(".legend").each(function(d, i) {
return d3.selectAll(".legend").attr("transform", i < 6 ? function(d, i) {
return "translate(" + ((i * 100) + (diameter / 10) - 25) + "," + (+margin.top * 2) +")";
} : function(d, i) {
return "translate(" + ((i * 100) + (diameter / 10) - 25) + "," + (+margin.top * 4) +")";
});
});
My goal was to change the y coordinate if the "i" counter went over 5 so that the legend elements appear in 2 rows of 5. But the above code shows all legend elements in the second row. I'm sure I'm missing something very simple here!
My solution: put everything into the "enter" method, and compute the offsets.
legend = svg.selectAll(".legend").data(data).enter().append("g")
.attr("class", "legend")
.attr( "transform", function(d,i) {
xOff = (i % 4) * 50
yOff = Math.floor(i / 4) * 10
return "translate(" + xOff + "," + yOff + ")"
} );
Consequently, you can delete the entire "selectAll" and "each" portion at the bottom.
Updated Fiddle: http://jsfiddle.net/v7mkg/1/
Side-effect; this particular implementation could create many rows, but that's not at the heart of the issue.
I know raphael can create paths, but not lines. I know d3 can create both.
I would like to create a box and whisker chart, similar to this one, but horizontal instead of vertical. I have json data in the form:
{
"lowestValue":"53",
"lowerQuartile":"63",
"medianValue":"73",
"upperQuartile":"80",
"highestValue":"99",
"targetValue":"80"
},
...
How can I create a (or several) box and whisker plot(s) with d34raphael or with pure raphael, so that it will display properly in IE7/IE8?
Here is a picture of the end goal:
The path is such a similar primitive that it seems like it would be easy to recreate such a graph using raw Raphael (which seems increasingly to be my preference these days). Consider such a utility function as this:
function whisker( paper, x, y, width, height, data )
{
var x1 = x + data.lowestValue * width / 100, x2 = x + data.highestValue * width / 100;
var outer_range = paper.path( [ "M", x1, y + height * 0.25, "L", x1, y + height * 0.75, "M", x1, y + height / 2, "L", x2, y + height / 2, "M", x2, y + height / 4, "L", x2, y + height * 0.75 ] ).attr( { fill : 'none', stroke: 'gray' } );
var inner_range = paper.rect( x + ( width * data.lowerQuartile / 100 ), y, width * ( data.upperQuartile - data.lowerQuartile ) / 100, height, 0 ).attr( { fill: 'lightgray', stroke: 'black' } );
var median = paper.path( [ "M", x + width * data.medianValue / 100, y, "L", x + width * data.medianValue / 100, y + height ] ).attr( { fill: 'none', stroke: 'black' } );;
var target = paper.circle( x + ( width * data.targetValue / 100 ), y + height / 2, height / 4 ).attr( { fill: 'black' } );
}
The sixth parameter is simply your json data. You would need to increment the y value for each whisker, of course. Here's the code in action on my website.