math,three.js,pie-chart,clip , Piechart on a Hexagon


Piechart on a Hexagon

Question:

Tag: math,three.js,pie-chart,clip

I wanna to produce a Pie Chart on a Hexagon. There are probably several solutions for this. In the picture are my Hexagon and two Ideas:

  1. My Hexagon (6 vertices, 4 faces)
  2. How it should look at the end (without the gray lines)

  3. Math: Can I get some informations from the object to dynamically calculate new vertices (from the center to each point) to add colored faces?

  4. Clipping: On a sphere a Pie-Chart is easy, maybe I can clip the THREE Object (WITHOUT SVG.js!) so I just see the Hexagon with the clipped Chart?

photo


Answer:

Well the whole clipping thing in three.js is already solved here : Object Overflow Clipping Three JS, with a fiddle that shows it works and all.

So I'll go for the "vertices" option, or rather, a function that, given a list of values gives back a list of polygons, one for each value, that are portions of the hexagon, such that

Let us suppose the hexagon is inscribed in a circle of radius R, and defined by the vertices :

{(R sqrt(3)/2, R/2), (0,R), (-R sqrt(3)/2, R/2), (-R sqrt(3)/2, -R/2), (0,-R), (R sqrt(3)/2, -R/2)}

This comes easily from the values cos(Pi/6), sin(Pi/6) and various symmetries.

Getting the angles at the centre for each polygon is pretty simple, since it is the same as for a circle. Now we need to know the position of the points that are on the hexagon.

Note that if you use the symmetries of the coordinate axes, there are only two cases : [0,Pi/6] and [Pi/6,Pi/2], and you then get your result by mirroring. If you use the rotational symmetry by Pi/3, you only have one case : [-Pi/6,Pi/6], and you get the result by rotation.

Using rotational symmetry

Thus for every point, you can consider it's angle to be between [-Pi/6,Pi/6]. Any point on the hexagon in that part has x=R sqrt(3)/2, which simplifies the problem a lot : we only have to find it's y value.

Now we assumed that we know the polar coordinate angle for our point, since it is the same as for a circle. Let us call it beta, and alpha its value in [-Pi/6,Pi/6] (modulo Pi/3). We don't know at what distance d it is from the centre, and thus we have the following system :

system with alpha

Which is trivially solved since cos is never 0 in the range [-Pi/6,Pi/6].

Thus d=R sqrt(3)/( 2 cos(alpha) ), and y=d sin(alpha)

So now we know

So our point is (d cos(beta), d sin(beta))

Code

Yeah, I got curious, so I ended up coding it. Sorry if you wanted to play with it yourself. It's working, and pretty ugly in the end (at least with this dataset), see the jsfiddle : http://jsfiddle.net/vb7on8vo/5/

var R = 100;
var hexagon = [{x:R*Math.sqrt(3)/2, y:R/2}, {x:0, y:R}, {x:-R*Math.sqrt(3)/2, y:R/2}, {x:-R*Math.sqrt(3)/2, y:-R/2}, {x:0, y:-R}, {x:R*Math.sqrt(3)/2, y:-R/2}];
var hex_angles = [Math.PI / 6, Math.PI / 2, 5*Math.PI / 6, 7*Math.PI / 6, 3*Math.PI / 2, 11*Math.PI / 6];

function regions(values)
{
    var i, total = 0, regions = [];

    for(i=0; i<values.length; i++)
        total += values[i];

    // first (0 rad) and last (2Pi rad) points are always at x=R Math.sqrt(3)/2, y=0
    var prev_point = {x:hexagon[0].x, y:0}, last_angle = 0;

    for(i=0; i<values.length; i++)
    {
        var j, theta, p = [{x:0,y:0}, prev_point], beta = last_angle + values[i] * 2 * Math.PI / total;

        for( j=0; j<hexagon.length; j++)
        {
            theta = hex_angles[j];
            if( theta <= last_angle )
                continue;
            else if( theta >= beta )
                break;
            else
                p.push( hexagon[j] );
        }

        var alpha = beta - (Math.PI * (j % 6) / 3); // segment 6 is segment 0
        var d = hexagon[0].x / Math.cos(alpha);
        var point = {x:d*Math.cos(beta), y:d*Math.sin(beta)};

        p.push( point );
        regions.push(p.slice(0));

        last_angle = beta;
        prev_point = {x:point.x, y:point.y};
    }

    return regions;
}

