We Keep Coding

Calculation of a sphere in JavaScript

I'm trying to calculate the volume of a sphere, with floating points, but I couldn't quite understand the logic behind the exercise.
Write a program that calculates and displays the volume of a sphere,
providing the value of its radius (R). The formula for calculating
volume is: (4/3) * pi * R3. Consider (assign) to pi the value 3.14159.
const PI = 3.14159;
let R = parseFloat(gets());
//TODO: Fill in the blanks with a possible solution to the challenge
print("VOLUME = " + );

You should try by yourself, but here is the solution and explanation.
If you are using javascript on the browser:
let radius = parseFloat(prompt("Enter value for radius: "));
let volume = 4/3 * Math.PI * Math.pow(radius, 3);
console.log("The volume is: ", volume);
We are requesting the user input with prompt() and assigning it to radius variable. We calculate the volume with the equation v = 4/3 πr³, Math.PI represents the number PI and Math.pow() calculates the given base (this case, radius) taken to the power of the given exponent. Last step is to print the result to the output, which is done with console.log()

Reading a lot of the tips here, I solved it, I don't know if it's the best way, but I solved it.
const PI = 3.14159;
let R = parseFloat(gets());
var raio = parseFloat(R);
var volumeEsfera = (4/3) * PI * Math.pow(raio, 3);
print("VOLUME = " + volumeEsfera.toFixed(3) );

map gradient to number value

I need to draw a gradient on a div/canvas or something. The gradient will start on one color and end on another. So only two colors(and the ones made up between). Lets say it starts on white and ends on black.
The application im working on calls an API that retturns a number betwenen 1-100.
The width of the gradient should be 100% i think to make the math "easy".
The number i get from the API should map to a position and hex code in the gradient and return those two.
How would i do something like that? Any ideas or code?

If i understand this correctly, you have:
startColor at 0%
endColor at 100%
chosenColor at x%
Lets assume you saved the hex colors like this (here white is the startColor):
startColor.red = 255;
startColor.green = 255;
startColor.blue = 255;
You calculate the difference in the two colors:
diffColor.red = endColor.red - startColor.red;
diffColor.green = endColor.green - startColor.green;
diffColor.blue = endColor.blue - startColor.blue;
Then you add the difference to the startColor, according to your x value:
markerColor.red = startColor.red + diffColor.red * x / 100;
markerColor.green = startColor.green + diffColor.green * x / 100;
markerColor.blue = startColor.blue + diffColor.blue * x / 100;
If you need to calculate the position it goes the same way:
markerPosition = startPosition + distance / x * 100
I have no idea if this is what you're looking for. I can't tell if your question is super complicated or really simple.

Determining the correct RGB for an html heat map

