Plot curves with mouse using a graphical array

machinedothis

Hi There,

I am new to p5.js and programming in general. What I want is a graphical array with x and y values and a set number of points that can be drawn in with a mouse to plot curve shapes ( eg the Gaussian bell shape).

If this can be done I was also wondering if p5 can then read through each point in the curve and send this data to the amplitude of an oscillator to produce a curve shaped amplitude envelope instead of a typical ADSR, where the x axis represents time and the y axis represents amplitude?

Any little help will be much appreciated, Thanks

fuzzySi

That should be possible.

There is an ADSR code here, if it helps

https://forum.processing.org/two/discussion/15885/how-to-make-an-adsr#latest

machinedothis

Hi fuzzySi, thanks for responding.

I am sorry but this is not exactly what I was looking for. What I wanted was to figure out a way of having a box in p5.js and be able to draw in it with the mouse to form curves and other arbitrary shapes. To show you an example here is a website showing a Gaussian curve in an array plot:

http://uk.mathworks.com/help/dsp/ref/dsp.arrayplot-class.html

This is the kind of thing I was looking to do, but I want to assign this to the amplitude of an oscillator in p5.js where each point in the array represents a point in time (x-axis) and the y-axis is the amplitude (0 to 1). Is this something that can be done in p5.js? If so how should I go about it?

I am trying implement this in a web browser with the web audio API.

fuzzySi

I've not used p5.js or the web audio API so can't help you there. I'm sure someone will be along who can! Is the oscillator audio, and the wave shape at audio frequency? ie the wave shape you linked to would be a audio sine wave? Or the wave acts as a volume curve / ADSR - what sort of timescale would that curve be over?

For drawing a curve, you could have an array of [width], and the mouse Y position as it leaves each point along the X axis gets fed into the array. It would be strighforward to use this array to control the amplitude.