Related
I was trying to Build a spectrum and waterfall Plot HTML canvas. After a long research and googling i found this SOURCE CODE
Now i am trying to learn how this code works. i added 3 points on the spectrum using drawPoint2 function.
Can some one please Guild me. thank you.
"use strict";
var colors = [
"rgba(60, 229, 42, 0.31)",
"rgba(60, 229, 42, 0.31)",
"rgba(60, 229, 42, 0.31)",
"rgba(60, 229, 42, 0.31)",
"rgba(60, 229, 42, 0.31)",
"rgba(252, 182, 3, 0.31)",
"rgba(3, 103, 252, 0.31)",
"rgba(219, 3, 252, 0.31)",
"rgba(252, 3, 49, 0.31)",
"rgba(221, 48, 232, 0.31)",
];
var closeEnough = 5;
var crop = 150;
var data_sb = -10;
var canvas = document.getElementById("spectrumSM");
Spectrum.prototype.countDecimals = function (value) {
if (Math.floor(value) !== value)
return value.toString().split(".")[1].length || 0;
return 0;
};
Spectrum.prototype.map = function (x, in_min, in_max, out_min, out_max) {
return Math.round(
((x - in_min) * (out_max - out_min)) / (in_max - in_min) + out_min
);
};
Spectrum.prototype.updateSpectrumRatio = function () {
this.spectrumHeight = Math.round(
(this.canvas.height * this.spectrumPercent) / 100.0
);
// create a slop
this.gradient = this.ctx.createLinearGradient(0, 0, 0, this.spectrumHeight);
for (var i = 0; i < this.colormap.length; i++) {
var c = this.colormap[this.colormap.length - 1 - i];
this.gradient.addColorStop(
i / this.colormap.length,
"rgba(220,220,220,0.2)"
); //hardcode the patch above Xaxis
}
};
Spectrum.prototype.resize = function () {
var width = this.canvas.clientWidth;
var height = this.canvas.clientHeight;
if (this.canvas.width != width || this.canvas.height != height) {
this.canvas.width = width;
this.canvas.height = height;
this.updateSpectrumRatio();
for (var z = 0; z < this.tags.length; z++) {
this.tags[z].StayX = this.map(
this.tags[z].xval,
this.cutfromArray,
this.orignalArrayLength - this.cutfromArray,
0 + crop,
width
); ///////
}
}
if (this.axes.width != width || this.axes.height != this.spectrumHeight) {
this.axes.width = width;
this.axes.height = this.spectrumHeight;
this.updateAxes();
}
};
Spectrum.prototype.updateAxes = function () {
var width = this.ctx_axes.canvas.width + 100; //width of x axis izz
var height = this.ctx_axes.canvas.height;
this.maxScaleX = this.centerHz + this.spanHz / 2;
this.minScaleX = this.centerHz - this.spanHz / 2;
// Clear and fill with black
this.ctx_axes.fillStyle = "black";
this.ctx_axes.fillRect(0, 0, width, height);
// Draw axes
this.ctx_axes.font = "12px Arial";
this.ctx_axes.fillStyle = "white";
this.ctx_axes.textBaseline = "middle";
this.ctx_axes.textAlign = "center"; //change izz
var step = 10; //steps for y-axis
for (var i = this.max_db - 10; i >= this.min_db + 10; i -= step) {
var y = height - this.squeeze(i, 0, height);
this.ctx_axes.fillText(i, 20, y); // height - y
this.ctx_axes.beginPath();
this.ctx_axes.moveTo(22, y); //y axis stroked set izz
this.ctx_axes.lineTo(width, y);
this.ctx_axes.strokeStyle = "rgba(255, 255, 255, 0.15)"; //changed strokes izz
this.ctx_axes.stroke();
}
this.ctx_axes.textBaseline = "bottom";
// change X-axis
var x_axisSteps = 10;
for (var i = 0; i < x_axisSteps; i++) {
var x = Math.round((width - crop) / x_axisSteps - 1) * i + crop;
if (this.spanHz > 0) {
var adjust = 0;
if (i == 0) {
this.ctx_axes.textAlign = "left";
adjust = 3;
} else if (i == 10) {
this.ctx_axes.textAlign = "right";
adjust = -3;
} else {
this.ctx_axes.textAlign = "center";
}
//Graph points in whole points
var freq = this.centerHz + (this.spanHz / 10) * (i - 5);
if (freq > 1e9) {
freq = freq / 1e9;
if (this.countDecimals(freq) > 4) {
freq = freq.toFixed(0);
}
freq = freq + " GHz";
} else if (freq > 1e6) {
freq = freq / 1e6;
if (this.countDecimals(freq) > 4) {
freq = freq.toFixed(0);
}
freq = freq + " MHz"; //this function executed
} else {
if (this.countDecimals(freq) > 2) {
freq = freq.toFixed(0);
}
freq = freq + " MHz";
}
this.ctx_axes.fillText(freq, x - 130, height); // x axia height change izz plus values placment
}
//console.log("ctx_axes : ", this.ctx_axes);
this.ctx_axes.beginPath();
this.ctx_axes.moveTo(x, 0);
this.ctx_axes.lineTo(x, height);
this.ctx_axes.strokeStyle = "rgba(200, 200, 200, 0.2)"; //straight gridline on x axis izza
this.ctx_axes.stroke();
}
// const input = prompt("What's your name?");
};
Spectrum.prototype.toggleColor = function () {
this.colorindex++;
if (this.colorindex >= colormaps.length) this.colorindex = 0;
this.colormap = colormaps[this.colorindex];
this.updateSpectrumRatio();
};
Spectrum.prototype.setCenterHz = function (hz) {
this.centerHz = hz;
if (this.center != 0 && this.center != this.centerHz) {
this.centerHz = this.center;
}
this.updateAxes();
};
Spectrum.prototype.setSpanHz = function (hz) {
this.orignalSpanHz = hz;
this.spanHz = hz;
if (this.zoom != 0 && this.spanHz != this.zoom) {
this.spanHz = this.zoom;
}
this.updateAxes();
};
Spectrum.prototype.squeeze = function (value, out_min, out_max) {
if (value <= this.min_db) {
return out_min;
} else if (value >= this.max_db) {
return out_max;
} else {
return Math.round(
((value - this.min_db) / (this.max_db - this.min_db)) * out_max
);
}
};
Spectrum.prototype.squeeze2 = function (value, out_min, out_max) {
if (value <= 30000000) {
return out_min;
} else if (value >= 300000000) {
return out_max;
} else {
return Math.round(
((value - 30000000) / (300000000 - 30000000)) * out_max
);
}
};
Spectrum.prototype.drawRectSpectrogram = function (y, h) {
this.ctx.beginPath();
this.ctx.fillStyle = colors[this.rectColor]; //"rgba(60, 229, 42, 0.31)"; //rect color
this.ctx.strokeStyle = "green";
this.ctx.rect(this.clickRectX, y, this.clickRectWidth, h);
this.ctx.stroke();
this.ctx.fill();
this.ctx.closePath();
};
Spectrum.prototype.threshold = function (y, width, color) {
this.ctx.beginPath();
this.ctx.strokeStyle = color;
this.ctx.lineWidth = 2; //threshold line width
this.ctx.beginPath();
this.ctx.moveTo(0, y);
this.ctx.lineTo(width + crop, y);
this.ctx.stroke();
this.ctx.closePath();
this.ctx.lineWidth = 1;
};
function drawPoint2(can, x, y, label) {
can.beginPath();
can.arc(x, y, 5, 0, 2 * Math.PI);
can.fillStyle = "red";
can.fill();
can.fillText(label, x + 10, y);
can.stroke(); // it creates X axies and
}
Spectrum.prototype.drawSpectrum = function (bins) {
//get canvas height and width to draw spectrum ayaz
var width = this.ctx.canvas.width;
var height = this.ctx.canvas.height;
//console.log("spectrum width and height : "+width+" "+ height);
// width of Green Color ayaz
this.ctx.lineWidth = 1; //Amplitude green line width .
//All of the points are 119 nut few points are 118 and few 120 ayaz
if (!this.binsAverage || this.binsAverage.length != bins.length) {
//console.log('this.binsAverage ', this.binsAverage );
this.binsAverage = bins;
} else {
for (var i = 0; i < bins.length; i++) {
this.binsAverage[i] +=
(1 - this.averaging) * (bins[i] - this.binsAverage[i]);
}
}
bins = this.binsAverage;
//Do not draw anything if spectrum is not visible
if (this.ctx_axes.canvas.height < 1) return;
//////////////////////////////////////////////////////////////Creation of X and Y axis completed
// Copy axes from offscreen canvas
this.ctx.drawImage(this.ctx_axes.canvas, -1, -1); // create Spectrums X and Y axis
// // Scale for FFT
this.ctx.save(); // saves sppectrum previous stage
//////////////////////////////////////////////////////////////Creation of X and Y axis completed
this.ctx.scale(width / this.wf_size, 1); //green line visiblity izza
var peakY = this.spectrumHeight;
// Draw FFT bins
this.ctx.beginPath();
this.offset = Math.round(
this.map(crop, 0, this.ctx.canvas.width + 6000, 0, this.wf_size)
); // green line axis set izza
//console.log('this.offset : ', this.offset);
console.log(
"X and Y are : ",
-1 + this.offset + " " + this.spectrumHeight + 0
);
this.ctx.moveTo(-1 + this.offset, this.spectrumHeight + 0); //change for waterfall izza
// above line is the address of left bottom corner of spectrum
// console.log(
// "clkkkkkkkkkkkkkkk : ",
// this.clickRectX+
// crop+
// width+
// this.minScaleX+
// this.maxScaleX
// );
var rangeMin = this.map(
this.clickRectX,
crop,
width,
this.minScaleX,
this.maxScaleX
);
var rangeMax = this.map(
this.clickRectWidth + this.clickRectX,
crop,
width,
this.minScaleX,
this.maxScaleX
);
if (rangeMin > rangeMax) {
var temp;
temp = rangeMax;
rangeMax = rangeMin;
rangeMin = temp;
}
var max = 100000000;
this.scaleY = this.map(this.threshY, this.min_db, this.max_db, height / 2, 0); // 0, height/2 // height of threshold izza
this.detectedFrequency.length = 0;
// console.log('bins are ', bins);
//console.log('new array ');
for (var i = 0; i < bins.length; i++) {
// if ( parseFloat( bins[i]) > -100 ) {
// console.log("bins : ", bins[i]);
// const input = prompt("What's your name?");
// alert(`Your name is ${input}`);
// }
var y =
this.spectrumHeight - 1 - this.squeeze(bins[i], 0, this.spectrumHeight);
peakY = this.squeeze(bins[i], 0, this.spectrumHeight);
if (y > this.spectrumHeight - 1) {
y = this.spectrumHeight - 1;
console.log("Y has chnaged : ", y);
}
if (y < 0) {
y = 0;
console.log("y=0");
}
if (i == 0) {
this.ctx.lineTo(-1 + this.offset, y);//responsible for height of green line
}
// green lines are created here ayaz
// create green lines
// important
//drawPoint2(this.ctx ,i + this.offset, y);
this.ctx.lineTo(i + this.offset, y); // that what point we start drawing green horizental green line
// console.log(
// "Starting Line 1 i " +
// i +
// " X : " +
// parseInt(i + this.offset) +
// " y : " +
// y
// );
if (i == bins.length - 1) {
//drawPoint2(this.ctx ,i + this.offset, y);
this.ctx.lineTo(this.wf_size + 1 + this.offset, y);
// console.log(
// "Second 2 i == bins.length - 1 i " +
// i +
// " Drawingg -1 + this.offset : " +
// parseInt(i + this.offset) +
// " y : " +
// y
// );
}
for (var z = 0; z < this.tags.length; z++) {
if (
i + this.cutfromArray == this.tags[z].xval &&
this.check_click == true
) {
this.tags[z].tagY = y;
this.tags[z].yval = Math.round(bins[i]);
this.tags[z].displayX = Math.round(
this.map(i, 0, bins.length, this.minScaleX, this.maxScaleX)
);
}
}
if (y < max) {
max = y;
}
let newVal = Math.round(
this.map(i, 0, bins.length, this.minScaleX, this.maxScaleX)
);
if (this.check_bar) {
if (newVal < rangeMax && newVal > rangeMin) {
if (y < this.scaleY) {
var obj = new Object();
obj.x = newVal;
obj.y = Math.round(bins[i]);
obj.count = 1;
var check = true;
for (var j = 0; j < this.threshRange.length; j++) {
if (
this.threshRange[j].x == obj.x &&
this.threshRange[j].y == obj.y
) {
this.threshRange[j].count++;
check = false;
}
}
if (check) {
let tableRows = document
.getElementById("thresh-table-body")
.getElementsByTagName("tr").length;
if (tableRows < 100) {
this.threshRange.push(obj);
// filling table
let tbody = document.getElementById("thresh-table-body");
let tr = document.createElement("tr");
let td1 = document.createElement("td");
let td2 = document.createElement("td");
let td3 = document.createElement("td");
td1.innerHTML = obj.x; //+" Hz"
td2.innerHTML = obj.y;
td3.innerHTML = obj.count;
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
tbody.appendChild(tr);
}
} else {
// update table count
for (let c = 0; c < this.threshRange.length; c++) {
let tableRows =
document.getElementById("thresh-table-body").rows[c].cells;
if (
tableRows[0].innerHTML == obj.x &&
tableRows[1].innerHTML == obj.y
) {
let countValue = Number(tableRows[2].innerHTML);
countValue++;
tableRows[2].innerHTML = countValue;
}
}
}
}
}
} else {
if (y < this.scaleY) {
var obj = new Object();
obj.x = newVal;
obj.y = Math.round(bins[i]);
obj.count = 1;
var check = true;
for (var j = 0; j < this.threshRange.length; j++) {
if (
this.threshRange[j].x == obj.x &&
this.threshRange[j].y == obj.y
) {
this.threshRange[j].count++;
check = false;
}
}
}
}
}
// this.ctx.beginPath();
// this.ctx.arc(100, 75, 20, 0, 1 * Math.PI);
// this.ctx.stroke();
//this.ctx.strokeRect(1800,10, 40, 190);
function containsObject(obj, list) {
var i;
for (i = 0; i < list.length; i++) {
if (list[i] === obj) {
return true;
}
}
return false;
}
this.ctx.fillStyle = "rgba(0, 0, 0, 0.11)";
// drawPoint2(this.ctx ,
// this.wf_size + 1 + this.offset,
// this.spectrumHeight + 1
// );
this.ctx.lineTo(this.wf_size + 1 + this.offset, this.spectrumHeight + 1);
// console.log(
// "thired 3 this.wf_size + 1 + this.offset : " +
// parseInt(this.wf_size + 1 + this.offset) +
// " this.spectrumHeight + 1 : " +
// parseInt(this.spectrumHeight + 1)
// );
// drawPoint2(this.ctx ,
// this.wf_size + this.offset,
// this.spectrumHeight
// );
this.ctx.lineTo(this.wf_size + this.offset, this.spectrumHeight );
// console.log(
// "Forth this.wf_size + this.offset : " +
// parseInt(this.wf_size + this.offset) +
// " y : " +
// y
// );
if (y < 230 && y > 245) {
console.log("foundddddddddddddd");
}
this.ctx.closePath();
this.ctx.restore();
this.ctx.strokeStyle = "#259a00"; //color of spectrum green
this.ctx.stroke(); // it creates X axies and
/////////////////////////////////////////////////////////////////////////green ended
if (this.spectrumColorCheck) {
this.ctx.fillStyle = this.gradient; //chnage color of under line chart
} else {
this.ctx.fillStyle = "rgba(0, 0, 0, 0.0)";
}
this.ctx.fill();
if (this.check_bar) {
this.drawRectSpectrogram(0, height);
}
var colorTh = "#cc8315"; //By uncomment Change the threshold line color change
this.threshold(this.scaleY, width, colorTh); // yellow light
if (this.check_click == true) {
for (let c = 0; c < this.tags.length; c++) {
this.drawTag(
this.tags[c].StayX,
this.tags[c].tagY,
this.tags[c].displayX,
this.tags[c].yval
);
}
if (this.removeTagCheck == true) {
closeEnough = 30;
for (var z = 0; z < this.tags.length; z++) {
if (this.checkCloseEnough(this.StayX, this.tags[z].StayX + 15)) {
this.tags.splice(z, 1);
z--;
}
}
}
}
closeEnough = 5;
// span hz commented
if (this.updateValueCheck) {
if (this.countDecimals(this.threshY) > 2) {
this.threshY = this.threshY.toFixed(2);
}
this.updateValueCheck = false;
}
var arrt = [ -100000000 , 40000000,35000000];
this.spectrumWidth = Math.round(
(this.canvas.width * this.spectrumPercent) / 100.0
);
for (var k = 0; k < 4; k++) {
var alpha =
this.spectrumHeight - 620 - this.squeeze2(arrt[k], 0, this.spectrumWidth);
drawPoint2(this.ctx, alpha + 600, 150, "A");
}
// draw separate lines
// for (var k=0;k< 4; k++){
// drawPoint2(this.ctx, "200000000", "-80");
// drawPoint2(this.ctx,"100000000", "-80");
// drawPoint2(this.ctx,"35000000", "-80");
// }
//console.log('this.ctx : ',this.ctx);
};
Spectrum.prototype.addData = function (data, bmp) {
if (!this.paused) {
if (data.length > 32768) {
data = this.sequenceResize(data, 32767);
}
this.orignalArrayLength = data.length;
if (this.orignalSpanHz > this.spanHz) {
data = data.slice(
this.cutfromArray,
this.orignalArrayLength - this.cutfromArray
);
}
if (data.length != this.wf_size) {
this.wf_size = data.length;
if (data.length > 32767) {
this.ctx_wf.canvas.width = 32767;
} else {
this.ctx_wf.canvas.width = data.length;
}
this.ctx_wf.fillStyle = "black";
this.ctx_wf.fillRect(0, 0, this.wf.width, 0); //strokes of waterfall
for (var z = 0; z < this.tags.length; z++) {
this.tags[z].StayX = this.map(
this.tags[z].xval,
this.cutfromArray,
this.orignalArrayLength - this.cutfromArray,
crop,
this.ctx.canvas.width
);
}
}
this.drawSpectrum(data);
// this.addWaterfallRowBmp(bmp);
// this.addWaterfallRow(data);
this.resize();
}
};
function Spectrum(id, options) {
// Handle options
this.centerHz = options && options.centerHz ? options.centerHz : 0;
this.spanHz = options && options.spanHz ? options.spanHz : 0;
this.wf_size = options && options.wf_size ? options.wf_size : 0;
this.wf_rows = options && options.wf_rows ? options.wf_rows : 50;
this.spectrumPercent =
options && options.spectrumPercent ? options.spectrumPercent : 25;
this.spectrumPercentStep =
options && options.spectrumPercentStep ? options.spectrumPercentStep : 5;
this.averaging = options && options.averaging ? options.averaging : 0.5;
this.rectColor = options && options.rectColor ? options.rectColor : 0;
// Setup state
this.paused = false;
this.fullscreen = true;
this.min_db = -140;
this.max_db = -20;
this.spectrumHeight = 0;
// Colors
this.colorindex = 2;
this.colormap = colormaps[0];
// Create main canvas and adjust dimensions to match actual
this.canvas = document.getElementById("spectrumSM");
canvas.height = this.canvas.clientHeight;
this.canvas.width = this.canvas.clientWidth;
this.ctx = this.canvas.getContext("2d");
this.checkclick = false;
this.clickRectWidth = 1000;
this.dragL = true;
this.dragR = true;
// this.ctx.globalAlpha = 0.1;
this.drag = true;
this.click_x = 0;
this.click_y = 0;
this.check_click = true;
this.threshY = -70;
this.StayX = -10;
this.scaleY = 0;
//for change waterfall design
this.threshCheck = true;
this.removeTagCheck = true;
this.spectrumColorCheck = true;
this.check_bar = true;
this.updateValueCheck = true;
this.tags = [];
this.addTagsCheck = true;
this.maxScaleX = 0;
this.minScaleX = 0;
this.orignalArrayLength = 0;
this.zoom = this.spanHz;
this.center = this.centerHz;
this.threshRange = [];
this.detectedFrequency = [];
this.offset = 10;
this.arraySizeto = 0;
this.orignalSpanHz = 0;
this.cutfromArray = 0;
this.ctx.fillStyle = "black";
this.ctx.fillRect(10, 10, this.canvas.width, this.canvas.height);
// Create offscreen canvas for axes
this.axes = document.createElement("canvas");
this.axes.id = "myCheck";
this.axes.height = 1; // Updated later
this.axes.width = this.canvas.width;
this.ctx_axes = this.axes.getContext("2d");
function myFunction() {
this.style.fontSize = "40px";
}
// Create offscreen canvas for waterfall
this.wf = document.createElement("canvas");
this.wf.height = this.wf_rows;
this.wf.width = this.wf_size;
this.ctx_wf = this.wf.getContext("2d");
// Trigger first render
this.updateSpectrumRatio();
this.resize();
}
Here showing value of spectrum at specific point via click and zoom in/ zoom out functionality.
var closeEnough = 5;
var crop = 150;
var data_sb = -10;
var canvas = document.getElementById("spectrumSM");
Spectrum.prototype.mousedown = function (evt) {
this.checkclick = true;
if (this.checkCloseEnough(this.click_x-3, this.clickRectX)) {
this.dragR = false;
this.dragL = true;
} else if (
this.checkCloseEnough(this.click_x-3, this.clickRectX + this.clickRectWidth)
) {
this.dragR = true;
this.dragL = false;
} else if (this.checkCloseEnough(this.click_y-3, this.scaleY)) {
this.drag = true;
}
};
Spectrum.prototype.mouseup = function (evt) {
this.checkclick = false;
this.dragL = false;
this.dragR = false;
this.drag = false;
if (evt.button === "right") {
this.tags = [];
}
};
Spectrum.prototype.mousemove = function (evt) {
var rect = this.canvas.getBoundingClientRect();
this.click_x = evt.clientX - rect.left;
this.click_y = evt.clientY - rect.top;
closeEnough = Math.abs(this.clickRectWidth);
if (this.dragL == false && this.dragR == false && this.drag == false) {
if (
this.checkclick == true &&
this.checkCloseEnough(
this.click_x,
this.clickRectX + this.clickRectWidth / 2
)
) {
this.clickRectX = this.click_x - this.clickRectWidth / 2;
}
} else if (this.dragL) {
this.clickRectWidth += this.clickRectX - this.click_x;
this.clickRectX = this.click_x;
} else if (this.dragR) {
this.clickRectWidth = -(this.clickRectX - this.click_x);
} else if (this.drag && this.threshCheck) {
this.updateValueCheck = true;
this.threshY = this.map(
this.click_y,
this.canvas.height / 2,
0,
this.min_db,
this.max_db
); // this.max_db, this.min_db
}
closeEnough = 10;
};
Spectrum.prototype.click = function (evt) {
// change izza
this.check_click = true;
this.StayX = this.click_x;
console.log('tag list : ',this.addTagsCheck);
if (this.addTagsCheck == true && this.StayX > 3) {
var tag = {
StayX: this.click_x,
tagY: 0,
yval: 0,
xval: Math.round(
this.map(
this.click_x,
28,
this.ctx.canvas.width,
this.cutfromArray,
this.orignalArrayLength - this.cutfromArray
)
),
displayX: 0,
};
this.tags.push(tag);
}
};
Spectrum.prototype.wheel = function (evt) {
this.zoom = this.spanHz;
var inc;
if (this.arraySizeto == 0) {
inc = Math.round(this.orignalArrayLength * 0.05);
} else {
inc = Math.round(this.arraySizeto * 0.05);
}
let zoomInc = 0;
if (this.orignalSpanHz > this.orignalArrayLength) {
zoomInc = this.orignalSpanHz / this.orignalArrayLength;
} else {
zoomInc = this.orignalArrayLength / this.orignalSpanHz;
}
if (evt.deltaY > 0) {
if (
this.orignalSpanHz - (zoomInc * this.cutfromArray - inc * 2) <
this.orignalSpanHz &&
this.cutfromArray - inc >= 0
) {
this.cutfromArray = this.cutfromArray - inc;
this.zoom = this.orignalSpanHz - zoomInc * this.cutfromArray * 2;
} else if (
this.orignalSpanHz + zoomInc * this.cutfromArray * 2 >=
this.orignalSpanHz &&
this.cutfromArray - inc <= 0
) {
this.zoom = this.orignalSpanHz;
this.cutfromArray = 0;
}
} else if (evt.deltaY < 0) {
if (
this.orignalSpanHz - (zoomInc * this.cutfromArray + inc * 2) > inc &&
this.orignalArrayLength - this.cutfromArray * 2 - inc * 2 >
this.ctx.canvas.width
) {
this.cutfromArray = this.cutfromArray + inc;
this.zoom = this.orignalSpanHz - zoomInc * this.cutfromArray * 2;
}
}
this.arraySizeto = this.orignalArrayLength - this.cutfromArray * 2;
this.maxScaleX = this.centerHz + this.zoom / 20;
this.minScaleX = this.centerHz - this.zoom / 20;
};
Spectrum.prototype.undoTag = function () {
this.tags.pop();
};
Spectrum.prototype.checkCloseEnough = function (p1, p2) {
return Math.abs(p1 - p2) < closeEnough;
};
Spectrum.prototype.drawTag = function (locx, locy, xval, yval) {
this.ctx.beginPath();
this.ctx.strokeStyle = "#cc8315";
let freq = xval;
if (freq > 1e9) {
freq = freq / 1e9;
if (this.countDecimals(freq) > 2) {
freq = freq.toFixed(2);
}
freq = freq + " GHz";
} else if (freq > 1e6) {
freq = freq / 1e6;
if (this.countDecimals(freq) > 2) {
freq = freq.toFixed(2);
}
freq = freq + " MHz";
} else {
if (this.countDecimals(freq) > 2) {
freq = freq.toFixed(2);
}
}
var text = " ( " + freq + ", " + yval + ")";
var padding = 5;
var fontSize = 20;
var xPos = locx - padding;
var width = this.ctx.measureText(text).width + padding * 2;
var height = fontSize * 1.286;
var yPos = locy - height / 1.5;
this.ctx.lineWidth = 2;
this.ctx.fillStyle = "rgba(204, 131, 21, 0.8)";
// draw the rect
this.ctx.fillRect(xPos, yPos, width, height);
this.ctx.fillStyle = "white";
this.ctx.font = "bold 10pt droid_serif";
this.ctx.fillText(text, locx, locy);
this.ctx.fillStyle = "white";
this.ctx.beginPath();
this.ctx.arc(locx, locy, 2, 0, Math.PI * 2, true);
this.ctx.fill();
this.ctx.closePath();
};
The spectrum project you reference expects to receive regular updates of an array of data passed into drawSpectrum. Each time it renders that data as a new spectrum in drawFFT, with the data scaled by the numbers set in setRange. Each time it receives data, it also creates a new row of pixels for the waterfall in the rowToImageData function, again scaled by the numbers set in setRange. The previously created rows of pixels are shifted down by one row in addWaterfallRow.
I've made a fiddle that shows how data is handled by the Spectrum object: https://jsfiddle.net/40qun892/
If you run the fiddle it shows two examples, one with three points and another with 100 points of randomly generated data. This line shows how an x-axis is added to the graph:
const spectrumB = new Spectrum("spectrumCanvasB", {spanHz: 5000, centerHz: 2500});
The x-axis is only shown when spanHz is defined. It is generated by drawing 11 labels, equally distributed across the canvas. With the center label based on centerHz, and the remaining labels calculated based on spanHz.
As you can see from the spectrums generated by the fiddle, the x-axis labels are not connected to the data, they are just equally distributed across the canvas.
The graph behind the data is created by applying a scale to the graph so that using the array index will result in data stretched across the graph.
this.ctx.scale(width / <number of data points>, 1);
for (var i = 0; i < <number of data points>.length; i++) {
// lines removed
this.ctx.lineTo(i, y);
// lines removed
}
As you can see from the examples in the fiddle, this doesn't look very nice when there's only three datapoints, because the white lines are stretched in the x-direction but not the y-direction.
Spectrum doesn't care about x-coordinates. It just stretches whatever it is given to fit the canvas. If you give it a spanHz property, it will distribute some labels across the canvas too, but it does not associate them with the data.
The scaling seems to be slightly wrong in Spectrum (which is only noticeable if very few datapoints are used). If I make this change, the points are correctly stretched:
this.ctx.scale(width / (this.wf_size - 1), 1);
Then this change would set the x-axis labels to 100Mhz - 300Mhz:
const spectrumA = new Spectrum("spectrumCanvasA", {spanHz: 200000000, centerHz: 200000000});
Edit: (The relationship between frequency and data)
The only thing the code knows about the frequency is based on the spanHz anad centerHz.
The frequency at an array index is
(<array index> / <number of points on X axis> * <spanHz>) + (<centerHz> / 2)
The frequency at a pixel is
(<x coordinate> / <width of canvas> * <spanHz>) + (<centerHz> / 2)
If you want to convert a frequency to an array index (or a pixel) it would be slightly more complicated, because you would need to find the closest element to that frequency. For example, the pixel at a frequency is:
round((<frequency> - (<centerHz> / 2)) / <spanHz> * <width of canvas>)
I need help with an interactive project in p5.js.
Here are the things that are still missing:
the clock hands should rotate
when the puzzle is solved "won" should be displayed and the timer should stop (Here I have a code part in my program but it doesn´t work)
the "moves" don´t count up when you click somewhere - only at the specific field
at "Game Over" the picture and the clock should stop
Here is a picture of the puzzle: Slide Puzzle
I hope someone can help me. Thank you very much.
Here is the code:
let w = window.innerWidth/2;
let h = window.innerHeight/1.5;
let ground;
let plate = [];
let tiles = [];
let col = 4;
let row = 4;
let bubbles = [];
let timerValue = 160;
let moves = 0;
function setup() {
canvas = createCanvas(w, h);
ground = createGraphics(w, h);
w = width / col;
h = height / row;
textAlign(CENTER, CENTER);
setInterval(timeIt, 1000);
imag = loadImage('Mauszeiger.png');
for (let i = 0; i < col; i++) {
for (let j = 0; j < row; j++) {
let img = createImage(w, h);
let index = i + j * col;
plate.push(index);
let teil = new Tile(index, img);
tiles[index] = teil;
}
}
tiles.pop();
plate.pop();
plate.push(-1);
startViz();
simpleShuffle(plate);
}
function draw() {
background(100);
push();
scale(1, 0.9);
drawViz();
updateTiles();
for (let i = 0; i < col; i++) {
for (let j = 0; j < row; j++) {
let index = i + j * col;
let x = i * w;
let y = j * h;
let teileIndex = plate[index];
if (teileIndex > -1) {
let img = tiles[teileIndex].img;
image(img, x, y, w, h);
}
strokeWeight(5);
noFill();
rect(x, y, w, h);
}
}
pop();
if (isSolved()) {
console.log('SOLVED');
timerValue = 0;
text('Won', width/2, height/2);
}
if (timerValue < 10 || timerValue >= 10) {
textSize(15);
fill(255);
text(timerValue, width-30, height*0.95);
}
textSize(45);
if (timerValue == 0) {
text('Game Over', width/2, height/2);
draw = function(){}
}
textSize(15);
text('moves: ' + moves, width/2, height*0.95);
push();
noFill();
stroke(255);
ellipse(27, height*0.95, 40, 40);
imageMode(CENTER);
image(imag, 30, height*0.95, imag.width / 100, imag.height / 100);
pop();
}
function mousePressed() {
let i = floor(mouseX / w);
let j = floor(mouseY / h);
move(i, j, plate);
if (mousePressed) {
moves++;
}
}
function windowResized() {
w = window.innerWidth/2;
h = window.innerHeight/1.5;
resizeCanvas(w, h);
}
function timeIt() {
if (timerValue > 0) {
timerValue--;
}
}
function isSolved() {
for (let i = 0; i < plate.length - 1; i++) {
if (plate[i] !== tiles[i].index) {
return false;
}
}
return true;
}
function updateTiles() {
for (let i = 0; i < col; i++) {
for (let j = 0; j < row; j++) {
let x = j * w;
let y = i * h;
let index = i + j * col;
if (tiles[index]) tiles[index].img.copy(ground, x, y, w, h, 0, 0, w, h);
}
}
}
function swap(i, j, arr) {
let temp = arr[i];
arr[i] = arr[j];
arr[j] = temp;
}
function randomMove(arr) {
let r1 = floor(random(col));
let r2 = floor(random(row));
move(r1, r2, arr);
}
function simpleShuffle(arr) {
for (let i = 0; i < 1000; i++) {
randomMove(arr);
}
}
function move(i, j, arr) {
let blank = findBlank();
let blankCol = blank % col;
let blankRow = floor(blank / row);
if (isNeighbor(i, j, blankCol, blankRow)) {
swap(blank, i + j * col, arr);
}
}
function isNeighbor(i, j, x, y) {
if (i !== x && j !== y) {
return false;
}
if (abs(i - x) == 1 || abs(j - y) == 1) {
return true;
}
return false;
}
function findBlank() {
for (let i = 0; i < plate.length; i++) {
if (plate[i] == -1) return i;
}
}
function startViz() {
for (let i = 0; i < 5; i++) {
bubbles.push(new Bubble());
}
}
function drawViz() {
ground.background(30);
for (let b of bubbles) {
b.update();
b.show();
b.show1();
}
}
class Bubble {
constructor() {
this.r = random(50, 80);
this.x = random(this.r, width - this.r);
this.y = random(this.r, height - this.r);
this.vx = random(-1 * (w*0.005), 3 * (w*0.005));
this.vy = random(-1 * (w*0.005), 3 * (w*0.005));
this.color = color(random(255), random(255), random(255));
}
show() {
ground.noFill();
ground.stroke(255);
ground.fill(this.color);
ground.strokeWeight(3);
ground.circle(this.x, this.y, this.r * 2 * (w*0.005));
}
show1() {
ground.line(this.x, this.y, this.x + this.r / 2 * (w*0.005), this.y + this.r / 2 * (w*0.005));
ground.line(this.x, this.y, this.x - this.r / 2 * (w*0.005), this.y + this.r / 2 * (w*0.005));
}
update() {
this.x += this.vx;
this.y += this.vy;
if (this.x > width - this.r || this.x < this.r) {
this.vx *= -1;
}
if (this.y > height - this.r || this.y < this.r) {
this.vy *= -1;
}
}
}
class Tile {
constructor(i, img) {
this.index = i;
this.img = img;
}
}
After the maze is generated, if you move your player around a bit, soon it'll say "No cell found", which happens whenever the cell is undefined. I don't know why the cell is not in the check array. I really don't know what to do to fix this, or why it's not being added to the array. Also sometimes you can't move a certain direction your supposed to move, and you can move through walls. I think this is because some cells are added twice. My full program is underneath.
var cols, rows;
var diffeculty = 0;
var w = 50;
var grid = [];
var stack = [];
var current;
var check = []
var k = 0;
var m = 0;
var won = false;
function setup() {
//frameRate(10)
createCanvas(600, 400);
cols = floor(width / w)
rows = floor(height / w)
for (var j = 0; j < rows; j++) {
for (var i = 0; i < cols; i++) {
var cell = new Cell(i, j)
grid.push(cell)
}
}
current = grid[0];
}
function index(i, j) {
if (i < 0 || j < 0 || i > cols - 1 || j > cols - 1) {
return -1;
}
return i + j * cols
}
function Cell(i, j) {
this.visited = false;
this.i = i;
this.j = j;
this.walls = [true, true, true, true];
this.checkNeighbors = function() {
var neighbors = []
var top = grid[index(i, j - 1)]
var right = grid[index(i + 1, j)]
var left = grid[index(i - 1, j)]
var bottom = grid[index(i, j + 1)]
var Wall = this.walls;
var wall=[]
wall.push(i,j,Wall)
if (top && !top.visited) {
neighbors.push(top);
}
if (right && !right.visited) {
neighbors.push(right);
}
if (bottom && !bottom.visited) {
neighbors.push(bottom);
}
if (left && !left.visited) {
neighbors.push(left);
}
if (neighbors.length > 0) {
var r = floor(random(0, neighbors.length))
return neighbors[r];
} else {
return undefined;
}
}
this.highlight = function() {
var x = this.i * w;
var y = this.j * w;
noStroke();
fill(0, 0, 255, 100)
rect(x, y, w, w);
}
this.show = function() {
var x = this.i * w;
var y = this.j * w;
stroke(255);
noFill();
if (this.walls[0]) {
line(x, y, x + w, y);
}
if (this.walls[1]) {
line(x + w, y, x + w, y + w);
}
if (this.walls[2]) {
line(x + w, y + w, x, y + w);
}
if (this.walls[3]) {
line(x, y + w, x, y);
}
if (this.visited) {
fill(255, 0, 255, 100);
noStroke();
rect(x, y, w, w);
}
}
};
function removeWalls(a, b) {
var x = a.i - b.i;
if (x === 1) {
a.walls[3] = false;
b.walls[1] = false;
} else if (x === -1) {
a.walls[1] = false;
b.walls[3] = false;
}
var y = a.j - b.j;
if (y === 1) {
a.walls[0] = false;
b.walls[2] = false;
} else if (y === -1) {
a.walls[2] = false;
b.walls[0] = false;
}
}
function draw() {
background(51);
for (var i = 0; i < grid.length; i++) {
grid[i].show()
}
//Step One
current.visited = true;
current.highlight();
var next = current.checkNeighbors()
if (next) {
next.visited = true;
//Step 2
stack.push(current);
check.push(current)
//Step 3
removeWalls(current, next)
{}
//Step 4
current = next;
} else if (stack.length > 0) {
current = stack.pop();
}
if (stack[0] === undefined) {
fill(0, 105, 100)
rect(0, 0, w, w)
rect(width - w, height - w, w, w)
frameRate(8)
var c = check.find(cell => cell.i == ~~(k/w) && cell.j == ~~(m/w));
if(c===undefined){
console.log('no cell found');
}else{
console.log('i',c.i,'j', c.j,'walls', c.walls);
}
if(keyIsDown(UP_ARROW)&&!c.walls[0]) {
k -= w
}
if (keyIsDown(RIGHT_ARROW)&&!c.walls[1]) {
m += w
}
if (keyIsDown(DOWN_ARROW)&&!c.walls[2]) {
k += w
}
if (keyIsDown(LEFT_ARROW)&&!c.walls[3]) {
m -= w
}
fill(0, 255, 255, 100)
rect(m, k, w, w)
if (m < 0) {
m = 0
}
if (k < 0) {
k = 0
}
if (m > width - w) {
m = width - w
}
if (k > height - w) {
k = height - w
}
if (k === height - w && m === width - w || won === true) {
won = true
background(0)
textSize(40)
text("You Win", width / 2, height / 2)
}
}
}
I can spot a couple of problems with function index(i, j):
if i is cols and j is rows, then if you if statement, you should check i > rows - 1 instead of i > cols - 1
you probably want to return cols-1 instead of cols:
return i + j * cols-1;
This code. It suppose to create canvas, grass and animals there. It doesn't even draw canvas. Please help. I will be very grateful.
This two files (setup.js and classification.js) I have tied to my html. Also used this link "https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.14/p5.js".
Also there is this error
var gr = new Grass(x,y,1); Grass is not defined
setup.js
var side = 10;
var grassArr = [];
var matrix = [];
var grassEaterArr = [];
var found = []
function setup() {
for (var y = 0; y < 49; y++) {
matrix[y] = [];
for (var x = 0; x < 49; x++) {
let arr = [0, 1, 2]
let r = random(arr)
matrix[y][x] = r;
}
}
for (var y = 0; y < matrix.length; ++y) {
for (var x = 0; x < matrix[y].length; ++x) {
if (matrix[y][x] == 1) {
var gr = new Grass(x, y, 1);
grassArr.push(gr);
} else if (matrix[y][x] == 2) {
var kendani = new GrassEater(x, y, 2);
grassEaterArr.push(kendani);
}
}
}
frameRate(5)
createCanvas(49 * side, 49 * side);
background('#acacac');
}
function draw() {
for (var y = 0; y < matrix.length; y++) {
for (var x = 0; x < matrix[y].length; x++) {
if (matrix[y][x] == 1) {
fill("green");
rect(x * side, y * side, side, side);
} else if (matrix[y][x] == 0) {
fill("#acacac");
rect(x * side, y * side, side, side);
} else if (matrix[y][x] == 2) {
fill("yellow");
rect(x * side, y * side, side, side);
}
}
}
for (var i in grassArr) {
grassArr[i].mul();
}
for (var i in grassEaterArr) {
grassEaterArr[i].move();
grassEaterArr[i].eat();
grassEaterArr[i].mul();
grassEaterArr[i].die();
}
}
classification.js
class Grass {
constructor(x, y, index) {
this.x = x;
this.y = y;
this.index = index;
this.multiply = 0;
this.directions = [
[this.x - 1, this.y - 1],
[this.x, this.y - 1],
[this.x + 1, this.y - 1],
[this.x - 1, this.y],
[this.x + 1, this.y],
[this.x - 1, this.y + 1],
[this.x, this.y + 1],
[this.x + 1, this.y + 1],
]
}
chooseCell(character) {
var found = [];
for (var i in this.directions) {
var x = this.directions[i][0];
var y = this.directions[i][1];
if (x >= 0 && x < matrix[0].length && y >= 0 && y < matrix.length) {
if (matrix[y][x] == character) {
found.push(this.directions[i]);
}
}
}
return found;
}
mul() {
this.multiply++;
var newCell = random(this.chooseCell(0));
console.log(newCell, this.multiply);
if (this.multiply >= 8 && newCell) {
var newGrass = new Grass(newCell[0], newCell[1], this.index);
grassArr.push(newGrass);
matrix[newCell[1]][newCell[0]] = 1;
this.multiply = 0;
}
}
}
class GrassEater {
constructor(x, y, index) {
this.x = x;
this.y = y;
this.index = index;
this.energy = 5;
this.directions = [];
}
getNewCoordinates() {
this.directions = [
[this.x - 1, this.y - 1],
[this.x, this.y - 1],
[this.x + 1, this.y - 1],
[this.x - 1, this.y],
[this.x + 1, this.y],
[this.x - 1, this.y + 1],
[this.x, this.y + 1],
[this.x + 1, this.y + 1]
];
}
chooseCell(character) {
this.getNewCoordinates();
var found = [];
for (var i in this.directions) {
var x = this.directions[i][0];
var y = this.directions[i][1];
if (x >= 0 && x < matrix[0].length && y >= 0 && y < matrix.length) {
if (matrix[y][x] == character) {
found.push(this.directions[i]);
}
}
}
return found;
}
move() {
var newCell = random(this.chooseCell(0));
if (newCell) {
var newX = newCell[0];
var newY = newCell[1];
matrix[this.y][this.x] = 0;
matrix[newY][newX] = this.index;
this.y = newY;
this.x = newX;
this.energy--;
}
}
mul() {
var newCell = random(this.chooseCell(0));
if (this.energy >= 8 && newCell) {
var animalArr = new GrassEater(newCell[0], newCell[1], this.index);
grassEaterArr.push(animalArr);
matrix[newCell[1]][newCell[0]] = 2;
this.energy = 5;
}
}
eat() {
var newCell = random(this.chooseCell(1));
if (newCell) {
var newX = newCell[0];
var newY = newCell[1];
matrix[this.y][this.x] = 0;
matrix[newY][newX] = this.index;
for (var i in grassArr) {
if (newX == grassArr[i].x && newY == grassArr[i].y) {
grassArr.splice(i, 1);
break;
}
}
this.y = newY;
this.x = newX;
this.energy += 2;
}
die() {
if (this.energy == 0) {
matrix[this.y][this.x] = 0;
}
}
}
Export the Grass and GrassEater classes, and import them on your main file:
class Grass {...}
class GrassEater {...}
export { Grass, GrassEater }
On setup.js:
import { Grass, GrassEater } from "./classification.js";
I have this code for separating two circles. the problem is that whenever the radius of one of the circle changes (ie becomes bigger or smaller than the other) the circles start moving somewhere else. i am trying to move the circles apart together (). i dont know much about vectors. i got the vector posrtion of my code from Why circles are vibrating on collision (Canvas)
CollisionHandler.pushApart = function(cell, check) {
var x = check.x - cell.x;
var y = check.y - cell.y;
var distance = Math.hypot(x, y);
var cSz = Blob.getSize(cell.mass);
var chSz = Blob.getSize(check.mass);
var maxDist = cSz + chSz;
var boosting = Math.abs(cell.move.x) > 2 ||
Math.abs(cell.move.y) > 2 ||
Math.abs(check.move.x) > 2 ||
Math.abs(check.move.y) > 2;
if (distance < maxDist && !boosting) {
x /= distance;
y /= distance;
var pLen = cSz / (cSz + chSz);
var cx = cell.x + pLen * x * distance;
var cy = cell.y + pLen * y * distance;
cell.x += (cx - x * chSz - cell.x) * animationConstant;
cell.y += (cy - y * chSz - cell.y) * animationConstant;
check.x += (cx + x * cSz - check.x) * animationConstant;
check.y += (cy + y * cSz - check.y) * animationConstant;
/*var targetX = check.x - maxDistance * x;
var targetY = check.y - maxDistance * y;
cell.x += (targetX - cell.x) * animationConstant;
cell.y += (targetY - cell.y) * animationConstant;*/
}
};
<!DOCTYPE html>
<html>
<head>
<title>this is my clone of agar.io.</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
</head>
<body>
<canvas></canvas>
<script>
var canvas = document.querySelector("canvas");
var ctx = canvas.getContext("2d");
var width = innerWidth;
var height = innerHeight;
canvas.width = width;
canvas.height = height;
var blobsFood = [];
var blobsVirus = [];
var blobsEject = [];
var blobsPlayer = [];
function getRandom(n) {
return Math.random() * n;
};
var gameWidth = 10000;
var gameHeight = 10000;
var massFood = 5;
var animationConstant = 0.2;
var maxSplit = 64;
function Blob(x, y, mass, hue) {
this.x = x;
this.y = y;
this.mass = mass;
this._mass = mass;
this.hue = hue;
this.time = Date.now();
this.move = {
x: 0,
y: 0,
angle: 0
};
};
Blob.getSize = function(mass) {
return Math.sqrt(mass * 100);
};
Blob.getSpeed = function(mass) {
return 15 * 1.6/Math.pow(mass, 0.32);
};
Blob.getBoostSpeed = function(mass) {
return 15 * 2.6 * Math.pow(mass, 0.0122);
};
Blob.prototype.boostMove = function() {
this.x += this.move.x;
this.y += this.move.y;
this.move.x *= 0.95;
this.move.y *= 0.95;
};
Blob.prototype.getAngle = function() {
return this.move.angle;
};
Blob.prototype.draw = function() {
ctx.save();
ctx.translate(this.x, this.y);
ctx.beginPath();
this._mass += (this.mass - this._mass) * animationConstant;
ctx.arc(0, 0, Blob.getSize(this._mass), 0, Math.PI * 2);
ctx.closePath();
ctx.fillStyle = "hsl(" + this.hue + ", 100%, 60%)";
ctx.strokeStyle = "hsl(" + this.hue + ", 100%, 50%)";
ctx.lineWidth = 5;
ctx.fill();
ctx.stroke();
ctx.restore();
};
Blob.prototype.onEaten = function(eater) {
// For virus and other cells
};
Blob.prototype.onEat = function(prey) {
this.mass += prey.mass;
};
function Virus() {
this.x = Math.random() * gameWidth;
this.y = Math.random() * gameWidth;
this.mass = 100;
this._mass = 100;
this.maxMass = 150;
this.hue = Math.random() * 360;
};
Virus.prototype = new Blob();
Virus.prototype.onEat = function(prey) {
this.mass += prey.mass;
if(this.mass >= this.maxMass) {
shootVirus(this, prey.getAngle());
}
};
Virus.prototype.onEaten = function(eater) {
var numSplits = maxSplit - blobsPlayer.length;
if(numSplits <= 0)
return;
var massLeft = eater.mass;
var splitAmount = 1;
var smallMass = 50;
while(massLeft > 0) {
splitAmount *= 2;
massLeft = eater.mass - splitAmount * 30;
};
var splitMass = eater.mass/splitAmount;
for(var i = 0; i < Math.min(splitAmount, numSplits); i++) {
if (eater.mass <= smallMass)
break;
var angle = Math.random() * 2 * Math.PI;
addPlayer(eater.x, eater.y, splitMass, angle, eater.hue);
eater.mass -= splitMass;
};
};
function CollisionHandler() {
console.log("CollisionHandler started.");
};
CollisionHandler.eatFactor = 0.02;
CollisionHandler.canEat = function(eater, check) {
var x = eater.x - check.x;
var y = eater.y - check.y;
var distance = Math.hypot(x, y);
var maxDistance = Blob.getSize(eater.mass + check.mass);
var minMass = CollisionHandler.eatFactor * check.mass + check.mass;
if(distance < maxDistance && eater.mass > minMass) {
return true;
} else {
return false;
}
};
CollisionHandler.pushApart = function(cell, check) {
var x = check.x - cell.x;
var y = check.y - cell.y;
var distance = Math.hypot(x, y);
var cSz = Blob.getSize(cell.mass);
var chSz = Blob.getSize(check.mass);
var maxDist = cSz + chSz;
var boosting = Math.abs(cell.move.x) > 2 ||
Math.abs(cell.move.y) > 2 ||
Math.abs(check.move.x) > 2 ||
Math.abs(check.move.y) > 2;
if(distance < maxDist && !boosting) {
x /= distance;
y /= distance;
var pLen = cSz / (cSz + chSz);
var cx = cell.x + pLen * x * distance;
var cy = cell.y + pLen * y * distance;
cell.x += (cx - x * chSz - cell.x) * animationConstant;
cell.y += (cy - y * chSz - cell.y) * animationConstant;
check.x += (cx + x * cSz - check.x) * animationConstant;
check.y += (cy + y * cSz - check.y) * animationConstant;
/*var targetX = check.x - maxDistance * x;
var targetY = check.y - maxDistance * y;
cell.x += (targetX - cell.x) * animationConstant;
cell.y += (targetY - cell.y) * animationConstant;*/
}
};
function addFood(n) {
for(var i = 0; i < n ; i++) {
var blob = new Blob(
getRandom(gameWidth),
getRandom(gameHeight),
massFood,
getRandom(360)
);
blobsFood.push(blob);
};
console.log(blobsFood.length);
};
var massVirus = 80;
var massVirusMax = 120;
function addVirus(n) {
for(var i = 0; i < n ; i++) {
var blob = new Virus();
blobsVirus.push(blob);
};
console.log(blobsVirus.length);
};
var massEject = 10;
function addEject(blob) {
if(blob.mass < 20)
return;
blob.mass -= massEject;
var angle = getMouseAngle(blob.x, blob.y);
var r = Blob.getSize(blob.mass);
var blob = new Blob(
blob.x + Math.cos(angle) * r,
blob.y + Math.sin(angle) * r,
massEject,
blob.hue
);
blob.move.x = Math.cos(angle) * 30;
blob.move.y = Math.sin(angle) * 30;
blob.move.angle = angle;
blobsEject.push(blob);
};
function addPlayer(x, y, mass, angle, hue) {
var moveX = Math.cos(angle) * Blob.getBoostSpeed(mass);
var moveY = Math.sin(angle) * Blob.getBoostSpeed(mass);
var blob = new Blob(x, y, mass, hue);
blob.move.x = moveX;
blob.move.y = moveY;
blob.move.angle = angle;
blobsPlayer.push(blob);
};
var mouseX = 0;
var mouseY = 0;
var cameraX = 0;
var cameraY = 0;
var _cameraX = 0;
var _cameraY = 0;
var zoom = 1;
var _zoom = 1;
function updateCamera() {
var x = 0;
var y = 0;
var m = 0;
var len = blobsPlayer.length;
blobsPlayer.forEach(function(blob) {
x += blob.x;
y += blob.y;
m += Blob.getSize(blob.mass);
});
cameraX = x/len;
cameraY = y/len;
zoom = 1/(Math.sqrt(m)/Math.log(m));
};
document.onmousemove = function(evt) {
mouseX = evt.clientX;
mouseY = evt.clientY;
};
document.onkeydown = function(evt) {
var key = evt.keyCode;
if(key == 32) {
var len = blobsPlayer.length;
for(var i = 0; i < len; i++) {
var blob = blobsPlayer[i];
splitPlayerBlob(blob);
};
}
if(key == 87) {
var len = blobsPlayer.length;
for(var i = 0; i < len; i++) {
var blob = blobsPlayer[i];
addEject(blob);
};
}
};
function getMouseAngle(x, y) {
var x = mouseX - width/2 + (cameraX - x) * zoom;
var y = mouseY - height/2 + (cameraY - y) * zoom;
return Math.atan2(y, x);
};
function splitPlayerBlob(blob) {
var numSplits = 16 - blobsPlayer.length;
if(numSplits <= 0) return;
if(blob.mass >= 20) {
blob.mass /= 2;
var angle = getMouseAngle(blob.x, blob.y);
addPlayer(blob.x, blob.y, blob.mass, angle, blob.hue);
}
};
function mouseMovePlayer() {
blobsPlayer.forEach(function(blob) {
var angle = getMouseAngle(blob.x, blob.y);
var speed = Blob.getSpeed(blob.mass);
var x = mouseX - width/2 + (cameraX - blob.x) * zoom;
var y = mouseY - height/2 + (cameraY - blob.y) * zoom;
// blob.x += Math.cos(angle) * speed * Math.min(1, Math.pow(x/toRadius(blob.mass), 2));
// blob.y += Math.sin(angle) * speed * Math.min(1, Math.pow(y/toRadius(blob.mass), 2));
blob.x += Math.cos(angle) * speed;
blob.y += Math.sin(angle) * speed;
});
};
function movePlayer() {
blobsPlayer.forEach(function(blob) {
blob.boostMove();
});
};
function moveEject() {
blobsEject.forEach(function(blob) {
blob.boostMove();
});
};
function separateEject() {
blobsEject.forEach(function(a, i) {
blobsEject.forEach(function(b, j) {
if(i == j)
return;
CollisionHandler.pushApart(a, b);
});
});
};
function separatePlayer() {
blobsPlayer.forEach(function(a, i) {
blobsPlayer.forEach(function(b, j) {
if(i == j)
return;
var ref1 = a;
var ref2 = b;
CollisionHandler.pushApart(ref1, ref2);
});
});
};
function eatFood() {
blobsPlayer.forEach(function(player) {
blobsFood.forEach(function(food, i) {
if(CollisionHandler.canEat(player, food)) {
player.onEat(food);
blobsFood.splice(i, 1);
}
});
});
};
function eatEject() {
blobsPlayer.forEach(function(player) {
blobsEject.forEach(function(eject, i) {
if(CollisionHandler.canEat(player, eject)) {
player.onEat(eject);
blobsEject.splice(i, 1);
}
});
});
blobsVirus.forEach(function(virus) {
blobsEject.forEach(function(eject, i) {
if(CollisionHandler.canEat(virus, eject)) {
virus.onEat(eject);
blobsEject.splice(i, 1);
}
});
});
};
function shootVirus(virus, angle) {
virus.mass = massVirus;
var speed = Blob.getSpeed(massVirus);
var blob = new Blob(virus.x, virus.y, massVirus, virus.hue);
var x = Math.cos(angle) * 30;
var y = Math.sin(angle) * 30;
blob.move.x = x;
blob.move.y = y;
blob.move.angle = angle;
blobsVirus.push(blob);
};
function moveVirus() {
blobsVirus.forEach(function(blob) {
blob.x += blob.move.x;
blob.y += blob.move.y;
blob.move.x *= 0.95;
blob.move.y *= 0.95;
});
};
function separateVirus() {
blobsVirus.forEach(function(a, i) {
blobsVirus.forEach(function(b, j) {
if(i == j)
return;
CollisionHandler.pushApart(a, b);
});
});
};
function eatVirus() {
blobsPlayer.forEach(function(player) {
blobsVirus.forEach(function(virus, i) {
if(CollisionHandler.canEat(player, virus)) {
player.onEat(virus);
virus.onEaten(player);
blobsVirus.splice(i, 1);
}
});
});
};
var baseTime = 10000;
function canCombine(player) {
var t = Math.floor(baseTime + (0.02 * player.mass));
var now = Date.now() - player.time;
return t < now;
};
function combinePlayer() {
blobsPlayer.forEach(function(a, i) {
blobsPlayer.forEach(function(b, j) {
if(i == j)
return;
var x = a.x - b.x;
var y = a.y - b.y;
var d = Math.hypot(x, y);
var r = Blob.getSize(a.mass + b.mass);
if(d < r && canCombine(a) && canCombine(b)) {
if(a.mass > b.mass) {
a.mass += b.mass;
blobsPlayer.splice(j, 1);
} else {
b.mass += a.mass;
blobsPlayer.splice(i, 1);
}
}
});
});
};
function updateGame() {
movePlayer();
mouseMovePlayer();
separatePlayer();
combinePlayer();
moveEject();
separateEject();
moveVirus();
separateVirus();
eatFood();
eatEject();
eatVirus();
updateCamera();
};
function drawGame() {
clearCanvas();
ctx.save();
_zoom += (zoom - _zoom) * 0.1;
_cameraX += (cameraX - _cameraX) * 0.1;
_cameraY += (cameraY - _cameraY) * 0.1;
ctx.translate(-_cameraX * _zoom + width/2, -_cameraY * _zoom + height/2);
ctx.scale(_zoom, _zoom);
drawAllBlobs();
ctx.restore();
};
function clearCanvas() {
ctx.fillStyle = "white";
ctx.fillRect(0, 0, width, height);
};
function drawAllBlobs() {
var blobs = blobsFood
.concat(blobsEject)
.concat(blobsVirus)
.concat(blobsPlayer);
var blobs = blobs.sort(function(a, b) {
return a.mass - b.mass;
});
blobs.forEach(function(blob) {
blob.draw();
});
};
function loop() {
updateGame();
drawGame();
requestAnimationFrame(loop);
};
addFood(300);
addVirus(15);
addPlayer(0, 0, 3000, 0, 45)
loop();
</script>
</body>
</html>