I want to be able to apply a color map that blends smoothly from red to green to blue.
It is clear to me, I will need to use HSL to make such a heat map, and then convert each HSL value to an RGB value to achieve this result. However I do not know how implement the solution.
Here is the part of the code that takes a table element and determines which RGB color to apply to it. In this case, it is for a table type of "cohesive energy"
var td = document.createElement('td');
cellKey = sprintf('%s,%s', m1, m2);
if (_.has(table['cells'], cellKey)) {
var diff = table['max'] - table['min'];
diff = Math.max(1, diff); // prevent divide by zero when max == min.
var val = table['cells'][cellKey]['value'];
var pct = (val - table['min']) / diff;
var blue = Math.floor(255 * (1 - pct));
var red = Math.floor(255 * pct);
if (table['type'] == "Cohesive Energy") {
var blue = Math.floor(255 * (1 - pct));
var red = Math.floor(255 * pct);
td.style.background = sprintf('rgb(%d,%d,0)', red, blue);
}
Here is the website http://muskoka.ices.utexas.edu/~fri/fridb/server.py
Here is some sample data:https://docs.google.com/file/d/0B5gGZ4-SD7-ZU0RCWkFwN3JBYWs/edit?usp=sharing

You might want to take a look at Chroma.js. It's a library that will handle the generation of color scales and the conversion of colors for a variety of ranges and color spaces.

RGB values varying with array values?

I have a project in which I am using d3js.I have to plot a line.But the twist is the color of line will vary with every array value(every 20px of line holds one element of following array).I have created lines but, I am facing problems with the colour intensity.I thought about for loops,but I am not getting exact results.I think I am not able to swith from one colour to another.
(for example--from dim red-->light red-->little dark red-->dark red)
I have a json with over 10k values.I have simplified my arrays for understanding purpose.
var array_1=[0.0,0.1,0.3,0.5,0.7,0.9]
var array_2=[0.02,0.04,0.06,0.08,0.09]
var array_3=[0.001,0.002,0.004,0.007,0.008]
MyQuestion:For any given color(red,blue,green,yellow etc etc),I should be able to plot the according to these array values in such a way that Greater the number will be,Intense the color will be.
Is it possible to create an algorithm that can manipulate the RGB values of any colour with array values that are numeric?If possible,it will be very kind of you to give some sample.

You just need to convert from YCbCr (YUV) to RGB since
the Y in YUV is luminescence it's as modifying the intensity of the color.
The formulas can be found on wikipedia here:
http://en.wikipedia.org/wiki/YCbCr
There is also an example of this implemented in JavaScript here:
http://www.mikekohn.net/file_formats/yuv_rgb_converter.php
For example on Micael Kohn's page you can try setting a color in RGB
and covert it to YUV. After that just lower or raise the Y value and
convert it to RGB. You will notice that it's like changing the
intensity.
EDIT:
Here you go, wrote an example for you, just click on the div
function yuv2rgb(Y,U,V){
R = Y + 1.4075 * (V - 128)
G = Y - 0.3455 * (U - 128) - (0.7169 * (V - 128))
B = Y + 1.7790 * (U - 128)
return { r:Math.floor(R) , g:Math.floor(G) , b:Math.floor(B)}
}
function rgb2yuv(R,G,B){
Y = R * 0.299000 + G * 0.587000 + B * 0.114000
U = R * -0.168736 + G * -0.331264 + B * 0.500000 + 128
V = R * 0.500000 + G * -0.418688 + B * -.081312 + 128
return { y:Math.floor(Y) , u:Math.floor(U) , v:Math.floor(V)}
}
http://jsfiddle.net/b3FCK/

Getting frequency from a pixel value for Web Audio API EQ

I'm creating an visual EQ using the Web Audio API and canvas. I am plotting frequencies in a logarithmic graph on a HTML5 Canvas using the following function:
function frequencyToPixel(freq){
var min = Math.log(graph.min)/Math.log(10)
, max = Math.log(graph.max)/Math.log(10)
, range = max-min
, pixel = (Math.log(freq)/Math.log(10) - min) / range * canvas.width;
return pixel;
}
I would like to also reverse this equation to get a function that returns the frequency that a particular pixel relates to. At the moment I'm using the following function but it's not producing the desired result. For example if I input 1000 into the above function it returns 434.93. I should therefore be able to put 434.93 into the below equation to return 1000;
function pixelToFrequency(pixel){
var min = Math.log(graph.min)/Math.log(10)
, max = Math.log(graph.max)/Math.log(10)
, range = max-min
, x = (pixel * canvas.width * range) + min
, frequency = Math.pow(10, x);
return frequency;
}
It's likely i've rearranged the equation in the wrong way so any help would be much appreciated.

The function below works out the frequency for a given pixel on the logarithmic-scaled canvas frequency graph:
function pixelToFrequency(pixel){
var min = Math.log(app.graph.min)/Math.log(10)
, max = Math.log(app.graph.max)/Math.log(10)
, range = max-min
, frequency = Math.pow(10, pixel * (range / canvas.width) + min)
return frequency;
}

pixel = (Math.log(freq)/Math.log(10) - min) / range * canvas.width
Try this?
freq = E((Math.log(10) * (pixel * (range / canvas.width)))+ Math.log(graph.min))
See if that helps at all. Where E is the Euler's Number raised to the parameters in parenthesis. It might be equivalent to what you have there, I didn't look to closely too be honest. It's worth a shot though.