Difference between revisions of "Emergent Web Technologies Spring 2009 Class 10"
m |
|||
| Line 66: | Line 66: | ||
== SVG and Canvas Demos == | == SVG and Canvas Demos == | ||
| − | * [http://wilq32.googlepages.com/Wilq32.Particles.html | + | * [http://www.themaninblue.com/experiment/Blobular/ SVG Blobs] |
| + | * [http://wilq32.googlepages.com/Wilq32.Particles.html Particle Demo] | ||
* [http://www.nearinfinity.com/blogs/jason_harwig/javascript_particle_engine_in_canvas.html Flames with particles] | * [http://www.nearinfinity.com/blogs/jason_harwig/javascript_particle_engine_in_canvas.html Flames with particles] | ||
* [http://skuld.bmsc.washington.edu/~merritt/gnuplot/canvas_demos/ Charts] | * [http://skuld.bmsc.washington.edu/~merritt/gnuplot/canvas_demos/ Charts] | ||
Revision as of 22:42, 15 April 2009
Activity 1
Let's start by checking out a file, modifying it and then committing our changes. I've already checked in a file for this activity. You just need to check it out.
Your svn account is located at the repository below. You'll need to replace ActiveDirectoryId with your own Active Directory Id.
https://svn.iam.colum.edu:8443/svn/EWT/trunk/ActiveDirectoryId
1. Check to make sure that you can connect to your svn repository by using the list command to check which files are listed on your account
svn list https://svn.iam.colum.edu:8443/svn/EWT/trunk/ActiveDirectoryId
You will be asked for a password. Use your Active Directory Password. If everything goes well, you should see a list of the directories that have already been created for your account.
2. Check out the first activity by running the co (checkout) command
svn co https://svn.iam.colum.edu:8443/svn/EWT/trunk/ActiveDirectoryId/activity1
You should see a message indicating that you have checked out the latest revision of the activity.
3. Navigate to the folder for the project
cd activity1
Open up the project's only file activity1.txt and make a change to the file. Save your changes.
4. Use the status command check which files have changed.
svn status
You should see the following message
M activity1.txt
The message indicates that activity1.txt has been modified.
5. Commit your changes to the file by using the commit command
svn commit -m "Made a change to the file"
Each commit requires a message indicating what you did to the file. The messages don't have to be long, but they should explain a little bit about your changes.
6. Create a new file in your project directory and save it. Run the status command again. This time you should see a message that says
? new.txt
This message indicates that subversion sees the file, but it doesn't know if you want it to be managed by version control. If you don't want the file to be part of version control, you can just ignore it.
7. We want the new file to be part of version control, so use the add command to add the file
svn add filename.txt
And then commit your changes your changes with the commit command
svn commmit -m "Added a new file"
8. If you were working on this project with other people, you would want to make sure that you got all of the latest changes. Use the update command to make sure that your version of the project is up to date.
svn update
9. Now use the log command to see what kind of changes have been made to your project
svn log
You should see a list of all of the changes you've made to the project so far.
SVG and Canvas Demos
Activity 2
I have created a small Raphael canvas for you with some random shapes on it. Use the Raphael API reference and the code I've given you to make the modifications below.
1. Check out the files from your repository using the co command
svn co https://svn.iam.colum.edu:8443/svn/EWT/trunk/ActiveDirectoryId/activity2
Open the index.html file in your browser and you should see the canvas I've created for you. You will need to edit the graphics.js file to change the canvas.
Refer to the Raphael API for the commands that you will need to complete this assignment.
2. Your new canvas should have 2 green circles, each with a radius of 20 pixels. Place the circles somewhere in the middle of the canvas. You can modify the existing small, red circle to get one of your circles.
You will need to use the circle function to create your circle, and the attr function to modify the colors.
3. Add a long, yellow rectangle to your canvas, and place it in the right, bottom corner of the screen. You can use the existing rectangle (currently a square) and modify it so it matches the assignment.
You will need to use the rect function.
4. Add a path to the canvas that starts at the top right of the canvas and down, toward the center of the canvas. The existing path starts at the bottom left and moves toward the center. You can modify the array of points stored in the points variable. The points at the beginning of the array are drawn before the points at the end.
You will need to use the path, moveTo and cplineTo commands to draw your path.
5. Add a large, gray circle to the top left of your canvas. When you hover over the circle it should turn purple. When you click on the circle it should shrink down to a smaller circle. The current canvas has a small, black circle that changes colors when you hover over it and grows when you click on it.
You will need to change the starting size of the circle (determined by the call to the circle function) and the values that are set by the animate function. You will also need to change the colors that are set by the attr function.
Event handling is still handled by the jQuery events that are added to the node for the circle. You should only need to change the calls to the Raphael functions.
