Related
In p5.js, I am using "new p5.FFT(x,y)" to analyze the amplifer mp3 file.
But this has a little problem that if you set the mp3's volume to 0(by using .setVolume(x)) the song file cannot be analyzed maybe because you set volume to 0 so there's no input.
So i want to know how to analyze songfile even when i set the volume to 0.
The trick is you need to connect your FFT at a point where the volume is still non-zero, and then have a node down stream where you control the volume. Here's an example where I've used the p5.EQ effect to control the volume of one part of the audio graph. The "Tada" sound is connected to an FFT and to the "mute" p5.EQ effect. This makes it so that the FFT visualizes the sound at full volume, but the slider controls how loud the sound actually is. The "Ding" sound on the other hand is connected directly to the output, no FFT, no volume control.
let tada, ding;
let tadaBtn, dingBtn;
let volSlider;
let fft;
let mute;
function preload() {
tada = loadSound('https://www.paulwheeler.us/files/TADA.WAV');
ding = loadSound('https://www.paulwheeler.us/files/DING.WAV');
}
function setup() {
createCanvas(windowWidth, windowHeight);
let controls = createElement('div');
controls.style('display', 'flex');
controls.position(10, 10);
tadaBtn = createButton('Tada');
tadaBtn.mouseClicked(() => {
if (!tada.isPlaying()) {
tada.play();
tadaBtn.html('Stop');
} else {
tada.stop();
}
});
tadaBtn.parent(controls);
tada.onended(() => {
tadaBtn.html('Tada');
});
dingBtn = createButton('Ding');
dingBtn.mouseClicked(() => {
if (!ding.isPlaying()) {
ding.play();
dingBtn.html('Stop');
} else {
ding.stop();
}
});
dingBtn.parent(controls);
ding.onended(() => {
dingBtn.html('Ding');
});
volSlider = createSlider(0, 1, 0, 0);
volSlider.input(() => {
mute.amp(volSlider.value());
});
volSlider.parent(controls);
tada.disconnect();
fft = new p5.FFT();
fft.setInput(tada);
mute = new p5.EQ();
mute.amp(volSlider.value());
tada.connect(mute);
mute.connect();
}
function draw() {
background(0);
drawSpectrumGraph(0, 0, width, height);
}
// Graphing code adapted from https://jankozeluh.g6.cz/index.html by Jan Koželuh
function drawSpectrumGraph(left, top, w, h) {
let spectrum = fft.analyze();
stroke('limegreen');
fill('darkgreen');
strokeWeight(1);
beginShape();
vertex(left, top + h);
for (let i = 0; i < spectrum.length; i++) {
vertex(
left + map(log(i), 0, log(spectrum.length), 0, w),
top + map(spectrum[i], 0, 255, h, 0)
);
}
vertex(left + w, top + h);
endShape(CLOSE);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/addons/p5.sound.min.js"></script>
I'm using a simple p5.js programme to take a webcam stream and show a still image from this on the screen every few seconds.
let capture;
function setup() {
createCanvas(320, 240);
capture = createCapture(VIDEO);
capture.size(320, 240);
capture.hide();
}
function draw() {
if(frameCount % 120 == 0)
{image(capture, 0, 0, 320, 240);}
}
What I want to do then is to take each still image and convert it to a format that I can send using HTTP POST. The online manual is not helpful, and extensive internet searches haven't thrown up anything that works. Any good ideas, please?
Use .toDataURL() to convert the contents of a canvas element to string.
https://editor.p5js.org/EthanHermsey/sketches/bTvntCc35
let cnv;
let capture;
function setup() {
cnv = createCanvas(320, 240);
capture = createCapture(VIDEO);
capture.size(320, 240);
capture.hide();
}
function draw() {
//show live webcam feed
image(capture, 0, 0, 320, 240);
if (frameCount % 120 == 0){
captureFrame();
}
}
function captureFrame() {
// convert the graphics canvas to string, you can send that string in a POST request.
let imageBase64String = cnv.elt.toDataURL();
// for example purpose, after you retreive the string from the server with a GET request,
// convert it back to an image.
// let showImg = createImg(imageBase64String, "");
// showImg.hide();
// You can use
// image( showImg, 0, 0, 320, 240)
// to draw in on canvas.
}
I am trying to add a text (as watermark) to images. I am using Image/Intervention package. The text shows but I want it to be at top right hand corner of the image and I also want the size increased. The text is currently at top-left corner and the size is extremely small.
This is my code
if($request->hasFile('file')) {
foreach ($request->file('file') as $photo) {
$file = $photo;
$img = Image::make($file);
$img->text('12345 ', 120, 100, function($font) {
$font->size(45);
$font->color('#e1e1e1');
$font->align('center');
$font->valign('top');
});
$img->save(public_path('images/hardik3.jpg'));
}
}
How do I solve this?
From the documentation:
Font sizing is only available if a font file is set and will be ignored otherwise. Default: 12
So you have to specify a custom font just like in the below example:
$img->text('foo', 0, 0, function($font) {
$font->file('foo/bar.ttf');
$font->size(24);
$font->color('#fdf6e3');
$font->align('center');
$font->valign('top');
$font->angle(45);
});
Update
The text alignment is relative to the size of the textbox, but the positioning is given by the x and y coordinates (2nd and 3rd parameters of the text method). To put the text on the right top corner you can do:
$img->text('foo', $img->width(), 100, function($font) {
$font->file('foo/bar.ttf');
$font->size(24);
$font->color('#e1e1e1');
$font->align('right');
$font->valign('top');
});
The text function accepts the X and Y coordinates of the position to insert the text. The text is being printed into the shown position because you used the coordinates 120 and 100.
Try the following:
if($request->hasFile('file')) {
foreach ($request->file('file') as $photo) {
$file = $photo;
$img = Image::make($file);
$img->text('12345 ', $img->width() - 120, 100, function($font) {
$font->size(45);
$font->color('#e1e1e1');
$font->align('center');
$font->valign('top');
});
$img->save(public_path('images/hardik3.jpg'));
}
}
Source: http://image.intervention.io/api/text
This is a continuation of an earlier thread, that was answered by Neil- thanks Neil! I probably should have included this in the first question, but I wanted to simplify things...
Another feature that I need is to have a "dialogue box" that holds a title and some text that animates on and off next to the circle when it comes on. I achieved this in my earlier version prior to the help from Neil. I have spent some time trying to integrate it into the new and improved code and get some unexpected results. For example, if I rollover the first circle on the right, it works as it should, however, if I try to rollover the middle and right circles, they don't work. Oddly, if I refresh and start on the right circle, each will work when moving right to left, until I reach the left one, and then the middle and right don't work- but the left one continues to work. Additionally, if I click on the left circle, it works as it should, but then the others don't work. And conversely, if I click on the right one first, and then move to the middle, the middle works on click, but then the right one does not.
The behavior that I am looking for is that each circle, animate up with the rectangle next to the circle fading in with dynamic text on mouseover and animate down, with the rectangle with text fading out on mouseout. The rectangle with text should fade out on click and not fade up again if the user mousesover the clicked circle (need to remove the mouseover event as well I guess). One additional thing that needs to happen is that the rectangle needs to appear in a different place on the circle, depending where on the map it is- so that it doesn't fall off the map. I did this successfully in the earlier version, but have left that out on the previous post for better clarity. I will include it here so you get the gist of what I'm doing.
My guess is that I need to create a set() of the rectangle/text component and place it in an another set() along with the circle?
Any help on this is truly appreciated! Thanks
// JavaScript Document
var arr = [
[50, 50, "this", "Is text that is to be the abstract"],
[100, 50, "that", "Is text that I hope is here"],
[150, 50, "another thing", "Even more text"]
];
var currRect;
var currTitleTxt;
var currTeaseTxt;
var prevItem;
doMe();
function doMe() {
var paper = new Raphael(document.getElementById('canvas_container'), 696, 348);
for (var i = 0; i < arr.length; i++) {
paper.circle(arr[i][0], arr[i][1], 6).attr({
fill: '#fff',
'fill-opacity': 0.5
}).data("i", [arr[i][0], arr[i][1], arr[i][2], arr[i][3]]).click(function () {
this.unmouseout();
}).click(function () {
if (this.data('selected') != 'true') {
if (prevItem != null) {
prevItem.data('selected', '');
handleOutState(prevItem);
}
prevItem = this.data('selected', 'true');
currRect.animate({"fill-opacity":0, "stroke-opacity":0}, 150 );
currTitleTxt.animate({"fill-opacity":0}, 150 );
currTeaseTxt.animate({"fill-opacity":0}, 150 );
}
}).mouseover(function () {
handleOverState(this);
if(this.data("i")[0] <= 350){ //this is where I test for the position on the map
paper.setStart(); //create rectangle and text set
currRect =paper.rect(17, -20, 265,90).attr({fill:"#999","fill-opacity":0.5});
currTitleTxt = paper.text(25, -8, this.data("i")[2]).attr({"text-anchor":"start",fill:'#ffffff',"font-size": 14, "font-weight":"bold","fill-opacity":0});
currTeaseTxt = paper.text(25, 30).attr({"text-anchor":"start",fill:'#eeeeee',"font-size": 11, "font-weight":"bold","fill-opacity":0});
var maxWidth = 250;
var content = this.data("i")[3];
var words = content.split(" ");
var tempText = ""; //since Raphael doesn't have native word wrap, I break the line manually
for (var i=0; i<words.length; i++) {
currTeaseTxt.attr("text", tempText + " " + words[i]);
if (currTeaseTxt.getBBox().width > maxWidth) {
tempText += "\n" + words[i];
} else {
tempText += " " + words[i];
}
}
currTeaseTxt.attr("text", tempText.substring(1));
var st = paper.setFinish();
st.translate(this.data("i")[0]+10, this.data("i")[1]+0).animate({"fill-opacity":1}, 150 );
}else if(this.data("i")[0] >= 351){ //this is where I test for the position on the map
paper.setStart();
currRect = paper.rect(-280, -20, 250,50).attr({fill:"#999","fill-opacity":0.5});
currTitleTxt = paper.text(-270, -10, this.data("i")[2]).attr({"text-anchor":"start",fill:'#ffffff',"font-size": 14, "font-weight":"bold","fill-opacity":0});
currTeaseTxt =paper.text(-270, 5, this.data("i")[3]).attr({"text-anchor":"start",fill:'#cccccc',"font-size": 12, "font-weight":"bold","fill-opacity":0});
var st = paper.setFinish();
st.translate(this.data("i")[0]+10, this.data("i")[1]+0).animate({"fill-opacity":1}, 150 );
}
}).mouseout(function () {
currRect.animate({"fill-opacity":0, "stroke-opacity":0}, 150 );
currTitleTxt.animate({"fill-opacity":0}, 150 );
currTeaseTxt.animate({"fill-opacity":0}, 150 );
if (this.data('selected') != 'true') handleOutState(this);
});
}
function handleOverState(el) {
el.animate({
r: 8
}, 250).animate({
"fill-opacity": 1
}, 150);
}
function handleOutState(el) {
el.animate({
r: 6
}, 250).animate({
"fill-opacity": 0.5
}, 150);
}
}
I have created a new custom button, can I set a different background image instead of 'circle' or 'triangle' ?
thanks
Chanan
exporting: {
enabled: true,
buttons: {
'realTimeButton': {
id: 'realTimeButton',
symbol: 'diamond',
x: -88,
symbolFill: realTimeColor,
hoverSymbolFill: realTimeColor,
_titleKey: "realTimeButtonTitle",
onclick: function(event) {
// handle change to real time
if ( enable_lastRoundsChart_realtime )
{
// disable real time flag
enable_lastRoundsChart_realtime = 0;
// re-create detail in real time mode disabled
createDetail(cache_last_rounds.last_rounds_data, window.show_top_round_ids);
// enable plotBand
if ( pb_master_chart )
{
pb_master_chart.options.chart.events.selection.enabled = 'true';
pb_master_chart.options.chart.zoomType = 'x';
}
}
else
{
// enable real time flag
enable_lastRoundsChart_realtime = 1;
// re-create detail in real time mode enabled
createDetail(cache_last_rounds.last_rounds_data, window.show_top_round_ids);
// update title
this.setTitle({text:"Players/Drops Per Round"}, {text:"Real Time"});
// if master found, remove plotBand and disable master selection
if ( pb_master_chart )
{
// remove plotBand
pb_master_chart.xAxis[0].removePlotBand('mask-before');
pb_master_chart.xAxis[0].removePlotBand('mask-after');
pb_master_chart.xAxis[0].addPlotBand({
id: 'mask-before',
from: -1,
to: 99999,
color: 'rgba(0, 0, 0, 0.2)'
})
// disable selection
pb_master_chart.options.chart.events.selection.enabled = 'false';
pb_master_chart.options.chart.zoomType = null;
}
}
}
},
According to the docs, the shapes are defined in the Highcharts.Renderer.symbols collection. Inspecting this object reveals the following available shapes:
Highcharts.Renderer.prototype.symbols:
arc: function (a,b,c,d,e){var f=e.start,c=e.r||c||d,g=e.end-1.0E-6,d=e.innerR,h=e.open,i=W(f),j=Z(f),k=W(g),g=Z(g),e=e.end-f<Aa?0:1;return["M",a+c*i,b+c*j,"A",c,c,
circle: function (a,b,c,d){var e=0.166*c;return["M",a+c/2,b,"C",a+c+e,b,a+c+e,b+d,
diamond: function (a,b,c,d){return["M",a+c/2,b,"L",a+c,b+d/2,a+c/2,b+d,a,b+d/2,"Z"]}
exportIcon: function (a,b,c,d){return y(["M",a,b+c,"L",a+c,b+d,a+c,b+d*0.8,a,b+d*0.8,"Z","M",a+c*0.5,b+d*0.8,"L",a+c*0.8,b+d*0.4,a+c*0.4,b+d*0.4,a+c*0.4,b,a+c*0.6,b,a+c*0.6,b+d*0.4,a+c*0.2,b+d*0.4,"Z"])}
printIcon: function (a,b,c,d){return y(["M",a,b+d*0.7,"L",a+c,b+d*0.7,a+c,b+d*0.4,a,b+d*0.4,"Z","M",a+c*0.2,b+d*0.4,"L",a+c*0.2,b,a+c*0.8,b,a+c*0.8,b+d*0.4,"Z","M",a+c*0.2,b+d*0.7,"L",a,b+d,a+
square: function (a,b,c,d){return["M",a,b,"L",a+c,b,a+c,b+d,a,b+d,"Z"]}
triangle: function (a,b,c,d){return["M",a+c/2,b,"L",a+c,b+d,a,b+d,"Z"]}
triangle-down: function (a,b,c,d){return["M",a,b,"L",a+c,b,a+c/2,b+d,"Z"]}
You can also add your own symbol by extending the collection. For example, drawing a simple X:
$.extend(Highcharts.Renderer.prototype.symbols, {
anX: function (a,b,c,d){return["M",a,b,"L",a+c,b+d,"M",a+c,b,"L",a,b+d]}
});
Produces:
Fiddle here.
You have ability to set image as icon
http://jsfiddle.net/Udgb3/
symbol: 'url(http://highcharts.com/demo/gfx/sun.png)',
symbolX:5,
symbolY:0