100 Days of Emojis and Interactive Web Design

TITLE:  100 Days of Emojis and Interactive Web Design

DATE:   January, 2016 - Present

TOOLKITS:   Javascript, P5.js, AngularJS

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


Day20: drawing tool


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


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:


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.


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 }}

*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

Day3: Intro to AngularJS and Expressions

Video: Tumblr and Instagram.

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.

Day2: Infinite Yawn

Video: Tumblr and Instagram.


Day 1: Leave Me Alone

Video: Tumblr and Instagram.

Screen Shot 2016-01-31 at 1.52.18 AM.png