Related:


Points, Vectors, Dot Product & Cross Product of python [on hold]


python,math
Need help with this of python Write a program with 3 functions to find out the (function 1) dot product, (function 2) angle, and (function 3) cross product of two vectors. Program should ask a user to input three points in 3D space such as (x1, y1, z1), (x2, y2,...

implement pow in java without using math lib


java,math
I did a code like this: public static double myPow(double x, int n){ if(n==0) return 1; double t = myPow(x, n/2); if(n % 2 != 0){ if(n < 0){ return (1 / t * t * x); } else { return t * t * x; } } else {...

3D Lines disappear sometimes


javascript,d3.js,3d,three.js
I am building 3d line chart from data here is the code Demo the part of code that generate line is parentTransform = new THREE.Object3D(); var _color = d3.scale.category10(); for (var i = 5; i > 0; i--) { var material = new THREE.LineBasicMaterial({ // color: 0x0000ff,linewidth: 30 color: _color(i),...

why when i change slaying in the last else statment it crashes the browser


javascript,arrays,math
i was playing around in code academy and for some reason when i change the last slaying i the else statement to true instead of making the person invincible it just crashes my browser any ideas why thank you in advance var slaying = true; var youHit = Math.floor(Math.random()*2); var...

Have I properly sorted these runtimes in order of growth?


math,big-o,time-complexity,asymptotic-complexity
I am doing this small task which I have to arrange asymptotic runtime in ascending order. Here are the runtimes: Here is the order I believe they should go in: log10(n^4), n^3, 2^((log4n)), 2^(100n), e^pi^4096, n! + 12^1000 Is this correct? Or are there any errors? Thanks!...

Reverse ^ operator for decryption


c,algorithm,security,math,encryption
I'm trying to reverse the following code in order to provide a function which takes the buffer and decrypts it. void crypt_buffer(unsigned char *buffer, size_t size, char *key) { size_t i; int j; j = 0; for(i = 0; i < size; i++) { if(j >= KEY_SIZE) j = 0;...

Matlab: For loop with window array


arrays,matlab,math,for-loop,while-loop
This is my one dimensional array A, containing 10 numbers: A = [-8.92100000000000 10.6100000000000 1.33300000000000 ... -2.57400000000000 -4.52700000000000 9.63300000000000 ... 4.26200000000000 16.9580000000000 8.16900000000000 4.75100000000000]; I want the loop to go through like this; (calculating mean interval wise) - Interval length of 2,4,8 (a(1)+a(2))/2 - value stored in one block of...

Orbit camera lookAt change


javascript,camera,three.js
Is there any possibility to change the lookAt target of Orbit camera? I have it set for my 'static' camera, but when activating the orbit camera it always looks at (0,0,0)....

Matlab: Writing to a file


arrays,matlab,loops,math,for-loop
I want to store mean_2....mean_8, std_2....std_8, and coVariance as separate columns in a file. Help Please? This Code calculates IntervalFeatures of Erp signal with 256 time frames and plots them Datapoints are store in A ___________HowTheCodeWorks________________________________________________ each 1x4 sliding sub-matrix is made a column for eg:- if A is...

2D Line reflection on a “mirror”


math,lua,love2d
So I've been working at this on and off for a week, googling and all and I haven't found how to do this. I have a table of "rays" and a table of "lines", and I want the lines to act as mirrors and reflect a ray whenever the ray...

LinkedHashSet and subList, getting n of collection


java,math,set,linkedhashset
I am trying to do a homework in math which is find a subset of collection {1,2,..,n} where n is a number given in the code, I cannot get it done with the sublist so I need to get your help with a math programming. For example for n =...

How to get a pizza program to round to a full pizza In PYTHON [duplicate]


python,math,rounding
This question already has an answer here: How do you round UP a number in Python? 9 answers Python round up integer to next hundred 6 answers so i'm making a pizza program in Python 3.3 that takes input from the user and prints the amount of pizza's needed....

Determining angles on an SVG path between two lines


javascript,math,svg
I'm trying to make my robot follow a path that is a drawn SVG path on a webpage. To keep it simple, assume that the SVG Is like so: <svg xmlns="http://www.w3.org/2000/svg"> <path id="path" d="M 100 100 L 300 300 L 100 500 z"> </svg> Which makes a triangle. The robot...

Interactive Meshes in Three.js


javascript,three.js,mesh,interactive
I new to javascript and three.js so this is probably a noob question. BTW, I'm working on the example interactive/cubes/tween and I'm trying to modify it to test something else. At the moment the MouseDown event gives the tween effect to the intersected geometry, here's the function: function onDocumentMouseDown( event...

Arithmetic on a struct representing a large integer


c,math,largenumber,integer-arithmetic
I've wrote an implementation of Murmur3 hash and have defined the 128-bit keys as hash128_t typedef struct { uint64_t p1; uint64_t p2; } hash128_t; I'm trying to write my own hashmap using these keys, but I'm not exactly sure how to do arithmetic with a struct nor a number this...

How to calculate a random point inside a cube


math,vector,3d,cube
I'm trying to figure out the math to find a random point inside a cube. I have something small but it can't take into account the rotation of the cube. Here are some images of my results. Here you can see the cube is rotated to some degree but when...

Why we use CORDIC gain?


math,fpga,cordic
I'm studying the cordic. And I found the cordic gain. K=0.607XXX. From CORDIC, K_i = cos(tan^-1(2^i)). As I know the K is approched 0.607xxx.when I is going to infinity this value come up with from all K multiplying. I understand the reason of exist each k. But I am curioused...

calculate % change in javascript


javascript,math,percentage
var current = 12000; var june = 14600; var may = 11200; I want percent change with respect to 'current' month parameter. The output should be in percent and it can add or subtract w.r.t. the current month. How to do this?...

Power by squaring for negative exponents


c,algorithm,math,recursion
I am not sure if power by squaring takes care of negative exponent. I implemented the following code which works for only positive numbers. #include <stdio.h> int powe(int x, int exp) { if (x == 0) return 1; if (x == 1) return x; if (x&1) return powe(x*x, exp/2); else...

Math operations within HTML


html,math
Is it possible to perform math operations within HTML, like <div width="50/2">? Or can this only be done using Javascript or CSS?

PHP math does not work in sql value ZERO


php,mysql,math,phpmyadmin
I am trying to math between value of 0 but in php code it's work properly but when that value come from database then it does not work. Here is a demo to test only PHP code: <?php $a = 0; echo $a+1; ?> The result of this code 1...

Issues With length() And Multiples Of 3


java,math,multiplication,string-length
Lets see if someone can wrap their head around this: if you get the length of a String using length(), the String always being multiples of 3,(in my case: "1.02.03.04.05.06.07.0 etc.") each 3 characters representing a letter, with .1 indicating a capitol letter, how do you use the length to...

Load multiple OBJ-files together with multple textures


ajax,three.js,textures
Using the many examples on ThreeJS, I'm able to load multiple OBJ files into my scene. I'm also able to load multiple images as textures. However, the textures get assigned to the objects in 'order of appearance' and therefore, sometimes the wrong image gets assigned to the OBJ files. I...

Rotate a grid of points in C++


c++,math,rotation,grid,geometry
If i had an array of point structs defined as struct Point{ float x; float y; }; How would I rotate the points in this array by a given angle? As an example: Any help would be appreciated!...

Separating axis theorem: rotation around center of mass


c++,math,rotation,rotational-matrices,separating-axis-theorem
The problem is in Polygon::FindAxisLeastPenetration: double Polygon::FindAxisLeastPenetration(unsigned int *faceIndex, const Polygon &polygonA, const Polygon &polygonB) const { double bestDistance = -std::numeric_limits<double>::infinity(); unsigned int bestIndex; for (unsigned int i = 0; i < polygonA.points.size(); i++) { Vector2D n = polygonA.normals[i]; Vector2D nw = polygonA.rotationMatrix * n; //ROTATION Matrix22 buT = polygonB.rotationMatrix.Transposed();...

How to calculate the number of all possible combinations for a range of numbers from 1 to N?


python,math,combinations,itertools
Other than doing this: from itertools import combinations def brute_force(x): for l in range (1,len(x)+1): for f in list(combinations(range(0,len(x)),l)): yield f x = range(1,18) len(list(brute_force(x))) [out]: 131071 How could I mathematically calculate the number of all possible combinations? Is there a way to do it computationally without enumerating the possible...

randint() unexpected behavior


python,math
I'm writing a python script to find out some things about randomization. I have the following code: from random import randint one = 0 two = 0 olddiff = 0 diff = 0 sumdiff = 0 avgdiff = 0 headcounter = 0 counter = 0 while (headcounter < 500000): while...

Convert a large int to a float between 0.0f and 1.0f


math,unity3d,numbers
I'm working on a project where I have a pane that goes from 0 to 500 on the x and z, but I need to convert that coordinate (from 0 to 500) to a float in the range of 0.0 to 1.0 in because it is required from some of...

Centering three.js renderer.domElement (canvas) inside a parent div


css,three.js
I'm having difficulty understanding how to 'style' the output of a threejs renderer within an html div. For instance here is a simple scene: jsFiddle html: <div id="myPlanet"></div> css: body { background : #000; padding : 50px; margin : 0; } #myPlanet { width : 400px; min-height: 400px; margin :...

Artificial intelligence functionality in three.js


three.js
Does Three.JS have a function or capability of AI( Artificial intelligence )? Specifically let's say a FPS game. I want enemies to look for me and try to kill me, is it possible in three.js? Do they have a functionality or a system of such?

Removing a prior sample while using Welford's method for computing single pass variance


algorithm,math,statistics,variance,standard-deviation
I'm successfully using Welford's method to compute running variance and standard deviation as described many times on Stack Overflow and John D Cook's excellent blog post. However in the stream of samples, sometimes I encounter a "rollback", or "remove sample" order, meaning that a previous sample is no longer valid...

generating a pseudo unique number(code) based on a sequence of numbers with no repetition within 4 digits


php,math,hash
I'm generating a somewhat unique code that I don't want to repeat within at least 1000 consecutive numbers this is my function. take a number multiply it by another number then take the last $length=5 digits before the decimal point function createPseudoUniqueString($input,$length) { return substr( intval($input*738510.93067),-$length) ; } is there...

Visually midway between two points on a x axis log scale [closed]


matlab,math
The follow plot shows my question: I would like to add a line between the points of 1e-1 and 1e-2. So I thought just (1e-1+1e-2)/2. But for a log scale that is not "midway". How can I calculate the "visual" midway value between these, or any two points in this...

Bash script for basic mathematic operations


linux,bash,math
I am new to Linux, and I just want a Bash Script to do basic arithmetic operation to a text file 1 2 3 4 and the results should be addition and multiplication in separate text files say add + 5 for 1st text file and mult * 5 in...

Calculate The object angle(face) having two points? [closed]


c++,math,geometry,angle
C++, I want calculate the angle of the direction of the two points. Here is a picture which shows the two points and the direction of how to get the angle of the direction? p1 - start point. p2 - direction point. me need direction angle(facing?) from p1 to p2...

Rotate line segment with Button


math,javafx,geometry,coordinates
I have a line which has points (x1,y1) and (x2,y2). I wanted to attach a Button to it, it should align with the line by rotating based on the line segment points. I need some help in calculating the rotation angle for the Button.

Excel log equivilent to JS Math.log()


javascript,excel,math
In my javascript code I have the following Math.log(20) = 2.995732273553991 In my excel formula I try to replicate this with =LOG(20) = 1.301029996 Anyone have any idea why I'm getting two different outcomes? I'd like my excel to match my js. ...

Create a 2D texture from existing textures


three.js,textures,webgl,texture-atlas
I have an application where I load a series of medical images (jpg), create a texture object for each image and display those textures on 3D planes. The amount of images depends in the CT scanner's resolution but my prototype should work with up to 512. As an additional task,...

Error setting Color


javascript,three.js
I'm new with three.js. Basically I want to make something like a chessboard. I got this: for( x=-30; x<=50;x=x+10){ for( y=-30; y<=20;y=y+10 ){ var TileGeometry = new THREE.PlaneGeometry(5,5); var TileMaterial = new THREE.MeshBasicMaterial(); var Tile = new THREE.Mesh(TileGeometry,TileMaterial); //tile.receiveShadow = true Tile.rotation.x=-0.5*Math.PI; Tile.position.x = x; Tile.position.y = 0; Tile.position.z =...

What does three.js's Matrix4.multiply() method do?


javascript,matrix,three.js,linear-algebra,matrix-multiplication
I'm learning three.js and am trying to multiply two translation matrices together to get a single matrix that describes both translations: | 1 0 0 -2 | | 1 0 0 3 | | 0 1 0 7 | * | 0 1 0 4 | | 0 0 1...

Ranking with time weighting


python,algorithm,sorting,math
I am looking for a basic algorithm that gives more weigh to the recent reviews. So, the output value of the algorithm is mutable. For example, two reviews with exactly the same score, will have a different ranking based on the timestamp of the creation. Review_1 Score 10 creation 10/5/2014...

How to get rid of scale factor from CORDIC


math,vhdl,fpga,rtl,cordic
From CORDIC, K_i = cos(tan^-1(2^i)). As I know the K is approached 0.607xxx. How do I approach to 0.607xxx? Also does it mean that I can use 0.607xxx instead of cos(tan^-1(2^I))? I am citing from this article. I am trying to implement hyperbolic tanh function. And so far I understand...

How can we use cordic to tanh(x+1)/tanh(x)?


math,cordic
How can we use cordic to tanh(x+1)/tanh(x) I can't get a idea about how to apply cordic to above function. In other word, which point on the above function, can we apply cordic?...

Solving a complex recurrence relation for the Traveling Salesman


algorithm,math,time-complexity,computer-science,recurrence-relation
I need to solve the exact time complexity for the brute force version of the Traveling Salesman using a recurrence relation. I've worked out the recurrence relation to be as follows: T(n)=T(n-1)*(n-1)+1 But I'm having trouble reducing that that to a closed form of the function, and thus get the...

fixed point multiplication for normal multiplication


math,floating-point,fixed-point
I need to multiply X with a floating point number in floating point as i don't have floating point operations in my processor. I understand the method but don't know why that method exists? Suppose we want to multiply 2*4.5 in decimal I do the below: 2 * 4.5 (100.1)...

3 X 3 magic square recursively


c++,algorithm,math,recursion
I'm trying to find all possible solutions to the 3X3 magic square. There should be exactly 8 solutions. My code gets them all but there are a lot of repeats. I'm having a hard time tracking the recursive steps to see why I'm getting all the repeats. // This program...

How to make a skyBox with THREE.Js


javascript,three.js,skybox
I have looked a a number of different examples of skyboxes in three.js, however I can't get any of them to work in my three.js project. Here is what I have so far, with a skybox (which doesn't work). Can someone help me make a skybox or help fix my...

How can I correctly convert geographical coordinates to pixels on screen?


java,math,2d,map-projections,mercator
I'm trying to make a Java project that pinpoints the place on a image of a map, when given coordinates (taken from Google Maps). I've tried using the top-left corner of the image (place that has highest latitude, and the lowest longitude), as an some kind of an reference point,...

Export ThreeJS Geometry to JSON


three.js,xml3d
I need to export Three Geometry to JSON so I can used with xml3D. I am trying to find the THREE.GeometryExporter() but I can't. Has it been completely deprecated? It is mentioned here Once I have the Three JSON I should be able to use this converter to obtain the...

c++ mathematical calculations [closed]


c++,loops,math
I have to solve problem using c++, and can't really come up with solution. The condition is. In a skyscraper there are a lot of offices, on every office door there must be put plate with its number from 1 to the number of the last office. The plate can...