Archive for the ‘Programming’ category

3D Hill Plot with MATLAB

July 27th, 2010

I thought I’d share some of the easier things I had to do as part of the first year of my course. One of those tasks was to generate a 3D plot of a function and then also plot 2D cross sections at different values.

We start off with a mathematical function that describes, what we will call, our hill. This function represents the ‘height’ of our hill, h if you will, at the different points in x and y.

exp(-(x.^2)-(y.^2)) + 0.5.*exp(-((x-2).^2)-(y.^2));

So, in our MATLAB script we first of all generate a grid of points using x values from -1.5 to 3.5 and y values from -2 to 2. The follow code achieves this.

x = linspace(-1.5,3.5,50); % 50 values of x
y = linspace(-2,2,25); % 25 values of x
[xg yg] = meshgrid(x,y); % generate points

And next we generate the height values of our hill, using the grid we have just created with x -> xg and y ->yg.

h = exp(-(xg.^2)-(yg.^2)) + 0.5.*exp(-((xg-2).^2)-(yg.^2)); % calculate height values

With our hight values in the array h, all we need to do now is plot them. Firstly, to create the 3D plot we just plot x,y and h using the surf() function.

figure(1); % create new figure window
surf(x,y,h); % surface plot
title('3D Hill Plot'); % title and axis labels
xlabel('x');
ylabel('y');
zlabel('height');

Now, to look at several slices through the hill at different values of y, we need to select the different values of y from its array and plot them on the same graph.

figure(2);
plot(x,h([1,10,20],:)); % plot 1st, 10th and 20th values of y
title('2D Hill Plot'); % title and axis labels
xlabel('x');
ylabel('height');
legend('y = -1.5','y = -0.4','y = 1.2',0); % legend not overlapping any of the plot

Putting it all together you get a 3D plot of the function and the cross sections in two windows. Job done.

Create Fractals with MATLAB

July 26th, 2010

As part of my University course we had to use the scientific MATLAB programming language, and computing environment,  for several tasks in the first year. While the set tasks were as drab and dreary as you would expect from a Physics course, it taught us the basic skills and the problem solving skills key to the course.

In my spare time I ported a PHP script my friend created to MATLAB which enables the creation of beautiful fractals from the Mandlebrot set. The maximum image size you can create depends on the amount of memory available in your system and the script isn’t something I’ve spent a lot of time on so feel free to improve on it.

On my laptop, a 10,000 x 10,000 pixel image took about an hour to create, using 20 iterations. You may find this differs on other machines.


Download the MATLAB Fractal Generator Code.

Microsoft Silverlight (WPF/E)

April 16th, 2007

Microsoft SilverlightI saw in the news yesterday that Microsoft released its competitor to Adobe’s (formerly Macromedia’s) hugely successful and widely-used Flash presentation software and ActionScript scripting language. Microsoft hopes that its Windows Presentation Foundation/Everywhere, now Silverlight, will claw some market share from Flash’s monopolistic grip on the web. Employing already established JavaScript and Microsoft’s proprietary XAML language, Silverlight would seem to be something to watch, even at this early stage. Today I decided to take a go at it and see if even I could use it. I’ve had limited experience with ActionScript and XML so I wanted to to compare it to my previous experiences. Here’s how I got on.

Before you read on, to view the things I’ve made, go to the download page and download the cross-browser plugin.

Silverlight Basics

I’m not going to turn this into a tutorial on how to setup everything – it can all be found in the official SDK, also available on the download page – but I will show the XAML and relevant JavaScript files that accompany each of the things I am to show.

The SDK’s quickstart guide was a really simple and easy explanation of the process of creating very simple shapes at first. I was a little confused at first because the XAML files I create utilise the canvas tag and initially I got it mixed up with the HTML tag of the same name. Firstly you create the canvas you’re going to ‘draw’ in. [Nearly] everything else goes inside this. The layers on the canvas, or z-index, are defined by the order the objects are created – those created later on in the script are on the top layers.

My first foray into it was a simple monochrome target which just created several ellipses in each other with the smallest one having a border instead of a fill. Here’s the .xaml file:



  
  
  
  
  

You can view the example’s finished product if you have the plugin installed.

