Etch a Sketch-like drawing in Matlab

Question

I'm making a Graphical user interface in Matlab and have the following setup:

And then I've got this code in the slider callbacks:

plot(get(handles.slider2,'Value'),get(handles.slider1,'Value'));
plot(get(handles.slider2,'Value'),get(handles.slider1,'Value'));

So, everytime I adjust the slider on the left, the dot moves +1 vertical. And when I adjust the bottom slider the dot will move +1 horizontal.

What I actually want is to draw a line every time I adjust one of the sliders. And that the previous actions still will be visible on the graph. So that afterwards, you could see the whole route from the beginning to the end.

Answer 1

Here is something to get you going. The code is quite repetitive, the trick is to:

1) Create a Nx2 array to store the moving point/line's coordinates, updated as the sliders are moved. The 1st column is the x-coordinate and the 2nd is the y-coordinate.

2) Create a listener object associated with each slider to produce a smooth, continuous drawing.

3) After issuing the hold on command, only display the last row of the array containing the positions.

Here I use a scatter plot but I'll let you figure out how to use a LineSeries object instead. That's easy :)

Also you can customize the appearance of the points. Here I made the starting point a big black dot, and each time the slider is release (when its callback is executed) a blue dot is displayed.

function DrawMarkerLine(~)
clc
clear

hFig = figure('Position',[100 100 400 400],'Units','normalized');

%// create axes with handle
handles.axes1 = axes('Position', [0.2 0.2 0.6 0.6],'XLimMode','manual','YLimMode','manual','XLim',[-4 4],'YLim',[-4 4]);

%// create x slider with handle
handles.x_slider = uicontrol('style', 'Slider','Min',-4,'Max',4,'Value', 0,'units','normalized','position', [0.2 0.08 0.6 0.08], 'callback', @(s,e) UpdateX);
handles.SliderxListener = addlistener(handles.x_slider,'Value','PostSet',@(s,e) XListenerCallBack);


%// create y slider with handle
handles.y_slider = uicontrol('style', 'Slider', 'Min', -4, 'Max', 4, 'Value', 0, 'units', 'normalized', 'position', [0.08 0.2 0.08 0.6], 'callback', @(s,e) UpdateY);
handles.SlideryListener = addlistener(handles.y_slider,'Value','PostSet',@(s,e) YListenerCallBack);

%// Initialize Nx2 array  (x and y coordinates) containing all the positions
handles.AllPositions = [0 0];
handles.Sc =  scatter(handles.axes1,handles.AllPositions(1,1),handles.AllPositions(1,2),200,'k','filled');


%// set axis equal to the sliders min and max
set(handles.axes1, 'YLim', [-4 4], 'XLim', [-4 4],'XTick',-4:1:4,'YTick',-4:1:4);

guidata(hFig,handles);

%// Listeners callbacks followed by sliders callbacks. They are all the ame
%// basically.

    function XListenerCallBack

        handles = guidata(hFig); %// Get handles.

        %// Get position of both sliders
        xval = (get(handles.x_slider,'value'));
        yval = (get(handles.y_slider,'value'));

        %// Concatenate all values
        handles.AllPositions = [handles.AllPositions; xval yval];

        hold on

        %// Draw markers        
        scatter(handles.AllPositions(end,1),handles.AllPositions(end,2),40,'r')
        drawnow

        set(handles.axes1, 'YLim', [-4 4], 'XLim', [-4 4]); %// Set axis limits

        guidata(hFig,handles);
    end

    function YListenerCallBack

        handles = guidata(hFig);

        xval = (get(handles.x_slider,'value'));
        yval = (get(handles.y_slider,'value'));

        handles.AllPositions = [handles.AllPositions; xval yval];

        hold on
         %// Draw markers        
        scatter(handles.AllPositions(end,1),handles.AllPositions(end,2),40,'r')
        drawnow

        set(handles.axes1, 'YLim', [-4 4], 'XLim', [-4 4]); %// Set axis limits

        guidata(hFig,handles);

    end

    function UpdateY(~)

         handles = guidata(hFig); %// Get handles.

        %// Get position of both sliders
        xval = (get(handles.x_slider,'value'));
        yval = (get(handles.y_slider,'value'));

        handles.AllPositions = [handles.AllPositions; xval yval];

        hold on
         %// Draw markers        
        scatter(handles.AllPositions(end,1),handles.AllPositions(end,2),100,'b','filled')
        drawnow

        set(handles.axes1, 'YLim', [-4 4], 'XLim', [-4 4]); %// Set axis limits


        guidata(hFig,handles);

    end

    function UpdateX(~)

         handles = guidata(hFig); %// Get handles.

        %// Get position of both sliders
        xval = (get(handles.x_slider,'value'));
        yval = (get(handles.y_slider,'value'));

        handles.AllPositions = [handles.AllPositions; xval yval];

        hold on
         %// Draw markers        
        scatter(handles.AllPositions(end,1),handles.AllPositions(end,2),100,'b','filled')
        drawnow

        set(handles.axes1, 'YLim', [-4 4], 'XLim', [-4 4]); %// Set axis limits


        guidata(hFig,handles);

    end
end

Sample output:

Note that the slower you move, the closer points will be from one another on the plot. I moved quite fast, hence the large space between some points.

Have fun!