TITLE: 100 Days of Emojis and Interactive Web Design
DATE: January, 2016 - Present
TOOLKITS: Javascript, P5.js, AngularJS
DESCRIPTION:
100 Days of Making is a new class at ITP that focuses on having a daily art practice for a period of 100 days. I'm interested in emojis, drawing, design and web development, so I found a way to combine all my interests. I'm going to make one small interactive web design everyday under a theme of emojis. I hope I can get better at Javascript especially Angular as I iterate the design process over and over again. Everyday I will write down some notes here, and post a video about the web design on Tumblr and Instagram.
The code will be on my Github or Codepen.
My plan is to follow
- AngularJS tutorial
- Codepen
- Other good JS tutorial
Day21: drawing tool 2.0
http://jsfiddle.net/septends/yhz5Lno3/8/
Day20: drawing tool
http://jsfiddle.net/septends/yhz5Lno3/7/
Day19: paperjs pixel square
Day18: paperjs pixel circle
Day17: watermelon
Day16: change faces
Day15: Valentines day
angularJS: Scope,
If we consider an AngularJS application to consist of:
- View, which is the HTML.
- Model, which is the data available for the current view.
- Controller, which is the JavaScript function that makes/changes/removes/controls the data.
Then the scope is the Model.
The scope is a JavaScript object with properties and methods, which are available for both the view and the controller.
If you make changes in the view, the model and the controller will be updated.
Root Scope
All applications have a $rootScope which is the scope created on the HTML element that contains the ng-app directive.
The rootScope is available in the entire application.
If a variable has the same name in both the current scope and in the rootScope, the application use the one in the current scope.
AngularJS Filters
Filters can be added to expressions by using the pipe character |, followed by a filter.
Services: $location, $http, $timeout, $interval
Day14: WallPaper, angularJS
Day13: So Hungry, multi-particle system, Processing
Day12: Moon #Processing
Day11: Too Much (work) #p5.js
Day10: Transition Glasses
Continue learning AngularJS, I learned ng-show in a hard way. I couldn't select element by id in AugularJS, I tried use angular.element, but it doesn't work. But angular has this ng-show makes things very easy.
<!-- when $scope.myValue is truthy (element is visible) --> <div ng-show="myValue"></div> <!-- when $scope.myValue is falsy (element is hidden) --> <div ng-show="myValue" class="ng-hide"></div>
<img ng-show="name>=50" src="202.png">
<img ng-show="name<50" class="ng-hide" src="201.png">
chang the style of an element using: ng-style="{'opacity' : name/100}
Day9: Bookmarklet, replace cursor with emojis. see hacking the browser post.
Day8: Rock Paper Scissors
Day7: The width of the window
http://codepen.io/yining1023/pen/obPPjB
Day6: Emoji Toggle
code is on codepen: http://codepen.io/yining1023/debug/LGJGbL?editors=1100
Day5: emoji calculator
AngularJS Modules and Directives
example: ng-binding
An AngularJS module defines an application.
The module is a container for the different parts of an application.
The module is a container for the application controllers.
Controllers always belong to a module.
Creating a Module:
angular.module
The "myApp" parameter refers to an HTML element in which the application will run.
Adding a Controller:
ng-controller directive
Adding a Directive
AngularJS has a set of built-in directives which you can use to add functionality to your application.
***Functions can Pollute the Global Namespace
Global functions should be avoided in JavaScript. They can easily be overwritten or destroyed by other scripts.
AngularJS modules reduces this problem, by keeping all functions local to the module
When to Load the Library
it is recommended that you load the AngularJS library either in the <head> or at the start of the <body>.
This is because calls to angular.module can only be compiled after the library has been loaded.
ng-repeat
The ng-repeat directive actually clones HTML elements once for each item in a collection.
The ng-repeat directive used on an array of objects:
<li ng-repeat="x in names">
{{ x }}
</li>
*AngularJS is perfect for database CRUD (Create Read Update Delete) applications.
Just imagine if these objects were records from a database.
The ng-model directive binds the value of HTML controls (input, select, textarea) to application data.
Day4: See Hacking the Browser post
AngularJS is a JavaScript framework. It can be added to an HTML page with a <script> tag.
AngularJS extends HTML attributes with Directives, and binds data to HTML with Expressions.
The ng-app directive defines an AngularJS application.
- The ng-model directive binds the value of HTML controls (input, select, textarea) to application data.
- The ng-bind directive binds application data to the HTML view.
- The ng-init directive initialize AngularJS application variables.
- AngularJS expressions are written inside double braces: {{ expression }}.
- AngularJS expressions bind AngularJS data to HTML the same way as the ng-bind directive.
<p>Name: <input type="text" ng-model="name"></p>
<p>{{name}}</p> // equals to <p ng-bind="name"></p>
- AngularJS modules define AngularJS applications.
- AngularJS controllers control AngularJS applications.
AngularJS Expressions
- AngularJS will resolve the expression, and return the result exactly where the expression is written.
- Unlike JavaScript expressions, AngularJS expressions can be written inside HTML.
- AngularJS expressions do not support conditionals, loops, and exceptions, while JavaScript expressions do.
- AngularJS expressions support filters, while JavaScript expressions do not.
