How to play a specific frequency with Javascript? - javascript

I want a function that works like this:
playSound(345, 1000)
Which would play a tone of 345 hz for 1000 milliseconds. What is the simplest way to achieve this in JavaScript? I don't mind if it uses a sample (maybe of a sin wave, or piano), or uses the computer's hardware to generate the sound.

As already pointed out in the comments, the way to do it is through the OscillatorNode.
// create web audio api context
var audioCtx = new(window.AudioContext || window.webkitAudioContext)();
function playNote(frequency, duration) {
// create Oscillator node
var oscillator = audioCtx.createOscillator();
oscillator.type = 'square';
oscillator.frequency.value = frequency; // value in hertz
oscillator.connect(audioCtx.destination);
oscillator.start();
setTimeout(
function() {
oscillator.stop();
playMelody();
}, duration);
}
function playMelody() {
if (notes.length > 0) {
note = notes.pop();
playNote(note[0], 1000 * 256 / (note[1] * tempo));
}
}
notes = [
[659, 4],
[659, 4],
[659, 4],
[523, 8],
[0, 16],
[783, 16],
[659, 4],
[523, 8],
[0, 16],
[783, 16],
[659, 4],
[0, 4],
[987, 4],
[987, 4],
[987, 4],
[1046, 8],
[0, 16],
[783, 16],
[622, 4],
[523, 8],
[0, 16],
[783, 16],
[659, 4]
];
notes.reverse();
tempo = 100;
playMelody();

There is a library called simpleTones.js that greatly simplifies the Web Audio API to do exactly what you are attempting.
Once the library is included in your project, playing a timed frequency is as easy as calling
playTone(345, sine, 1)
345 being the frequency in Hz, sine being the wave pattern(there are other wave pattern options as well) and "1" being one second, or 1000 milliseconds.
You can download the library and read the documentation here: https://github.com/escottalexander/simpleTones.js
Best of luck on your project.

Related

Dissolve GeoJSON polygons with Turf using Leaflet

I have one GeoJSON with about 100 polygons. I need a way to filter several polygons and dissolve them to put on a Leaflet map. Instead of creating a new GeoJSON with the dissolve polygons I want to try to use Turf.js, try to follow their examples but result are blank and no errors. What is missing or is it a wrong approach?
var poly = new L.layerGroup();
$.getJSON("/geodata/polygons.geojson", function(json) {
L.geoJson(json, {
turf: function(feature, latlng){
var select = (feature.properties.id >= 65 && feature.properties.id <= 68);
features = turf.featureCollection([select], {combine: 'yes'});
var dissolved = turf.dissolve(features, {propertyName: 'combine'}).addTo(poly);
}
});
});
Example from turf website for dissolve:
var features = turf.featureCollection([
turf.polygon([[[0, 0], [0, 1], [1, 1], [1, 0], [0, 0]]], {combine: 'yes'}),
turf.polygon([[[0, -1], [0, 0], [1, 0], [1, -1], [0,-1]]], {combine: 'yes'}),
turf.polygon([[[1,-1],[1, 0], [2, 0], [2, -1], [1, -1]]], {combine: 'no'}),
]);
var dissolved = turf.dissolve(features, {propertyName: 'combine'});

Position dynamic shapes at same position

