Javascript and SVG

Here is a link to my code for search string
http://students.gctaa.net/~snicholakos/javascript/search_string2.js

and here is "Dragon Slayer"
http://students.gctaa.net/~snicholakos/javascript/dragon_slayer.js

I also edited my SVG path summary to include the difference between quadratic and cubic bezier curves

SVG For loops and Arrays

• For loops are code that cycles until the "for" statement is no longer true.
• It's formatted as
• for (var variable = #; i < #; increment) {
      code;
  }
• for (var i = 4; i < 24; i++) {
      console.log(i);
  }
• The for loop first looks at the variable and if it applies to the parameter after it then it will apply the increment to the variable and then run the code. It will continue to do this until the for loop is false. In other words, for the code above, the variable i is equal to 4 and as long as it is less than 24 it will increase by 1 and print its current value making the output 4-23
• arrays can store multiple values and its elements start with 0
• they are declared like
• var junkData = ["Eddie Murphy", 49, "peanuts", 31];
•                           [element 0]          [1]      [2]          [3]

I finished the "Search Text for Your Name" lesson, it was more challenging than the other lessons and sometimes I didn't really know what I was doing but I think I get for loops for the most part.
http://students.gctaa.net/~snicholakos/javascript/search_string.js

Inkscape Snail

My Inkscape project is a snail from the show "Spongebob", the only thing it is missing is a shell.

As for my teapot, I could not get any use out of Inkscape, if I filled my teapot lid it would not fill entirely but I was able to fix the teapot body using vim. The problem with the lid is that whenever I fill it, it fills the outside rather than the inside but I do have an idea of how to fix it.

Inkscape

• With the cursor tool, select a shape to
• move it by dragging, ctrl restricts you to vertical and horizontal movement
• scale it, ctrl keeps the width and height proportional
• clicking again allows you to rotate and skew the object
• to move something precisely you can use alt+arrow keys to move by one pixel
• Ctrl click to select and deselect objects in groups
• Page Up and Page Down move objects forwards or back in order
• alt click selects objects over the cursor in order from top to bottom
• shift ctrl c turns an object into a path giving it nodes
• ctrl l removes all unnecessary nodes
• ctrl j does some offset thing that I have to look into
• add nodes by double clicking and delete them with delete

Diagram of overlapping objects

Teapot

I finished making the teapot but as I thought it would not fill correctly. The spout was challenging to make along with the handle because it's not easy to use the control points or make the arcs correct. Besides that though, the figure looks similar to what I drew.

http://students.gctaa.net/~snicholakos/webgraphics/teapot.svg

Teapot

I have been working on my teapot which is pretty challenging and I've already noticed some problems that I will have to deal with. The teapot won't fill correctly because of how I move the pen and I wonder if arcs would be better than curves. The sides look pretty good but I should make the body of the teapot one continuous line instead of moving the pen.

Paths

• d: used to start drawing
• M: move to
• A: makes an arc
• has rx and ry to specify the radius in the x and y direction
• L: makes a line
• coordinates are placed after each letter to specify where they go
• Q: makes a Bezier curve which is a line that is pulled by points like a magnet 
• Quadratic Bezier curves use only one control point
• Cubic Bezier curves use two control points
• lowercase letters are used to specify coordinates from where the "pen" was last left off while uppercase letters are for absolute points
• Z: automatically closes the path