{"id":230,"date":"2019-08-16T15:41:03","date_gmt":"2019-08-16T15:41:03","guid":{"rendered":"https:\/\/openlab.bmcc.cuny.edu\/mmp260-1301-f2019\/?page_id=230"},"modified":"2023-08-24T16:36:17","modified_gmt":"2023-08-24T16:36:17","slug":"week-1","status":"publish","type":"page","link":"https:\/\/openlab.bmcc.cuny.edu\/ani-260-fall-2023\/week-1\/","title":{"rendered":"Week 1"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Overview of Course and Class Site<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/openlab.bmcc.cuny.edu\/ani-260-fall-2023\/syllabus-old\/\">Syllabus, grading, weekly breakdown<\/a><\/li>\n\n\n\n<li>Bookmark this site (<a href=\"http:\/\/openlab.bmcc.cuny.edu\/ani-260-fall-2023\/\">http:\/\/openlab.bmcc.cuny.edu\/ani-260-fall-2023\/<\/a>)<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h2 class=\"wp-block-heading\">Open Lab<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Open Lab is an online platform where the College\u2019s students, faculty and staff can come together to learn, work, play and share ideas. This site was created on Open Lab and will be your main resource throughout the semester. You will post your work on this site once you&#8217;ve created an account. You can also browse Open Lab to look up other courses, to connect with faculty and students and to create a portfolio.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Creating an Account<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Follow the instructions here <a href=\"https:\/\/openlab.bmcc.cuny.edu\/blog\/help\/how-to-sign-up-and-log-in-to-bmcc-openlab-students-staff-faculty\/\" target=\"_blank\" rel=\"noopener\">https:\/\/openlab.bmcc.cuny.edu\/blog\/help\/how-to-sign-up-and-log-in-to-bmcc-openlab-students-staff-faculty\/<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Joining this Course on Open Lab<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Now that you have created an account, &nbsp;you can join this course site. This means the course will appear in your &#8220;My Courses&#8221; tab for easy access. You&#8217;ll be able top post to it as well. <a href=\"https:\/\/openlab.bmcc.cuny.edu\/groups\/ani-260-fall-2023\/\" target=\"_blank\" rel=\"noopener\">Click here and then click <strong>+Join<\/strong> under the course photo<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Creating a Portfolio\/Profile<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">By creating a Portfolio on Open Lab, you will be setting up a Portfolio Site and an associated Portfolio Profile page. &nbsp;Think of your portfolio as a place to save, share and organize your work, in this course and beyond. The steps below will take you through naming your Portfolio, writing a short description, and uploading an avatar for your Portfolio Profile page.&nbsp; You will also choose a URL for the Portfolio Site and Privacy Settings for both the Profile and Site.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>After logging in, click <strong>My OpenLab<\/strong> in the main menu. Then click <strong>+ Create a Portfolio<\/strong> in the right-hand menu.<\/li>\n\n\n\n<li>On the first Portfolio creation page, you will see a space to enter your <strong>Portfolio name<\/strong>. &nbsp;It will already have a name filled in, based on your first and last name, but you can change that if you wish. &nbsp;We recommend that you follow this format: FirstName LastName\u2019s Portfolio or Professor LastName\u2019s Portfolio (for example, Jane Smith\u2019s Portfolio or Professor Smith\u2019s Portfolio).<\/li>\n\n\n\n<li>Next, enter a <strong>description<\/strong> of your Portfolio. &nbsp;You can always <a href=\"https:\/\/openlab.citytech.cuny.edu\/blog\/help\/changing-privacy-and-other-settings-on-an-eportfolio\/\">change this<\/a> later, so if you don\u2019t have a description prepared, just type something in as a placeholder.<\/li>\n\n\n\n<li>Check the appropriate boxes for your <strong>school<\/strong> and <strong>department<\/strong>. &nbsp;These are required.<\/li>\n\n\n\n<li>Click <strong>Create a new Portfolio site<\/strong> and choose a site URL. &nbsp;Like your name, this text box will already be filled in, based on your name. &nbsp;However, you can enter a different site URL if you wish. &nbsp;Once created, the URL cannot be changed, so consider it carefully.<\/li>\n\n\n\n<li>When you are finished, click <strong>Create Portfolio and Continue<\/strong>.<\/li>\n\n\n\n<li>Next, set your privacy settings for your profile and portfolio site. When you are finished, click <strong>Next Step<\/strong>.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">Adding a Post\/Project to your Portfolio<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">In this course, you will create a portfolio post for each new assignment and link to it on Blackboard (and\/or the discussion board when appropriate &#8211; see below). The following steps walk your through how to create a new post:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Go to the&nbsp;<a href=\"https:\/\/openlab.bmcc.cuny.edu\">OpenLab homepage<\/a>&nbsp;(<a href=\"https:\/\/openlab.bmcc.cuny.edu\">https:\/\/openlab.bmcc.cuny.edu<\/a>) and log in.<\/li>\n\n\n\n<li>Go to&nbsp;<strong>My Profile<\/strong>. Click on the link to your <strong>Portfolio site<\/strong> will be on the top right.<\/li>\n\n\n\n<li>Click on the little &nbsp;<strong>+<\/strong> icon on the top of the page. This will create a new post.<\/li>\n\n\n\n<li>Give your post a title (this will be displayed in bold at the top of the page that will be generated<\/li>\n\n\n\n<li>Create your post. It may contain text, images, videos and other types of media.<\/li>\n\n\n\n<li>To finish and submit your post click on&nbsp;<strong>Publish.<\/strong><\/li>\n\n\n\n<li>By default, your new post will automatically appear on your portfolio&#8217;s home page.<\/li>\n\n\n\n<li>You can edit and delete a post (or page &#8211; such as&nbsp;<strong>About Me<\/strong> on the main menu<strong>)<\/strong> by going back to its&nbsp;<strong>Edit<\/strong>&nbsp;mode (found on the side and bottom of the page\/post). The title and content can be edited and&nbsp;<strong>Move to Trash&nbsp;<\/strong>(on the right) will delete the post\/page.<\/li>\n<\/ol>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h2 class=\"wp-block-heading\">What is animation?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><span style=\"font-weight: 400\">Animation is the <strong>rapid succession of still sequential images, shown at a steady rate that create the illusion of movement<\/strong>. <\/span><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><span style=\"font-weight: 400\">This illusion is made possible by a physical phenomenon called &#8220;<strong>persistence of vision<\/strong>&#8220;:&nbsp;<\/span>If a sequence of still images is displayed fast enough, our brain will stop seeing individual steps and start seeing motion instead. This illusion is referred to as the persistence of vision.&nbsp;The human eye and brain can only process 10-12 separate images per second. If another image replaces it within a fifteenth of a second, it will bridge the two, creating the illusion of continuous motion.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">History<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Pre-film era<\/strong>:&nbsp;Before the advent of cinema in the 1890s, inventors were putting still images into motion with optical toys such as the <a href=\"https:\/\/youtu.be\/-3yarT_h2ws\">zoetrope<\/a>. A strip with sequenced imaged was placed on the inner surface of cylinder with slits on the side. As the cylinder spins, the user looks through the slits at the pictures across. The scanning of the slits keeps the pictures from simply blurring together.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><span style=\"font-weight: 400\"><a rel=\"noreferrer noopener\" href=\"https:\/\/www.theatlantic.com\/entertainment\/archive\/2016\/07\/eadweard-muybridge\/483381\/\" target=\"_blank\">Eadweard Muybridge<\/a>, although not an animator himself, was a key figure in the development of the medium (as well as live-action film).&nbsp;His multi-camera motion studies of animal and humans, created in the 1870s and 80s, advanced the understanding of movement.&nbsp;His books of photographs continue to be used as references by animators to this day.<\/span><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Here are a few <strong>key films\/animators<\/strong> from the very early days of animation:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>George Melies, \u201c<a href=\"https:\/\/www.youtube.com\/watch?v=BNLZntSdyKE\">A Trip to the Moon<\/a>\u201d (1902)<\/li>\n\n\n\n<li>Emile Cohl, <a href=\"https:\/\/www.youtube.com\/watch?v=aEAObel8yIE\">\u201cFantasmagorie\u201d<\/a>&nbsp;(1908)<\/li>\n\n\n\n<li>Winsor McCay <a href=\"https:\/\/www.loc.gov\/item\/00694024\/\" target=\"_blank\" rel=\"noreferrer noopener\">\u201cGertie the Dinosaur\u201d<\/a>&nbsp;(1914)<\/li>\n\n\n\n<li>Otto Messmer, <a href=\"https:\/\/archive.org\/details\/FelixTheCatFelixInHollywood1923\">\u201cFelix in Hollywood\u201d&nbsp;<\/a>(1923)<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>The Walt&nbsp;Disney Studio&nbsp;<span style=\"font-weight: 400\">was founded in 1923 and quickly came to dominate the medium. Not only did the studio create memorable characters such as Mickey Mouse, it also invented and perfected development and production tools that are still used today.<\/span><\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><span style=\"font-weight: 400\">In <strong>traditional 2D animation<\/strong>, each frame is created by hand.&nbsp;<\/span><span style=\"font-weight: 400\">Animators often use their own expressions as a reference for their characters. <\/span><span style=\"font-weight: 400\">1 second of animation requires 24 frames\/drawings.<\/span><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><span style=\"font-weight: 400\">Up until the mid-1990\u2019s the lead animator would animate the character on sheets of paper.&nbsp;<\/span><span style=\"font-weight: 400\">These drawings would then be cleaned up and painted unto sheets of<strong> celluloid<\/strong>.&nbsp;<\/span><span style=\"font-weight: 400\">Finally, the character cell would be overlayed over a background and shot on <strong>film<\/strong>.&nbsp; <\/span><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><span style=\"font-weight: 400\"><a href=\"https:\/\/www.youtube.com\/watch?v=8d4-AUwkKAw\"><strong>The multiplane camera<\/strong> <\/a>was a large analog piece of equipment developed at the Disney studios in the 1930s to impart live action-like effects (i.e: depth-of-field, parallax and zooming) to 2D animation. <\/span><span style=\"font-weight: 400\">The multiplane became obsolete with digital scanning, compositing and editing tools in the early 1990s.<\/span><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><span style=\"font-weight: 400\"><strong>The 12 principles<\/strong>: Two of Disney\u2019s master animators, Ollie Johnston and Frank Thomas, described the 12 most important principles to create appealing animations in a a book called \u201cThe Illusion of Life: Disney Animation\u201d in 1981. While these rules were already present in very early animations, Frank and Ollie formalized them. These principles are essential to any animator\u2019s education and practice. This video offers a great overview of all 12 principles:&nbsp;<\/span><a href=\"https:\/\/youtu.be\/gyGEwyWLbHk\"><span style=\"font-weight: 400\">\u201cComplete 12 Principles of Animation Frank Thomas and Ollie Johnston as described by Alan Becker\u201d<\/span><\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Animation Today<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><span style=\"font-weight: 400\">While 2D animation is still popular today, the computer almost always comes into play (i.e: for scanning, compositing, sequencing and\/or to color each frame).&nbsp;<\/span><span style=\"font-weight: 400\">Often, animators draw the frames directly within the digital environment with a tablet.<\/span><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Here a few interesting contemporary examples:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/vimeo.com\/124763659\">\u201cA Man too Good to be True\u201d<\/a>&nbsp;(2015) \u2013 from the New York Times\u2019 \u201cModern Love\u201d series<\/li>\n\n\n\n<li><a href=\"https:\/\/www.youtube.com\/watch?v=IJNR2EpS0jw\">\u2018Dumb Ways to Die\u2019<\/a>(2012) \u2013 Australian public service announcement campaign by Metro Trains<\/li>\n\n\n\n<li><a href=\"https:\/\/www.youtube.com\/watch?v=79DijItQXMM\">\u201cYou\u2019re Welcome\u201d<\/a>sequence from Disney\u2019s Moana (combination of 2D and 3D) (2016)<\/li>\n\n\n\n<li><a href=\"https:\/\/www.youtube.com\/watch?time_continue=55&amp;v=vpyeQeTDGFA\">\u201cPaper\u201d<\/a>&nbsp;(2015) \u2013 Honda \u201cAdd\u201d by PES<\/li>\n\n\n\n<li><a href=\"https:\/\/www.youtube.com\/watch?v=uN-PXHVT0Qg\">\u201cThe Girl Without Hands\u201d<\/a>(2016) \u2013 full feature film by Sebastien Laudenbach<\/li>\n\n\n\n<li><a href=\"https:\/\/www.youtube.com\/watch?time_continue=6&amp;v=cwvIzFqrd7U\">\u201cCatch Me If You Can\u201d<\/a> (title sequence) (2002)<\/li>\n\n\n\n<li><a href=\"https:\/\/www.youtube.com\/watch?v=e4dZhQaTJMk\">\u201cYour Name\u201d<\/a> (trailer) (2016) \u2013 by Makoto Shinkai<\/li>\n\n\n\n<li><a href=\"https:\/\/www.youtube.com\/watch?v=RM7lw0Ovzq0\">&nbsp;\u201cThe Story of O.J\u201d <\/a>(2017) \u2013 Music Video from Jay-Z\u2019s 4:44 album<\/li>\n\n\n\n<li><a href=\"https:\/\/www.youtube.com\/watch?v=i6FlG0WMXrE\">\u201cAlto\u2019s Odyssey\u201d <\/a>(trailer) (2017) \u2013 Mobile Game<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h2 class=\"wp-block-heading\">Assignment: Animated GIF<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Create a 30 frame (minimum) animated GIF.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">We&#8217;re going to start with a simple animation program called Piskel. It&#8217;s a free pixel art editor. <a rel=\"noreferrer noopener\" href=\"https:\/\/www.piskelapp.com\/download\" data-type=\"link\" data-id=\"https:\/\/www.piskelapp.com\/download\" target=\"_blank\">Download it here<\/a>. The program is not packaged like a normal application. To run it, extract the folder and move the entire folder to your Desktop. Open the folder and double click on the Piskel-0.14.0.exe with the Piskel icon to run it. I will go over the process in class.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Create a transformation of some kind (a ball turns into bird, which turns into the sun, which turns into an airplane, etc.), or depict a cataclysmic event, like a tornado or a volcano. Try and focus on the movement, don\u2019t worry about each drawing being perfect. Animation is the <em>relationship\u00a0<\/em>between the drawings.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Submission<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Export the animation as an animated GIF using the .gif format. Post it on the Open Lab. We will review them together and learn how to document them on Open Lab. Once you have published it on Open Lab, submit a link to the post on Blackboard. You will find a rubric on Blackboard.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Overview of Course and Class Site Open Lab Open Lab is an online platform where the College\u2019s students, faculty and staff can come together to learn, work, play and share ideas. This site was created on Open Lab and will be your main resource throughout the semester. You will post your work on this site&hellip;&nbsp;<a href=\"https:\/\/openlab.bmcc.cuny.edu\/ani-260-fall-2023\/week-1\/\" rel=\"bookmark\">Read More &raquo;<span class=\"screen-reader-text\">Week 1<\/span><\/a><\/p>\n","protected":false},"author":34,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"portfolio_post_id":0,"portfolio_citation":"","portfolio_annotation":"","neve_meta_sidebar":"","neve_meta_container":"","neve_meta_enable_content_width":"","neve_meta_content_width":0,"neve_meta_title_alignment":"","neve_meta_author_avatar":"","neve_post_elements_order":"","neve_meta_disable_header":"","neve_meta_disable_footer":"","neve_meta_disable_title":"","openlab_post_visibility":"","footnotes":""},"class_list":["post-230","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/ani-260-fall-2023\/wp-json\/wp\/v2\/pages\/230","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/ani-260-fall-2023\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/ani-260-fall-2023\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/ani-260-fall-2023\/wp-json\/wp\/v2\/users\/34"}],"replies":[{"embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/ani-260-fall-2023\/wp-json\/wp\/v2\/comments?post=230"}],"version-history":[{"count":42,"href":"https:\/\/openlab.bmcc.cuny.edu\/ani-260-fall-2023\/wp-json\/wp\/v2\/pages\/230\/revisions"}],"predecessor-version":[{"id":1125,"href":"https:\/\/openlab.bmcc.cuny.edu\/ani-260-fall-2023\/wp-json\/wp\/v2\/pages\/230\/revisions\/1125"}],"wp:attachment":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/ani-260-fall-2023\/wp-json\/wp\/v2\/media?parent=230"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}