When I click on button each time it gives a different shape.All the shapes are dynamic. It can be polygon or circle (hundreds of shapes).
The shape is formed by group of lines.
The issue here is each shape gets positioned at different place and get scaled smaller then the other.I want them to be normalized. All the shapes should have proper scaling effect and positioned at same x position. Some of the shapes come in center , some go a bit towards top left.
Code with same transform matrix and scale is shown below.Shapes get positioned differently.May be the problem is coordinates of line.In the first code snippet it starts at (0,0) and last shapes line start at (15,5)
Can I give the group g positioned at same position for all shapes.Should I place relative to something?
var draw = SVG('drawing').viewbox(0, 0, 400, 400).attr("preserveAspectRatio", "xMidYMid meet");
var group = draw.group().translate(90, 90).scale(3)
var obj = {
"type": "Polygon",
"coords": [
[
[0, 0],
[30, 0],
[30, 20],
[60, 20],
[60, 40],
[0, 40],
[0, 0]
],
[
[0, 0],
[10, 50],
[50, 10],
[0, 0]
],
[
[0, 0],
[60, 0],
[80, 40],
[0, 40],
[0, 0]
],
[
[0, 0],
[50, 0],
[50, 20],
[0, 20],
[0, 0]
],
[
[50, 10],
[40, 40],
[20, 40],
[10, 20],
[50, 10]
],
[
[15, 5],
[40, 10],
[10, 20],
[5, 10],
[15, 5]
],
[
[20, 35],
[10, 30],
[10, 10],
[30, 5],
[45, 20],
[20, 35]
]
]
};
shapehandler()
function shapehandler() {
if (obj.coords.length) {
group.clear();
drawShape(obj.coords[0]);
obj.coords.shift();
}
}
function drawShape(coords) {
var lineCoords = [];
var pointListString = coords.toString();
var pointListArray = JSON.parse("[" + pointListString + "]");
for (let i = 0; i < pointListArray.length - 2; i += 2) {
let [x1, y1, x2, y2] = pointListArray.slice(i, i + 4)
lineCoords.push({
x1,
y1,
x2,
y2
});
}
lineCoords.forEach(function (lin, i) {
let colorShade = [
'#FFDC0B',
'#002438',
'#9B56BB',
'#c6c7e2',
'#318700',
'#fe854f',
'#FF8400',
'#31d0c6',
'#7c68fc',
'#61549C',
'#6a6c8a',
'#4b4a67',
'#3c4260',
'#33334e',
'#222138'
];
group.line(lin.x1, lin.y1, lin.x2, lin.y2).stroke({ color: colorShade[i], width: 4, linecap: 'square' });
});
}
html, body {
margin: 0;
padding: 0;
font-family: Arial;
}
svg {
width: 100%;
height: 100%;
}
#drawing{
margin: 20px;
display: inline-block;
position: relative;
border: 1px solid darkgrey;
overflow:hidden;
box-sizing: border-box;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.6.6/svg.js"></script>
<div id="toolbar">
<button type="button" id="btn-show-shape" onclick="shapehandler()">Show Polygon Shapes</button>
</div>
<div id="drawing">
</div>
I'm keeping your HTML.
The CSS is yours but I've added a rule for lines. It sets the stroke-width. For a nicer effect the stroke-linecap is round.
The most important: I'm using vector-effect:non-scaling-stroke. Since I don't know how much I will scale the group, I need vector-effect:non-scaling-stroke that causes an object's stroke-width to be unaffected by transformations and zooming.
In the javaScript I'm keeping all your data (points and colors), but I've rewrite the rest.
The most important thing; I'm calculating the scale which depends on the group's bounding box width. I'm translating the group in the center of the SVG canvas and scaling it.
I hope this is what you need.
const SVG_NS = 'http://www.w3.org/2000/svg';
const W = 400,cx = W/2;
const H = 400,cy = H/2;
let obj = {
type: "polygon",
coords: [
[
[0, 0],
[30, 0],
[30, 20],
[60, 20],
[60, 40],
[0, 40],
[0, 0]
],
[
[0, 0],
[10, 50],
[50, 10],
[0, 0]
],
[
[0, 0],
[60, 0],
[80, 40],
[0, 40],
[0, 0]
],
[
[0, 0],
[50, 0],
[50, 20],
[0, 20],
[0, 0]
],
[
[50, 10],
[40, 40],
[20, 40],
[10, 20],
[50, 10]
],
[
[15, 5],
[40, 10],
[10, 20],
[5, 10],
[15, 5]
],
[
[20, 35],
[10, 30],
[10, 10],
[30, 5],
[45, 20],
[20, 35]
]
]
};
let colorShade = [
'#FFDC0B',
'#002438',
'#9B56BB',
'#c6c7e2',
'#318700',
'#fe854f',
'#FF8400',
'#31d0c6',
'#7c68fc',
'#61549C',
'#6a6c8a',
'#4b4a67',
'#3c4260',
'#33334e',
'#222138'
];
// create a new SVG element
let svg = drawSVGElmt(
"svg",
{
viewbox:`0 0 ${W} ${H}`,
preserveAspectRatio:"xMidYMid meet",
},
drawing);
// create a group element
let group = drawSVGElmt(
"g",
{/*transform:"translate(90,90) scale(3)"*/},
svg
)
// draw a red dot in the middle of the canvas
drawSVGElmt("circle",{cx:cx,cy:cy,r:5,fill:"red"},svg)
let n = 0;
function drawAndScale(n){
//first remove all the lines from the group
while (group.firstChild) {
group.removeChild(group.firstChild);
}
// for all the points in obj.coords[n] draw a line
for(let i = 0, l = obj.coords[n].length -1; i < l; i++){
let p0 = obj.coords[n][i];
let p1 = obj.coords[n][i + 1];
let x1 = p0[0],y1 = p0[1];
let x2 = p1[0],y2 = p1[1];
let stroke = colorShade[i];
drawSVGElmt("line", {x1:x1,y1:y1,x2:x2,y2:y2,stroke:stroke}, group)
}
//get the size of the bounding box of the group
let BB = group.getBBox();
// set the scate using the width of the bounding box
let scale = (W * .75) / BB.width;
// scale & translate the group in the crnter of the SVG element
group.setAttributeNS(null,"transform",
`translate(${ scale * (-BB.x -BB.width/2)}, ${ scale * (-BB.y -BB.height/2)})
scale(${scale})
translate(${cx/scale}, ${cy/scale})`);
}
drawAndScale(n);
function shapehandler(){
if(n < obj.coords.length - 2){ n++; }else{n = 0};
drawAndScale(n);
}
// a function to draw an SVG element
function drawSVGElmt(type, o, _parent) {
let elmt = document.createElementNS(SVG_NS, type);
for (var name in o) {
if (o.hasOwnProperty(name)) {
elmt.setAttributeNS(null, name, o[name]);
}
}
_parent.appendChild(elmt);
return elmt;
}
html, body {
margin: 0;
padding: 0;
font-family: Arial;
}
svg {
width: 100%;
height: 100%;
}
#drawing{
margin: 20px;
display: inline-block;
position: relative;
border: 1px solid;
overflow:hidden;
box-sizing: border-box;
width:400px;
height:400px;
}
line{
stroke-width:50px;
stroke-linecap: round;
/* vector-effect:non-scaling-stroke causes an object's stroke-width to be unaffected by transformations and zooming */
vector-effect:non-scaling-stroke;}
<div id="toolbar">
<button type="button" id="btn_show_shape" onclick="shapehandler()">Show Polygon Shapes</button>
</div>
<div id="drawing">
</div>

