Background & Related Work Approaches to teaching media computation have so far primarily been reliant on textual programming languages [1]. For students.

Slides:



Advertisements
Similar presentations
Use Digital Video to Enhance Learning. Getting connected-existing and new users How to search-using the search tools Viewing Videos-downloading and streaming.
Advertisements

Web Page Training Summer 2014 Presented by: Mountain Brook Schools Tech Team.
HOW TO USE THE DESTINY ONLINE CATALOG. Destiny Online This presentation is designed to introduce the new Destiny online public access catalog. Both students.
Richard Yu.  Present view of the world that is: Enhanced by computers Mix real and virtual sensory input  Most common AR is visual Mixed reality virtual.
AUTOMATIC ORGANIZING AND FORMATTING FOR LECTURE NOTES SHIQING (LICIA) HE ADIVISOR: PROF.KRISTINA STRIEGNITZ SPRING 2014 STRUCTURING THE UNSTRUCTURED NOTE:
Aim: Use the given examples to record examples and our own ideas in our journal 1.Write technical examples in journal and/or participate in full.
1 Chapter 12 Working With Access 2000 on the Internet.
Create slices and hotspots Create links in Web pages Create rollovers from slices Create basic animation Add tweening symbol instances to create animation.
First Bytes - LabVIEW. Today’s Session Introduction to LabVIEW Colors and computers Lab to create a color picker Lab to manipulate an image Visual ProgrammingImage.
Eyad Alshareef 1 Creating Custom Forms Part A. 2Eyad Alshareef Data Block and Custom Forms Data block form Data block form Based on data blocks that are.
App Inventor Barb Ericson Georgia Tech
Tutorial 7 Working with Multimedia. XP Objectives Explore various multimedia applications on the Web Learn about sound file formats and properties Embed.
Promoting Success for All Students through Technology.
What is Scratch? Scratch as Logo Dr. Ben Schafer Department of Computer Science University of Northern Iowa.
Digital Storytelling for the English Classroom Presented by Amy Cannady Whitewater Middle School.
SCERSIG: Creating Android Apps with App Inventor 26 October 2011 Ric Paul, Health Services Library, Southampton.
Programming with App Inventor Computing Institute for K-12 Teachers Summer 2012 Workshop.
2. Introduction to the Visual Studio.NET IDE 2. Introduction to the Visual Studio.NET IDE Ch2 – Deitel’s Book.
Creating a MagicInfo Pro Screen Template
Literacy and Music Education Online Sources Introduction.
Comparing Python and Visual Basic
 A set of objectives or student learning outcomes for a course or a set of courses.  Specifies the set of concepts and skills that the student must.
