Skip to content
Browse files

everything added, help text also added

  • Loading branch information...
1 parent d15cb8d commit 8b4efd254b57c35714b75125688b9904295a2f9a @johanbrook johanbrook committed Sep 4, 2012
View
BIN .DS_Store
Binary file not shown.
View
BIN hackskel/.DS_Store
Binary file not shown.
View
49 hackskel/complicated.js
@@ -0,0 +1,49 @@
+
+ var drawTimeout = null;
+ document.addEventListener('DOMContentLoaded', function(){
+ var v = document.getElementById('v');
+ var canvas = document.getElementById('c');
+ var context = canvas.getContext('2d');
+ var back = document.createElement('canvas');
+ var backcontext = back.getContext('2d');
+ var cw,ch;
+
+ v.addEventListener('play', function(){
+ cw = v.clientWidth;
+ ch = v.clientHeight;
+ canvas.width = cw;
+ canvas.height = ch;
+ back.width = cw;
+ back.height = ch;
+ draw(v,context,backcontext,cw,ch,1);
+ },false);
+
+},false);
+
+function draw(v,c,bc,w,h,value) {
+ if(v.paused || v.ended) return false;
+ // First, draw it into the backing canvas
+ bc.drawImage(v,0,0,w,h);
+ // Grab the pixel data from the backing canvas
+ var idata = bc.getImageData(0,0,w,h);
+ var data = idata.data;
+ // Loop through the pixels, turning them grayscale
+ for(var i = 0; i < data.length; i+=4) {
+ var r = data[i];
+ var g = data[i+1];
+ var b = data[i+2];
+ var brightness = (3*r+4*g+b)>>>3;
+ data[i] = r * vidData[0] * vidData[1];
+ data[i+1] = g * vidData[0] * vidData[2];
+ data[i+2] = b * vidData[0] * vidData[3];
+ }
+ idata.data = data;
+ // Draw the pixels onto the visible canvas
+ c.putImageData(idata,0,0);
+ // Start over!
+ drawTimeout = setTimeout(function(){ draw(v,c,bc,w,h,value); }, 0);
+}
+
+function changeVideo(attribute,direction) {
+ vidData[attribute] += direction * .5
+}
View
29 hackskel/index.html
@@ -0,0 +1,29 @@
+<html>
+ <head>
+ <script src="video.js"></script>
+ <script src="complicated.js"></script>
+ <title>Vaishaal's Instabooth</title>
+ </head>
+ <body>
+ <h1>VAISHAAL SHANKAR is hawt</h1>
+ <video id="v"></video>
+ <canvas id="c"></canvas>
+ <script>
+ var vidData = [1, 1, 1, 1]; //bright,r,g,b
+ function changeVideo(i, value) {
+ value = value/50;
+ vidData[i] = value;
+ }
+ </script>
+ <div>
+ Brightness
+ <input type="range" min="0" max="150" value="75" step="1" onchange="changeVideo(0, this.value)"></input>
+ Red
+ <input type="range" min="0" max="150" value="75" step="1" onchange="changeVideo(1, this.value)"></input>
+ Green
+ <input type="range" min="0" max="150" value="75" step="1" onchange="changeVideo(2, this.value)"></input>
+ Blue
+ <input type="range" min="0" max="150" value="75" step="1" onchange="changeVideo(3, this.value)"></input>
+ </div>
+ </body>
+</html>
View
9 hackskel/readme.txt
@@ -0,0 +1,9 @@
+This will briefly explain what the two helper files provided do. Please do not fret if you don't understand the jargon, or what is being said below. We will go over everything in great detail at the workshop.
+
+video.js - This file (when imported) will look for a video tag in the html with an id="v", it will then insert webcam video into that tag.
+
+complicated.js - This file (when imported) will look for an array of length 4 with the name vidData in your javascript code.
+vidData is an array that corresponds to the brightness, red, green & blue values used to scale the original video stream.
+It will then create a copy of the original video stream with the corresponding scale (as given by vidData) .
+
+
View
0 hackskel/server.js
No changes.
View
12 hackskel/video.js
@@ -0,0 +1,12 @@
+
+ navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
+ navigator.mozGetUserMedia || navigator.msGetUserMedia;
+ window.URL = window.URL || window.webkitURL;
+
+ navigator.getUserMedia({video: true}, function(localMediaStream) {
+ var video = document.getElementById("v");
+ video.autoplay = true;
+ video.src = window.URL.createObjectURL(localMediaStream);
+ }, function(error) {
+ console.log(error);
+ });
View
4 hackskel/view.html
@@ -0,0 +1,4 @@
+<html>
+</html>
+
+
View
76 help.md
@@ -0,0 +1,76 @@
+Hackers@Berkeley Intro Workshop
+================================
+This is list of definitions and useful tips that could help you!
+All the code in this document is in javascript
+
+##Simple Programming Review
+
+###Functions
+A function is an fundemental block of programming that DOES something. Think of functions in programs just like you think of functions in math. f(x). f by itself is the function, x is the argument, and f(x) is the value that the function spits out. Please note the difference between the three. Say that f(x) squares things. f would be the abstract notion of squaring something. x would be whatever value you would want to square, and f(x) would be the value squared.
+
+In programming when you are writing out a function, you write return before the value you want the function to spit out.
+```function square(x):
+ return x*x
+
+>square(4)
+16
+```
+
+###Variables
+Another basic block of programs are variables. Again this is very similar to variables in math. Variables are just containers for THINGS in programs, they could hold numbers (like they do in math), but they could also hold functions. Think about the square example. We don't want to keep referring to the square function as "the square function" so we can call that f. Variables can hold functions, numbers, arrays and much more.
+
+Also in javascript, all variables are prepended by the keyword var.
+```
+function square(x):
+ return x*x
+
+>var y = square(2)
+>y
+4
+>var n = square
+>n(9)
+81
+```
+Array
+======
+
+Arrays are the last major block of programming you will need to understand for today. Arrays are just lists of things in programs. They usually follow the syntax [x,y,z]. Arrays can also be stored as variables. In programming we start counting at 0, so the indices for array elements start at 0. So x is actually the 0th element of the array! The way you acces an element of an array is: array[index]. So say the array a was an array [x,y,z]. a[0] would equal x, a[1] would equal z and so on.
+
+```
+> var ar = [1,2,3,4];
+> ar[2]
+3
+>ar[1]
+2
+>ar[0]
+1
+
+```
+
+##Jargon
+
+Hack - To make or create something cool and out of the ordinary.
+Hardware Hacking - Hacking primarily dealing with electronics and circuit boards
+Software Hacking - Hacking primarily dealing with computer programs, the web and the operating system.
+
+Server - A computer that gives you stuff, this could be webpages, a video game room, or your grades. (it serves you stuff... get it?)
+
+Client - Basically any device that receives stuff from servers, anything that receives data, and demands data from servers (i.e browsers, cell phones, xbox etc.)
+
+Request - A message that the client sends to the server in order to receive stuff back. (The client is requesting information... get it?)
+
+Front-End - Usually the type of programs and code that sit on the client, like html (for web pages), or any sort of interface that lets you make requests to the server.
+
+Back-End - Usually the type of programs and code that sit on the server. These programs do things like number crunch, employ complex algorithms in order to get the data that the client requested.
+
+HTML - Hyper Text Markup Language, the ubiquitous language of the web, a primarily static language that the browser reads, understands and displays for you. This language lets you make things look nice (change font size, insert pictures etc.)
+
+Javascript - A language that assists HTML with doing cool stuff like actually making things change on the page. Remember HTML is static.
+
+Abstraction - Very very very important concept that states that one does not need to understand the intercracies of something to use it. It helps us hack because we build functionality on top of other people's code without actually undertstanding how their code works. We only need to know what it does!
+
+API - Application Programming Inteface. With the use of abstraction companies and other hackers provide API's to their program which are basically a set of rules and functions that the company/hacker provides so that other people can write programs that use that company/hacker's program's functionality.
+
+
+Sorry for all the typos - Wrote this at 4 am.
+
View
3 software/complicated.js
@@ -44,6 +44,3 @@ function draw(v,c,bc,w,h,value) {
drawTimeout = setTimeout(function(){ draw(v,c,bc,w,h,value); }, 0);
}
-function changeVideo(attribute,direction) {
- vidData[attribute] += direction * .5
-}
View
9 software/server.js
@@ -1,9 +1,4 @@
var express = require('express');
-var app = express(),
- server = require('http').createServer(app)
-
+var app = express();
app.use('/', express.static(__dirname));
-
-
-
-server.listen(8000);
+app.listen(8000);
View
0 test.html
No changes.

0 comments on commit 8b4efd2

Please sign in to comment.
Something went wrong with that request. Please try again.