Using Images

Next I did a bit of playing around with images. There are several ways you can use images on your canvas which include using them as a filling for an object or importing them on their own. In this example, I’ve created a rectangle and used an image of a pound coin and then overlayed it with 4 rectangles of differing colours with an opacity set. Along side it, I’ve added a gradient overlay to the image.



   
    
      
    
  

	
	
	
	
	

   
    
      
    
    
      
        
        
      
    
  

You can view the example’s finished product if you have the plugin installed.

Adding Multimedia

Adding media like music and video is incredibly easy for beginners to grasp. A single deceleration is used for both music as well as video which is rather handy. Controlling the media object is also incredibly easy and my quick look over the documentation for the MediaElement object showed a lot of options are available for controlling it. Firstly I tried just simply embedding a sound:

Next, I added the parameter to stop it automatically playing when loaded and added the controls for stop, pause and play the file. These controls also work with video media, as shown in the quick start guide provided in the SDK. The code involved this XAML code and the following JavaScript.


  
    
      
        
          
          
        
      
    
    stop
  

  
  
    
      
        
          
          
        
      
    
    pause
  

  
  
    
      
        
          
          
        
      
    
    play
  

And this JavaScript, inserted either in the head of the page or an external JavaScript file:

You can view the example’s finished product if you have the plugin installed. Click the play, pause and stop buttons to test it out.

Lighting up the web?

Obviously I have to take into account the infancy in terms of development of Silverlight but it’s wide array of features is quite appealing. It took me a quarter of the time to stream a video in Silverlight than it did to do it manually in Flash via ActionScript. At the moment, Silverlight isn’t anywhere near Flash in terms of functionality but even at this early stage it does have some advantages over Flash in terms of the time saving it allows.

Silverlight Promotional ImageI’ve quite enjoyed doing some stuff in it and I’m sure that the abilities of Silverlight go far beyond drawing circles and streaming media. One nice example of the capabilities is this page turning program and this interactive WYSIWYG editor. For me it still feels like it’s a glorified version of the HTML canvas element with some JavaScript added. It doesn’t feel smooth like Flash and currently feels slightly buggy and laggy but I hope this will change in future revisions.

I’ve enjoyed using HTML, XAML and JavaScript and I think that it will eventually catch on – if it doesn’t then Microsoft will probably force it on us in some way. At the moment the plugin is available for both Windows and OSX but I hope Microsoft don’t make the mistake Adobe made by not keeping the Linux community up to date. Try it out.

PHP Lesson 8

February 14th, 2007

Sunny Man’s TutorialsMy lessons are now into their second week and we’ve still got a way to go yet. This week we will be looking into IF and WHILE statements, $_GET, $_POST and we’ll also look into arrays near the end of the week.

Yesterday we did a simple lesson on $_GET and how to get values from a URL. Today another simple lesson on $_POST and the confusion that comes with it. I introduced you to $_POST in last Friday’s big special and today we are going into much more detail.

Lesson 8: $_POST and Forms

As I showed in Friday’s round up, we use $_POST to collect the values of submitted form data. Some confusion that I had for a while was whether or not to use the name or id attribute in the form fields to let $_POST work. I’ll settle this now – for $_POST to collect the data from the form fields, you need to assign a name attribute to them. The id can be used for labels, CSS classes and other things. Here’s a sample form form.php:

<form action="process.php" method="post">
First Name: <input type="text" name="fname" size="25" />
Last Name: <input type="text" name="lname" size="25" />
Over 16? <input type="radio" name="age" value="1" /> Yes <input type="radio" name="age" value="0" /> No
<input type="submit" value="submit form" />
</form>

In the above form we would get 3 values returned through $_POST. These would be the first name, last name and over 16 values. Here’s how we’d capture these values. This file would be process.php, as determined in the form’s first line:

<?php
$fname = $_POST['fname'];
$lname = $_POST['lname'];
$age = $_POST['age']; //either 1 or 0

$name = $fname." ".$lname; //stitch the first and last names together
?>

Pretty simple to get the form fields’ values. On Friday we are going to combine everything and a lot of form fields to create a signup form which will include this, arrays and a bit of validation.