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

Rock Paper Scissors

Here is my completed rock, paper, scissors project
http://students.gctaa.net/~snicholakos/javascript/rps.js

SVG and Code Academy

I finished fixing up both snowmen and I am perfectly okay with you using them as examples.
http://students.gctaa.net/~snicholakos/webgraphics/broken_snowman.svg

Code Academy
function: a set of code given a name and when called the code is executed allowing code to be repeated easily. 

function syntax: code must be contained within braces and all lines of code end with a semicolon.

parameters: the input for a function. It is called with the function and determines the output.
function call: to call a function, write its name with a parameter listed afterwards and it will run the code within the function
D.R.Y.: Don't Repeat Yourself. Use functions when possible to limit repetition.
return statement: allows a value to be used for a later use.
scope of a variable: variables can either be specific to a function or used throughout all the code
var in variable scope: var can be used to specify when a local or global variable should be used

Broken Snowman

The solution to the broken snowman problem would be

1. Both the x-min and y-min would be 0 and the y-max would be 900 I think because the lowest segment is 700 down and has a radius of 200. The x-max, I think, would equal 515 because the right hand goes only as far as 550 and the left hand goes to the right 35. 
2. The view box is now viewBox="0 0 515 900" 
3. I have changed the height and width to be proportional: width="10.3cm" height="18cm"
4. The scarf is broken in the sense that you moved it at the bottom of the file which no longer makes it the "back of scarf" but instead it has priority over all other shapes and is in the front everything.

I tested everything out on my snowman first, it was a bit tedious at first but now I figured out how to get rid of the white space so I will fix the broken snowman when I get the chance.

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

Snowman

Here is my completed project for lesson 3
http://students.gctaa.net/~snicholakos/webgraphics/snowman.svg

Choose your own adventure Project

http://students.gctaa.net/~snicholakos/javascript/game.html

The project was helpful in reinforcing my understanding of some of JavaScript. It mainly focused on else/if statements but it was still helpful and I enjoyed it because it was funny.

Getting Down with SVG lesson 3

Lesson 3 briefly talked about the different shapes that can be used in SVG and how they can be modified.

If the line becomes the last shape defined then it is put in the front of all the other shapes. The last shape defined will always be in front while the first shape defined will be put in the back so it can be overlapped by every other shape.
1. shape farthest back
2. shape in front of 1
3. shape in front of 2 and 1
4. etc

The shape attributes are pretty simple. The new shapes work like a circle except you have to specify points where there should be a corner and for the line you specify points where it should start and end.