So basically, I want to draw a curved average line over a certain amount of points of a time-series line chart. Like this:
I want it to span the entire length of the chart but I can't figure out how to calculate the start and end points because the average would (I think) be a point in the middle of each section. Looking at a stock chart with moving average you can see what I want to acheive:
I calculate the averages first by splitting the data array up into chunks based on a period of time. So if I start with:
[
{ time: 1, value: 2 },
{ time: 2, value: 4 },
{ time: 3, value: 5 },
{ time: 4, value: 7 },
]
I get to:
var averages = [
{
x: 1.5,
y: 3,
},
{
x: 3.5 (the average time)
y: 6 (the average value)
},
]
This is what I've tried where I end up with an incomplete line, one that doesnt start at the beginning of the chart and doesnt stop at the end, but stars and ends inside the chart at the first average time:
ctx.moveTo((averages[0].x), averages[0].y);
for(var i = 0; i < averages.length-1; i ++)
{
var x_mid = (averages[i].x + averages[i+1].x) / 2;
var y_mid = (averages[i].y + averages[i+1].y) / 2;
var cp_x1 = (x_mid + averages[i].x) / 2;
var cp_x2 = (x_mid + averages[i+1].x) / 2;
ctx.quadraticCurveTo(cp_x1, averages[i].y ,x_mid, y_mid);
ctx.quadraticCurveTo(cp_x2, averages[i+1].y ,averages[i+1].x, averages[i+1].y);
}
ctx.stroke();
How would you do this?
To get a moving mean you need to just get the mean of n points either side of the current sample.
For example
// array of data points
const movingMean = []; // the resulting means
const data = [12,345,123,53,134,...,219]; // data with index representing x axis
const sampleSize = 5;
for(var i = sampleSize; i < data.length - sampleSize; i++){
var total = 0;
for(var j = i- sampleSize; j < i + sampleSize; j++){
total += data[j];
}
movingMean[i] = total / (sampleSize * 2);
}
This method does not pull the mean forward giving the most accurate mean for each data point.
The problem with this method is that you do not get a mean for the first n and last n samples, where n is the number of samples either side of the mean.
You can do an alternative that will pull the mean forward a little but by applying a weighted mean you can reduce the bias a little
for(var i = sampleSize; i < data.length + Math.floor(sampleSize / 4); i++){
var total = 0;
var count = 0;
for(var j = sampleSize; j > 0; j --){
var index = i - (sampleSize - j);
if(index < data.length){
total += data[index] * j; // linear weighting
count += j;
}
}
movingMean[i-Math.floor(sampleSize / 4)] = total / count;
}
This method keeps that mean closer to the current sample end.
The example show a random data set and the two types of means plotted over it. Click to get a new plot. The red line is the moving mean and the blue is the weighted mean. Note how the blue line tends to follow the data a little slow.
The green line is a weighted mean that has a sample range 4 times greater than the other two.
// helper functions
const doFor = (count, callback) => {var i = 0; while (i < count) { callback(i ++) } };
const setOf = (count, callback) => {var a = [],i = 0; while (i < count) { a.push(callback(i ++)) } return a };
const rand = (min, max = min + (min = 0)) => Math.random() * (max - min) + min;
const randG = (dis, min, max) => {var r = 0; doFor(dis,()=>r+=rand(min,max)); return r / dis};
function getMinMax(data){
var min = data[0];
var max = data[0];
doFor(data.length - 1, i => {
min = Math.min(min,data[i+1]);
max = Math.max(max,data[i+1]);
});
var range = max-min;
return {min,max,range};
}
function plotData(data,minMax){
ctx.beginPath();
for(var i = 0; i < data.length; i++){
if(data[i] !== undefined){
var y = (data[i] - minMax.min) / minMax.range;
y = y *(ctx.canvas.height - 2) + 1;
ctx.lineTo(i/2,y);
}
}
ctx.stroke();
}
function getMovingMean(data,sampleSize){
const movingMean = []; // the resulting means
for(var i = sampleSize; i < data.length - sampleSize; i++){
var total = 0;
for(var j = i- sampleSize; j < i + sampleSize; j++){
total += data[j];
}
movingMean[i] = total / (sampleSize * 2);
}
return movingMean[i];
}
function getMovingMean(data,sampleSize){
const movingMean = []; // the resulting means
for(var i = sampleSize; i < data.length - sampleSize; i++){
var total = 0;
for(var j = i- sampleSize; j < i + sampleSize; j++){
total += data[j];
}
movingMean[i] = total / (sampleSize * 2);
}
return movingMean;
}
function getWeightedMean(data,sampleSize){
const weightedMean = [];
for(var i = sampleSize; i < data.length+Math.floor(sampleSize/4); i++){
var total = 0;
var count = 0;
for(var j = sampleSize; j > 0; j --){
var index = i - (sampleSize - j);
if(index < data.length){
total += data[index] * j; // linear weighting
count += j;
}
}
weightedMean[i-Math.floor(sampleSize/4)] = total / count;
}
return weightedMean;
}
const dataSize = 1000;
const sampleSize = 50;
canvas.width = dataSize/2;
canvas.height = 200;
const ctx = canvas.getContext("2d");
function displayData(){
ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height);
var dataPoint = 100;
var distribution = Math.floor(rand(1,8));
var movement = rand(2,20);
const data = setOf(dataSize,i => dataPoint += randG(distribution, -movement, movement));
const movingMean = getMovingMean(data, sampleSize);
const weightedMean = getWeightedMean(data, sampleSize*2);
const weightedMean1 = getWeightedMean(data, sampleSize*8);
var minMax = getMinMax(data);
ctx.strokeStyle = "#ccc";
plotData(data,minMax);
ctx.strokeStyle = "#F50";
plotData(movingMean,minMax);
ctx.strokeStyle = "#08F";
plotData(weightedMean,minMax);
ctx.strokeStyle = "#4C0";
plotData(weightedMean1,minMax);
}
displayData();
document.onclick = displayData;
body { font-family : arial; }
.red { color : #F50; }
.blue { color : #0AF; }
.green { color : #4C0; }
canvas { position : absolute; top : 0px; left :130px; }
<canvas id="canvas"></canvas>
<div class="red">Moving mean</div>
<div class="blue">Weighted mean</div>
<div class="green">Wide weighted mean</div>
<div>Click for another sample</div>
Related
last stone weight 2 solution in cpp
This is able to pass all test cases.
class Solution {
public:
int lastStoneWeightII(vector<int>& stones) {
int n = stones.size();
int total = 0;
for(int i = 0; i < n; i++){
total += stones[i];
}
int req = total / 2;
vector <bool> dp(req + 1, false);
dp[0] = true;
int reach = 0;
for(int i = 0; i < n; i++){
for(int j = req; j - stones[i] >= 0; j--){
dp[j] = dp[j] || dp[j - stones[i]];
if(dp[j]) reach = max(reach, j);
}
}
return total - (2 * reach);
}
};
I tried to replicate it in javascript and not able to pass
a simple test cases like [2,7,4,1,8,1]
Here is my attempt
var lastStoneWeightII = function(st) {
// stone #
const n = st.length;
// sum up
const sum = st.reduce((acc, curr) => {return acc+curr});
// e.g. half
const ha = Math.floor(sum / 2);
// half+1
const dp = Array(ha+1).fill(false);
// 1st ele = true
dp[0] = true;
// store tmp_max
let max = 0;
// loop element
for(let i=0; i<n; i++) {
// single element
const w = n[i];
// backward, half
for(let j=ha; j-w>=0; j--) {
// update condi
dp[j] = dp[j] || dp[j-w];
// never comes in
if(dp[j]) {
//test
console.log('++++ max', max, 'j', j)
max = Math.max(max, j);
}
}
}
return (sum - max) - max;
}
I'm trying to produce a function that starts with source image, generates noise, and then uses the noise to distort the image.
I start with creating the noise, and turning it into a vector field, Then I remap the coordinates, and pull the pixels out of the image at the correct coordinates.
Finally I re-combine the extracted pixels into an image.
So far my code is as follows:
function distort(sourceImage){
let vectorField = [];
var amount = 100;
var scale = 0.01;
for (x = 0; x < sourceImage.width; x++){
let row = [];
for (y = 0; y < sourceImage.height; y++){
let vector = createVector(amount*(noise(scale*x,scale*y)-0.5), 4*amount*(noise(100+scale*x,scale*y)-0.5))
row.push(vector);
}
vectorField.push(row);
}
var result = [];
sourceImage.loadPixels();
for (i = 0; i < sourceImage.width; i++){ //sourceImage.width
for (j = 0; j < sourceImage.height; j += 4){ //sourceImage.height
var res = vectorField[i][j];
//console.log(res);
var ii = constrain(floor(i + res.x), 0, sourceImage.width - 1);
var jj = constrain(floor(j + res.y), 0, sourceImage.height - 1);
//console.log(ii, jj);
result[i * sourceImage.width + j] = color(sourceImage.pixels[ii * sourceImage.width + jj], sourceImage.pixels[ii * sourceImage.width + jj + 1], sourceImage.pixels[ii * sourceImage.width + jj + 2], sourceImage.pixels[ii * sourceImage.width + jj + 3]);
}
}
//console.log(result)
//console.log(sourceImage.pixels[0 + sourceImage.width * 0])
for (n=0; n<sourceImage.width; n++) {
for(m=0; m<sourceImage.height; m++){
index = (n * sourceImage.width + m) * 4;
if (index >= 4194300){
index = 4194300;
}
sourceImage.pixels[index] = red(result[index]);
sourceImage.pixels[index + 1] = green(result[index]);
sourceImage.pixels[index + 2] = blue(result[index]);
sourceImage.pixels[index + 3] = alpha(result[index]);
}
}
sourceImage.updatePixels();
image(sourceImage, 0, 0, size, size);
}
Except that as a result, I'm getting 4 panels of noise across the top 4th of the canvas. The noise notably includes a lot of pixels that I know weren't in the source image, too (namely blue pixels; the image I'm trying to distort is red and white). The noise is sort of identifiable as having started as the source image, but distorted and with the aforementioned artefacts.
For comparison:
You do not process the vector field completely, you have to read each vector from the field. Actually you read just each 4th element of the vector
for (j = 0; j < sourceImage.height; j += 4)
for (j = 0; j < sourceImage.height; j++)
Further the computation of the source index is wrong. Note the control variable for the row (jj) has to be multiplied by the height. The index of the pixel in the array has to be multiplied by 4, because each pixel consists of 4 color channels:
ii * sourceImage.width + jj
(jj * sourceImage.width + ii) * 4
The computation of the target index is wrong, too:
index = (n * sourceImage.width + m) * 4;
index = (m * sourceImage.width + n) * 4;
Note, result contains 1 element for each pixel, byut sourceImage.pixels contains 4 elements for each pixel. Thus the index which reads from result and the index which access the target are different:
let result_i = m * sourceImage.width + n;
let target_i = result_i * 4;
For instance:
let result = [];
for (let j = 0; j < sourceImage.height; j++) {
for (let i = 0; i < sourceImage.width; i++) {
let res = vectorField[i][j];
let ii = constrain(floor(i + res.x), 0, sourceImage.width - 1);
let jj = constrain(floor(j + res.y), 0, sourceImage.height - 1);
let source_i = (jj * sourceImage.width + ii) * 4;
let col = color(
sourceImage.pixels[source_i],
sourceImage.pixels[source_i + 1],
sourceImage.pixels[source_i + 2],
sourceImage.pixels[source_i + 3]);
result.push(col);
}
}
for(let m = 0; m < sourceImage.height; m++) {
for (let n = 0; n < sourceImage.width; n++) {
let result_i = m * sourceImage.width + n;
let target_i = result_i * 4;
let col = result[result_i];
sourceImage.pixels[target_i] = red(col);
sourceImage.pixels[target_i + 1] = green(col);
sourceImage.pixels[target_i + 2] = blue(col);
sourceImage.pixels[target_i + 3] = alpha(col);
}
}
Ok, so I'm trying to code a Rectangle with multiple triangle strips joined together. according to:
http://www.corehtml5.com/trianglestripfundamentals.php
You need to take care of the triangles wrapping around when you have more than one row. However using the suggested algorithm in my code example I'm getting incorrect indice results.
Here is my example, with outputs.
I've tried copy/pasting the suggested algorithm but it doesn't seem to be returning correct results.
// Create the Index Points for the buffer array.
var rows=2;
var cols=3;
var grid = rows*cols;
var offset;
var pos = [];
var index = 0;
var mpOffset = 1;
for (var row = 0; row <= rows; ++row)
{
offsetY = row * (mpOffset / rows);
for (var col = 0; col <= cols; ++col)
{
offsetX = col * (mpOffset / cols);
pos[index+0] = (offsetX);
pos[index+1] = (offsetY);
index+=2;
}
}
log.info("pos="+JSON.stringify(pos)); // <-- Correct working good.
log.info("pos.length="+pos.length);
function initializeGrid(cols,rows)
{
var trianglestrip = [];
var RCvertices=2*cols*(rows-1);
var TSvertices=2*cols*(rows-1)+2*(rows-2);
var numVertices=TSvertices;
var j=0;
for(var i = 1; i <= RCvertices; i += 2)
{
trianglestrip[ j ] = (1 +i)/2;
trianglestrip[ j +1 ] = (cols*2 + i + 1) / 2;
if( trianglestrip[ j +1 ] % cols == 0)
{
if( trianglestrip[ j +1 ] != cols && trianglestrip[ j +1 ] != cols*rows )
{
trianglestrip[ j +2 ] = trianglestrip[ j +1 ];
trianglestrip[ j +3 ] = (1 + i + 2) / 2;
j += 2;
}
}
j += 2;
}
return trianglestrip;
}
var triStrip = initializeGrid(cols,rows);
log.info("triStrip="+JSON.stringify(triStrip)); // <-- Bad Not working.
log.info("triStrip.length="+triStrip.length);
// Generating the actual Point strip.
var actualStrip = [];
for (var i = 0 ; i < triStrip.length; ++i)
{
actualStrip.push(pos[(triStrip[i]-1)*2+0]);
actualStrip.push(pos[(triStrip[i]-1)*2+1]);
}
log.info("actualStrip="+JSON.stringify(actualStrip));
log.info("actualStrip.length="+actualStrip.length);
Indices should be:
1, 5, 2, 6, 3, 7, 4, 8, 8, 5, 5, 9, 6, 10, 7, 11, 8, 12
I ended up re-creating the function to calculate the triangle strip indices. Have not fully tested it but it can re-create the 3x2 grid in the example from the website.
Here is the code:
// This calculates the triangle points in a rectangular triangle strip.
// Used for 3D Webgl texture mapping.
// Copyright Joshua Langley 2019.
var rows=2;
var cols=3;
var grid = rows*cols;
var offset;
var pos = [];
var index = 0;
var mpOffset = 1;
var offsetX, offsetY;
for (var row = 0; row <= rows; ++row)
{
offsetY = row * (mpOffset / rows);
for (var col = 0; col <= cols; ++col)
{
offsetX = col * (mpOffset / cols);
pos[index+0] = (offsetX);
pos[index+1] = (offsetY);
index+=2;
}
}
log.info("pos="+JSON.stringify(pos));
log.info("pos.length="+pos.length);
var rows=rows+1,cols=cols+1; // Important this counting Points not Squares.
var grid = rows*cols;
var offset;
var indices = [];
var indice = 0;
var offset;
var doublePoints = false;
var tPoint, bPoint;
for (var row = 0; row < rows; ++row)
{
for (var col = 0; col < (cols-1); ++col)
{
offset = row * rows + col;
tPoint = offset+1;
bPoint = offset+cols+1;
if (bPoint > grid)
continue;
indices.push(tPoint);
indices.push(bPoint);
if (offset > 0 && (bPoint+1) < grid && (offset+1) % cols == 0)
{
indices.push(bPoint);
indices.push(tPoint+1);
}
}
}
log.info("indices="+JSON.stringify(indices)); // Expected Result
log.info("indices.length="+indices.length);
var actualStrip = [];
for (var i = 0 ; i < indices.length; ++i)
{
actualStrip.push(pos[(indices[i]-1)*2+0]);
actualStrip.push(pos[(indices[i]-1)*2+1]);
}
log.info("actualStrip="+JSON.stringify(actualStrip));
log.info("actualStrip.length="+actualStrip.length);
https://codepen.io/aholston/pen/ZJbrjd
The codepen link has commented code as well as actual instructions in HTML
Otherwise.... what I ultimately have to do is write a function that takes two params(a and b) and takes all the numbers between those two params (a-b) and put every number that can be added to the consecutive fowers and be equal to that number into a new array. Ex: 89 = 8^1 + 9^2 = 89 or 135 = 1^1 + 3^2 + 5^3 = 135
function sumDigPow(a, b) {
// Your code here
var numbers = [];
var checkNum = [];
var finalNum = [];
var total = 0;
for (var i = 1; i <= b; i++) {
if (i >= a && i <= b) {
numbers.push(i);
}
}
for (var x = 0; x < numbers.length; x++) {
var checkNum = numbers[x].toString().split('');
if (checkNum.length == 1) {
var together = parseInt(checkNum);
finalNum.push(together);
} else if (checkNum.length > 1) {
var together = checkNum.join('');
var togNumber = parseInt(together);
for (var y = checkNum.length; y > 0; y--) {
total += Math.pow(checkNum[y - 1], y);
}
if (total == togNumber) {
finalNum.push(togNumber);
}
}
}
return finalNum;
}
try this:
function listnum(a, b) {
var finalNum = [];
for (var i = a; i <= b; i++) {
var x = i;
var y = i;
var tot = 0;
j = i.toString().length;
while (y) {
tot += Math.pow((y%10), j--);
y = Math.floor(y/10);
}
if (tot == x)
finalNum.push(i);
}
return finalNum;
}
console.log(listnum(1, 200));
Okay, after debugging this is what I learned.
for (var y = checkNum.length; y > 0; y--) {
total += Math.pow(checkNum[y - 1], y);
}
if (total == togNumber) {
finalNum.push(togNumber);
}
}
}
return finalNum;
}
Everytime this loop happened, I neglected to reset the 'total' variable back to 0. So I was never getting the right answer for my Math.pow() because my answer was always adding to the previous value of total. In order to fix this, I added var total = 0; after i decided whether or not to push 'togNumber' into 'finalNum.' So my code looks like this..
for (var y = checkNum.length; y > 0; y--) {
total += Math.pow(checkNum[y - 1], y);
}
if (total == togNumber) {
finalNum.push(togNumber);}
}
var total = 0;
}
return finalNum;
}
I have this method to generate me random colors for font:
function getRandomRolor() {
var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters[Math.round(Math.random() * 15)];
}
return color;
}
The problem is that the font is always on white background, I want to generate dark colors.
Is it possible?
Thanks
As you know RGB at 0,0,0 is black the darkest and it goes toward getting light until (255,255,255) so you can stop it to go above 100, to get only dark colors or say 9 in hex:
Here is jsFiddle
function getDarkColor() {
var color = '#';
for (var i = 0; i < 6; i++) {
color += Math.floor(Math.random() * 10);
}
return color;
}
Take any random digit from 0-5 as the first digit of your color and then choose the rest of the five digits using your above code.
JS Fiddle: http://jsfiddle.net/xP5v8/
var color,
letters = '0123456789ABCDEF'.split('')
function AddDigitToColor(limit)
{
color += letters[Math.round(Math.random() * limit )]
}
function GetRandomColor() {
color = '#'
AddDigitToColor(5)
for (var i = 0; i < 5; i++) {
AddDigitToColor(15)
}
return color
}
You could use a custom function that takes a hex and darkens it by the percent lum. You can modify it to return whatever you want back
function ColorLuminance(hex, lum) {
// validate hex string
hex = String(hex).replace(/[^0-9a-f]/gi, '');
if (hex.length < 6) {
hex = hex[0]+hex[0]+hex[1]+hex[1]+hex[2]+hex[2];
}
lum = lum || 0;
// convert to decimal and change luminosity
var rgb = "#", c, i;
for (i = 0; i < 3; i++) {
c = parseInt(hex.substr(i*2,2), 16);
c = Math.round(Math.min(Math.max(0, c + (c * lum)), 255)).toString(16);
rgb += ("00"+c).substr(c.length);
}
return rgb;
}
You could also just use hsl (Hugh, Saturation, Luminosity or Lightness). The hsl link actually goes through the above code.
// seperate array by index
// [0, 1, 2, 3], 2 => [2, 3, 1, 0]
function tail(arr, ind){
let mhs, lhs;
if(arr.length / 2 > ind){
mhs = arr.length - 1 - ind;
lhs = ind;
}else{
mhs = ind;
lhs = arr.length - 1 - ind;
}
let nd = [arr[ind]];
for(let i = 0; i < lhs; i++){
nd.push(arr[ind+i+1]);
nd.push(arr[ind-i-1]);
}
for(let i = 0; i < mhs - lhs; i++){
nd.push(arr[i]);
}
return nd;
}
// yield optimization
// 6=>6 6=>3
// 5=>5 5=>3
// 4=>4 4=>2
// 3=>3 3=>2
// 2=>2 2=>1
// 1=>1 1=>1
// 21 12
function dense(len, den){
let st = Math.ceil(len / den);
let nd = [];
for(let i = 0; i < st; i++){
for(let j = 0; j < den; j++){
nd.push(st - i);
}
}
if(len % 2 !== 0){
nd.shift();
}
return nd;
}
// shift the weight to certain part of array by index
// de controls the rate of differing
function shift_weight(arr, ind, de){
let ta = tail(arr, ind);
let nd = [];
let den = dense(arr.length, de)
for(let i = 0; i < ta.length; i++){
for(let j = 0; j < den[i]; j++){
nd.push(ta[i]);
}
}
return nd;
}
function parseDarkHex(den){
let hexcode = '0123456789abcdef';
let ocean = shift_weight(Array.from({length: 16}, (x, i) => hexcode[i]), 0, den);
return '#' + Array.from({length: 6}).map(ud=>ocean[Math.floor(Math.random() * ocean.length)]).join('');
}
function parseLightHex(den){
let hexcode = '0123456789abcdef';
let ocean = shift_weight(Array.from({length: 16}, (x, i) => hexcode[i]), 16, den);
return '#' + Array.from({length: 6}).map(ud=>ocean[Math.floor(Math.random() * ocean.length)]).join('');
}
// 2~8, the smaller the more accurate, the larger the faster
console.log(parseDarkHex(4))
// #51baaa
// #046d1c
// #003183
This allows the existence of large hex value such as f, c, b, etc, but at a low occurrence.
1500 bytes for you. But works awesome!
I don't think my solution is represented here, so I will add it in (even though I am very late to the game).
I am just subtracting from the 255 random range on each value. Seems to work well and is very simple. If you wanted RandomColorLight, just add the offset value to the random result of each component.
You can also combine the two into one RandomColorRange method very easily.
public static Color RandomColorDark(int offset)
{
var maxValue = 256 - offset;
return Color.FromArgb(_random.Next(maxValue), _random.Next(maxValue), _random.Next(maxValue));
}
public static Color RandomColorLight(int offset)
{
var maxValue = 256 - offset;
return Color.FromArgb(_random.Next(maxValue) + offset, _random.Next(maxValue) + offset, _random.Next(maxValue) + offset);
}
Sorry, my solution is not javascript. It is C#, but the logic should be easy enough to understand.