11 Games and Content Session 4.1. Session Overview  Show how games are made up of program code and content  Find out about the content management system.
Teaching and Learning with Technology  Allyn and Bacon 2002 Academic Software Chapter 6 Teaching and Learning with Technology.
1 Web Basics Section 1.1 Compare the Internet and the Web Compare Web sites and Web pages Identify Web browser components Describe types of Web sites Section.
USING AN INTEGRATED 3D AND ROBOTICS ENVIRONMENT TO TEACH COMPUTATIONAL THINKING EFFECTIVELY Stephanie Graham Shiloh Huff Sabyne Peeler * This research.
CS4HS with App Inventor May 18, 2012 Jeff Gray, Ph.D. - Associate Professor University of Alabama Department of Computer Science
Tutorial 7 Working with Multimedia. XP Objectives Explore various multimedia applications on the Web Learn about sound file formats and properties Embed.
Glogster EETT Training Mathew Swerdloff November 30, 2010.
T U T O R I A L  2009 Pearson Education, Inc. All rights reserved. 1 2 Welcome Application Introducing the Visual Basic 2008 Express Edition IDE.
Se Over the past decade, there has been an increased interest in providing new environments for teaching children about computer programming. This has.
Session 1 SESSION 1 Working with Dreamweaver 8.0.
Using Inspiration In Your Classroom S. Taylor-Foley Consultant for Research, Planning and Technology, South Shore District School Board.
Google Workshop: App Inventor Jeff Gray, Ph.D. - Associate Professor Carnegie Foundation Professor of the Year (Alabama, 2008) University of Alabama Department.
User Interface Toolkit Mechanisms For Securing Interface Elements Franziska Roesner, James Fogarty, Tadayoshi Kohno Computer Science & Engineering DUB.
A Novel Approach to Architectural Recovery in Evolving Object- Oriented Systems PhD thesis Koen De Hondt December 11, 1998.
Do it now activity Last term we learnt about how data is represented in a computer and about how to identify different volumes of data. How many bits in.
The Beauty and Joy of Computing Lecture #3 : Creativity & Abstraction UC Berkeley EECS Lecturer Gerald Friedland.
Introduction It is developed to create software applications. It is a tool for developers of any program that uses both basic and expert settings. It.
Tutorial 7 Working with Multimedia. New Perspectives on HTML, XHTML, and XML, Comprehensive, 3rd Edition 2 Objectives Explore various multimedia applications.
Tutorial 7 Working with Multimedia. New Perspectives on HTML, XHTML, and XML, Comprehensive, 3rd Edition 2 Objectives Explore various multimedia applications.
Partners Comp# Partner APartner B 1 Ancona, SamanthaManternach, Hailey 2 Black, RyanMcNeil, Maddie 3 Conger, KevinOhland, Rebecca 4 Day, MerciOtterbein,
Chapter 5: Windows and Frames
Technology In The Classroom Intergration of Technology Using a Whiteboard Web-based Learning.
3 Copyright © 2004, Oracle. All rights reserved. Working in the Forms Developer Environment.
BOĞAZİÇİ UNIVERSITY DEPARTMENT OF MANAGEMENT INFORMATION SYSTEMS MATLAB AS A DATA MINING ENVIRONMENT.
Nick Karstedt. What is the App Inventor for Android?  Simple Development  Web/Java Based  Use of Android software and phone hardware  Portable.
Purpose Audience participation adds a new dimension to musical performance. Audience members not only enjoy the music making of the performers, but actually.
Virtual Navigation of Multimedia Maps A versatile map generator and viewer Virtual Navigation of Multimedia Maps A versatile map generator and viewer Robert.
Virtual Tutor Application v1.0 Ruth Agada Dr. Jie Yan Bowie State University Computer Science Department.
Chapter – 8 Software Tools.
Virtual Navigation of Multimedia Maps A versatile map generator and viewer Virtual Navigation of Multimedia Maps A versatile map generator and viewer Robert.
Barbara Ericson Promising Practices in CS1 Media Computation for CS1 Barbara Ericson Georgia Institute of Technology.
1 Sections 5.1 – 5.2 Digital Image Processing Fundamentals of Java: AP Computer Science Essentials, 4th Edition Lambert / Osborne.
MetricsVis: Interactive Visual System of Customized Metrics on Evaluating Multi-Attribute Dataset Nikhil Ghanta, Jieqiong Zhao, Calvin Yau, Hanye Xu, Brian.
© ExplorNet’s Centers for Quality Teaching and Learning 1 Objective % Understand career planning in a digital media environment.
Introducing Scratch Learning resources for the implementation of the scenario
XP Creating Web Pages with Microsoft Office
Dive Into® Visual Basic 2010 Express
Top 10 Technology Tools for Teaching and Learning
Data Collection and Analysis
Working in the Forms Developer Environment
Dronely: A Visual Block Programming Language for the Control of Drones
Photometric Walkthrough Mobile Application Team Members: Marcus Hernandez, Edward Hsu, Edgar Galindo Faculty Advisor: Gabor Kondas Optic Arts Liaison:
CSE 3 – Fall 2015 Sierra Ampudia
Objective % Understand career planning in a digital media environment.
CIS16 Application Development – Programming with Visual Basic
Command Me Specification
Objective % Select and utilize tools for digital animation production.
Presentation transcript:

