Video Editing

My Senior Project was to learn to edit video. This year has given me the opportunity to expand my skills. I feel more confident editing a movie.
I have been working closely with Enkhbileg Batbold and we have been making small films. We created a YouTube channel. Click here to watch our videos.

Slideshow and Drop Down menu.

Well the slideshow was still a problem, but not anymore. We put the info in the description in the photo. We are starting to work on the drop down menu. Gustavo has styled it in a whole new way.

Page here.

More problems

We took a good look at the site this Monday, and we liked it. I was clean. I went to main.css to take a good look and saw that something were images, of course both of us didn't want to use images. We took that out and the site looked like blocs. We agreed that we will work on the style of the page later.
The slideshow was still a problem. The images were too small, and to resize them would mess the pixels. Also the arrows to change images were in the way, all we did was put the opacity low.

opacity: 0.8;

Everything seems to be working fine for now.

Slideshow to the site

We are done cleaning the code and other necessities that the site needed. Gustavo is still in the process of fixing the drop down menu. I was working on the slideshow, but realized that I didn't like its look. I tried editing it: change the color and speed and size, but it was really complicated  to read the code.
I went online to look at some ideas, and came across this site. I looked at some demos, but really liked this one in particular: #12 jFlow Gallery. I started working on it and it was well written easy to follow.

Here is the site with the slideshow.

Screen Rampage!!

This week we started working on the Arlington Chorus Site.
I took advantage of the screen benefits.
Gustavo and I split the work, he was going to create the drop down menu, and I had to create the slideshow.

I had already created a slideshow and drop down menu for the site, so we just took that code and change a few things..

All we need to do now is contact Kevin, so he can tell us what color and what content he wants in the home page.

Site almost complete here.

Screen

Today I learned how to use screen:

First we opened the terminal.

We got into the sever amazon.elkner.net and got Matt to set SUID permission there.

As complicated as it looked Matt guided us through it.

We had to type screen -S username

Then set up the multiuser on. Which is enabled by pressing the keyboards CTRL-a then shift :

Then type multiuser on and acladd useryouwanttoadd

Now the user who wants to join the session needs to type:

screen -x hisusername/hissession name




This should connect you.

Login page

Managed to create a madlib, but wanted to take it to the next level. I was bored and decided to see if I could created a login page. All I need to learn now is about storing peoples data, and I'm set.

Madlib

I started working the madlib page. When I was done I wanted the python file to be small, and not have all the html codes in there.

Well I learned that the open('nameofthefile.tpl', 'r').read() can be used to open the story you have in a different file, this made everything much easier for me and for everyone in class. We can now style the pages to your own liking.

It does not necessarily have to end in .tpl it can be anything suck as .html but I find it more helpful to save it as that.

Project 5

This week I created a Brazilian flag. Click here to see example.
I created a rectangle that covers the whole canvas.
I learned this new code globalCompositeOperation and here you can assign it: source-over which puts the newer shapes on top the canvas and so on.

In this case I'm using source-over this will make the new shapes be on top of the old ones.

I created two triangles and moved them around, the first one was tricky, but for the second one you can use the same, just change the coordinates of the x, y.

Senior Project!

After switching my senior project for 3 times, I have decided to stick with film making. My friend Mario is our actor. If you want to check some of our stuff out, click here.

Project 4

Canvas haa neat property called save(); and restore(); which allows you to be able to store certain codes and be able to call them. Learning this technique can save you time.

To view and example click here.

The source code:

function draw(){
 var ctx = document.getElementById('canvas').getContext('2d');

   ctx.fillStyle = '#0000FF'
   ctx.fillRect(0, 0, 15, 15);
   ctx.save();                 

   ctx.fillStyle = '#FFA500'
   ctx.fillRect(5,5,120,120);
   ctx.save();

   ctx.fillStyle = '#C34A2C'
   ctx.globalAlpha = 1.5;
   ctx.fillRect(3,3,90,90);

   ctx.restore();
   ctx.fillRect(4,4,60,60);

   ctx.restore();
   ctx.fillRect(6,6,30,30);
}

Project 3

This week we started working around with colors.
I had a hard time understanding how it works.
I created a basic color picture. Seen it here.

The source code:

function draw(){
var ctx = document.getElementById('canvas').getContext('2d');
ctx.fillStyle = '#736F6E';
ctx.fillRect(0, 0, 75, 75);
ctx.fillStyle = '#617C58';
ctx.fillRect(75, 0, 75, 75);
ctx.fillStyle = '#D4A017';
ctx.fillRect(0, 75, 75, 75);
ctx.fillStyle = '#6698FF';
ctx.fillRect(75, 75, 75, 75);
ctx.fillStyle = '#C12283';

for (var i = 0; i < 7; i++){
 ctx.beginPath();
 ctx.arc(75, 75, 10+10 * i, 0, Math.PI * 2, true);
 ctx.fill();
 }
} 

The math equation creates the circle thats in the middle of the canvas.
Changing the number in i < 7 will either increase or decrease the size of the circle.

Project 2

Week two. I went of course this week, and started looking at other tutorials. I came across a text one and decided to create a reflection of it. Here it the code:

window.onload = function(){
var canvas = document.getElementById("test");
var context = canvas.getContext("2d");

context.translate(canvas.width / 2, canvas.height / 2);
context.font = "30pt Calibri";
context.scale(-1, 1);
context.textAlign = "center";
context.fillStyle = "#A52A2A";
context.shadowColor = "#800000";
context.shadowBlur = 20;
context.fillText("RACECAR", 0, 0);
}

And the outcome is available here.

Explanation:
To put the text in the canvas we need the:

context.fillText

to have a shadow we put:

context.shadowColor

and for the mirror:

context.scale(-1, 1)

Project 1

This week we started working on Canvas. To include a canvas in the website we start by putting the canvas tags.

function drawShape(){
    var canvas = document.getElementById('tutorial');
    if (canvas.getContext){
    var ctx = canvas.getContext('2d');
  
}
}

This creates the basic set up for a canvas. In order to be able to draw you need to add

ctx.fillStyle

ctx.fillRect

ctx.beginPath

ctx.arc(

ctx.lineTo

ctx.moveTo

ctx.lineTo

ctx.stroke

To view a example click here.