Please fill out the survey if you have not done so. 


Please contact Teacher Assistants for help

Amir –

Anva -


Aim: How to work remotely to create a digital product?

Do Now: Go to Trello. Production managers reach out to team members

and have everyone check in, decide how you will manage work flow.


Cactus Duty and Animation2 group: You need a sketch of main page, environment of game in three.js, and a mainpage for website, and an animated logo











Activity 1

 Aim: What are the tools and routines of our Advanced Animation class?

Do Now: 

Create your blog using, once you create your blog go to my blog at Masonstudio and post the URL of your blog.

Discuss using 


read the The Animation Syllabus and Class Agreement


I. Make a separate Animation page on your blog.

You will make a page describing your company, and all of the members in the startup company

You will make a separate page on your blog

You need a account watch video

and Trello account watch video

Design Tools-



Read this article A website on color combinations



 Learn Web Design



Here are more simple codepen examples pasted:



cube rotating sideways only:


rotating cylinder with interesting background:


Activity 2 

Aim: How to develop a digital product for the marketplace?

Do Now: Break into teams link 

Product - Create a logo with the name of the business and thumbnail sketches of the logo



1. On your about me page you will write about the following three paragraphs based on the links below:

1. What is the name of your team?

2. What is the definition of your title?

3. What skills and requirements do you need to know?

4. What software applications would help you do your job?

Team Development: The how to develop a team (see illustration): 

Specs: Specify how the project will look (no coding). Specify how the program will look, what tools are being used and how the user's experience of this program should be like. Developers must create their code based on these specifications. (It is normal for specifications to change).

Team member read articles, link1, the specification documentlink2


Backend Developers: Code the program based on the specifications given.

Team members read - link1, job requirements link2link3

Focus on functionality of the program. 

Frontend developers: Responsible for the look and design of the program and what the user sees. Focus on design and appearance of the program. 

 Team members read - link1, what do they dohandbook

QA: Test the code to make sure it works correctly and follows specifications. Upload all correct updates to the Github repository to keep track of changes.

 Team Members read - link1link2link3link4, create an excel spreadsheet


2. Friday meeting discuss your job title and what you will be doing. 


Monday 2/3/2020


Aim: What are the preproduction phase of our Digital project building?

Do Now: How can using a wireframe nelp the building of your site

website wireframe, also known as a page schematic or screen blueprint, is a visual guide that represents the skeletal framework of a websiteWireframes are created for the purpose of arranging elements to best accomplish a particular purpose. 

Web and App templates, UI kits


Aim: How to create the right brand for your company?

Do Now: What is the importance of a logo for a brand?


Create an animated logo using codePen and Three.js

Backend will create the algorithm and they will have to give a variation of the code?

While creating the algorithm team members will be doing rough sketches of the finalized logo.

tutorial on codepen:


project 1 on three.js:




To learn Three.js, start with building a rotating cube.

You need 3 components:

Scene, Camera and Renderer

To create and render(Display) a scene:

Already built objects we are creating instances of: Scene, PerspectiveCamera, and WebGLRenderer classes.

When creating an instance of PerspectiveCamera, you need to pass in 3 arguments:

Field of View(how far object is from user’s POV. Higher the number, the smaller the size of the object),

Aspect Ratio(quotient result of width of this element divided by height),

Near and Far(limit what is displayed. If an object is placed farther from the camera than Far value, or placed closer to the camera than Near value, then this object is not rendered)

Code should look like this:

var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );var renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement );

Create a Shape:

To display a cube on the screen, just like the camera and scene we did above, we will:

1. create an instance of the BoxGeometry object to display a cube.

2. We can add color to the cube with the Material object.

3. We can “marry” these two features using the Mesh object.

4. Then we display the object onto the scene.

Looks like this:

var geometry = new THREE.BoxGeometry( 1, 1, 1 ); var material = new THREE.MeshBasicMaterial( { color: 0xFF6633 } );

var cube = new THREE.Mesh( geometry, material ); scene.add( cube );camera.position.z = 5;

If you don’t want to create a cube, and want to create another 3D shape like a sphere, cone, etc…, you can use these objects instead of the BoxGeometry object.

· Sphere — SphereGeometry

· Cube — BoxGeometry

· Cone — ConeGeometry

· Cylinder — CylinderGeometry

Render and Animate the Cube to see the cube on the scene. To do this, create a render function that renders the camera and scene (this scene is what is displaying the cube).

function render() { requestAnimationFrame( render ); renderer.render( scene, camera ); } render();


To rotate the cube, we use a rotation function. The higher the number, the faster it rotates.

function render() { requestAnimationFrame( render ); cube.rotation.x += 0.025; cube.rotation.y += 0.025; renderer.render( scene, camera ); } render();


-Lighting: to use a light to see the 3D objects, add a PointLight instance. Add this to the scene the same way you added the cube to the scene.

var light = new THREE.PointLight(0xffffff);



CONTROLS: Allow us to drag mouse around element displayed and orbit it. Also allows us to use mouse to zoom in and out of that element.

// Add OrbitControls so that we can pan around with the mouse.

controls = new THREE.OrbitControls(camera, renderer.domElement);

In summary, you have a scene. You have different objects each representing an element, such as a shape/line/text you can add to the scene.

You also have different objects representing ways to edit and manipulate these shapes/lines/text, such as an object to change an element’s color, an object to change an element’s texture, etc..

The side menu shows the variety of objects and examples of how you can use them.

Example: you can use TubeBufferGeometry and create a tube object. (


var geometry = new THREE.TubeBufferGeometry( path, 20, 2, 8, false );

Here are more simple codepen examples pasted:

rotating cube:

rotating pink diamond:

cube rotating sideways only:

rotating cylinder with interesting background:

rotating cone:


Click Here to make your page more fancy 

spinning cube game