Build a chain out of integer pairs

I have a set of integers pairs:
[4, 3], [0, 1], [0, 4], [2, 3], [2, 1]
The task is to chain it to get the output:
[0, 1], [1, 2], [2, 3], [3, 4], [4, 0]
Are there any existed optimised algorithms to do it?
Make a graph where numbers are vertices and pairs are edges.
Check whether Eulerian path exists (all vertex degrees are even (perhaps except for two vertices))
If yes, build this path

Jquery Flot get ticks data for tooltip

I am using the jquery flot to show charts with tooltip. I am using ticks to get custom xaxis data. SO
var data = [ [0, 3], [4, 8], [8, 5], [9, 13] ];
var ticksData = [ [0, "A"], [4, "B"], [8, "C"], [9, "D"] ];
......
xaxis: {
ticks: ticksData,
tickLength: 0
},
But when I want to show the tooltip, I got the none ticks data.
$("#placeholder").bind("plothover", function(event, pos, item) {
var x = item.datapoint[0], y = item.datapoint[1];
//x and y are 4,8 instead of B,8
Complete sample http://jsfiddle.net/z0u6rqhe/
Is there any way to get to fix tool tip to show ticks data, or I should loop through ticksData and re find the value
please check this link, i hope this will helpful for you.
jsfiddle.net/z0u6rqhe/5/
code:
var x = item.series.xaxis.ticks[item.dataIndex];

Comprehensions in Python and Javascript are only very basic?

Looking at comprehensions in Python and Javascript, so far I can't see some of the main features that I consider most powerful in comprehensions in languages like Haskell.
Do they allow things like multiple generators? Or are they just a basic map-filter form?
If they don't allow multiple generators, I find them quite disappointing - why have such things been left out?
Python allows multiple generators:
>>> [(x,y,x*y) for x in range(1,5) for y in range(1,5)]
[(1, 1, 1), (1, 2, 2), (1, 3, 3), (1, 4, 4),
(2, 1, 2), (2, 2, 4), (2, 3, 6), (2, 4, 8),
(3, 1, 3), (3, 2, 6), (3, 3, 9), (3, 4, 12),
(4, 1, 4), (4, 2, 8), (4, 3, 12), (4, 4, 16)]
And also restrictions:
>>> [(x,y,x*y) for x in range(1,5) for y in range(1,5) if x*y > 8]
[(3, 3, 9), (3, 4, 12), (4, 3, 12), (4, 4, 16)]
Update: Javascript's syntax is similar (results from using the javascript shell on firefox):
var nums = [1, 2, 3, 21, 22, 30];
var s = eval('[[i,j] for each (i in nums) for each (j in [3,4]) if (i%2 == 0)]');
s.toSource();
[[2, 3], [2, 4], [22, 3], [22, 4], [30, 3], [30, 4]]
(For some reason, something about the context stuff is evaluated in in the javascript shell requires the eval indirection to have list comprehensions work. Javascript inside a <script> tag doesn't require that, of course)
Yes, you can have multiple iterables in a Python list comprehension:
>>> [(x,y) for x in range(2) for y in range(3)]
[(0, 0), (0, 1), (0, 2), (1, 0), (1, 1), (1, 2)]
Add an if statement as well...
>>> [(x,y) for x in range(5) for y in range(6) if x % 3 == 0 and y % 2 == 0]
[(0, 0), (0, 2), (0, 4), (3, 0), (3, 2), (3, 4)]
Comprehensions is very powerful in Haskell to a large extent because Haskell is functional, so it makes extremely much sense for them to be. Python is not functional so it makes less sense.
You can make a lot of complex things with comprehensions in Python but it quickly becomes hard to read, thereby defeating the whole purpose (meaning you should do it some other way).
However, as pointed out here, python does allow multiple generators in comprehensions.

Categories

Resources