Background & Related Work Approaches to teaching media computation have so far primarily been reliant on textual programming languages [1]. For students new to computing, wrestling with the syntactical rules of implementing their ideas can be frustrating. Pixly and Tunely provide concrete virtual language environments for pixel and sound sample manipulation. This gives students a visual representation of both the media they wish to manipulate and the programming components that allow them to transform these media resources. Blockly is a library for building visual programming editors. Created by Google for Education, it is a pure JavaScript library that may be incorporated into web applications that wish to provide some sort of block programming application. Blockly provides the tools for custom block creation and has a number of basic programming components to support mathematical operation, variable and function creation, list and string manipulation, etc. Programs created in Blockly can be translated into corresponding JavaScript (or Python or some other language) code. Blockly was influenced by App Inventor, which was in turn influenced by Scratch [2]. Pixly, along with another Blockly application Spherly, was presented at the SIGCSE 2015 Technical Symposium as a demonstration and undergraduate poster: the focus then was more on using Blockly to create visual block languages. Pixly has since been updated and Tunely was created to expand web based visual programming media computation opportunities. Web-based Visual Programming for Media Computation using Blockly Jake Trower (Advisor: Jeff Gray) Department of Computer Science, University of Alabama Abstract Tunely and Pixly are web-based programming environments for media computation built using the Blockly visual programming library. These language environments were inspired by Georgia Tech’s Media Computation approach and allow images (Pixly) and sounds (Tunely) to be transformed programmatically. Tunely and Pixly provide an accessible environment to students who have little to no experience in programming. This SRC poster summarizes the design and implementation of these languages. We also briefly introduce initial work on providing an interface for children with disabilities to explore this opportunity. References [1] Media Computation Teacher’s Website, [2] Blockly, [3] A. Wagner and J. Gray, “An Empirical Evaluation of a Vocal User Interface for Programming by Voice,” International Journal of Information Technologies and Systems Approach (Special Issue on Human-Computer Interaction, Carina Gonzalez, editor), vol. 8, no. 2, May 2015, pp [4] Tunely Website, [5] Pixly Website, [6] A. Wagner and J. Gray, “Improving the Accessibility of Block- Based Languages,” Poster session presented at: Blocks and Beyond, Oct 2015, Atlanta, GA. Acknowledgements Conclusion A high school computer science teacher who integrated Pixly into his class reported that its use has helped students understand nested loops to manipulate pixels in an image. Future work on Tunely and Pixly include better tools for larger scale projects (picture collages and music composed of linked sound samples), and ways to integrate usage of the two applications. Pixly: Pixel Manipulation Pixly [5] provides an environment for students to practice media computation [3] (in particular, pixel manipulation of images). Using custom Blockly blocks, users can iterate through and manipulate the RGB values of the pixels of an image. Pixly has, in addition to the standard set of programmatic operations Blockly provides, a set of blocks that allow users to obtain a list of pixels from an image, get the red, green, and blue values from each of these pixels, and set any of these values for any given pixel. Left: example Pixly program illustrating manually setting a pixel RGB value. Results in baby picture losing all redness Tunely: Sound Sample Manipulation Tunely [4] provides a visual user interface for the manipulation of sound samples. It provides default sounds, and provides means to upload sounds from the user’s computer. All sounds are represented by a sample/time graph that shows a visual representation of the digital structure of the sound. Users may play the sound in its entirety through this “exploration” interface, or may select individual ranges on the sound samples to hear what parts of the sound they represent. In addition to the standard set of programmatic operations Blockly provides, Tunely has a set of programming components that return the sample list from a sound, allow values of individual samples from this list to be manipulated, and has blocks that allow the sound to be previewed before and after the manipulations. This work was sponsored in part by NSF awards # and # Also sponsored by Google CS4HS Myna Integration Myna is a tool that provides a vocal user interface for programming by voice (PBV) to assist children with mobility disabilities in learning to program in Scratch [3]. Property files specific to Tunely and Pixly were created for Myna manually and using the “Myna Mapper” automatic property file tool [6]. When Myna is ran with specified property files, vocal commands can be used to navigate the Blockly environments. Left: “exploration” interface which allows users to visualize a sound Left: example Tunely program that plays a sound before and after doubling the volume of the sound (by doubling each sample value) Left & Above: example snippet that generates a sinewave (by calculating the appropriate sample values) and plays it. Right: example chromakey program that iterates through one canvas and copies “non-green” pixels onto another canvas