All About WebGL #sfhtml5

I joined SFHTML5 event on "All about WebGL" last week.

If you've missed it, the video archive is here!



Peter Lubbers opening the event.



Talk #1: Introduction to WebGL with Tony Parisi 

What started as a brave experiment four years ago is now a full-fledged part of the HTML5 application platform. WebGL provides real-time, hardware-accelerated 3D graphics to anyone with a browser. To create these experiences, all you need is a text editor and a little imagination. WebGL is being used worldwide to create games, virtual environments, page graphics and data visualization, and it now runs on all desktop browsers and nearly all mobile devices. Tony will give a brief, somewhat technical introduction to WebGL, provide a quick survey of what’s hot and what’s hype, and share his thoughts about where this exciting new technology is headed.

WebGL support by browsers as of 2014/1/26:
http://caniuse.com/#search=webgl%20

Tony showed lots of awesome WebGL examples.

100,000 Stars Google Experiment







His slides are up here:

An Introduction to WebGL - SFHTML5 Talk January 2014 from Tony Parisi

Talk #2: Optimizing WebGL Applications with +Don Olmstead 

WebGL allows developers to create fully 3D worlds within the context of the browser. However the API itself is very low level, and if used improperly can cause a performance bottleneck within the application. To effectively use the API its necessary to understand both how WebGL works and how an application uses the interface. To illustrate this the optimization of the PlayStation 4 UX, the largest site built completely on top of WebGL, will be discussed.

Did you know that PlayStation 4 UX was built on WebGL? That is totally awesome!



His slides are up here:




Talk #3: WebGL and real-time web communication with Victor Sand

You can sign up for Goo Engine here> http://www.gootechnologies.com/products/engine/

As we have seen, WebGL is a very powerful tool for enriching the Web with graphics, but how do we get it into the hands of the creators? How do we provide the myriad Web developers with powerful and sharpened mechanisms that take away the hassle of specialized and redundant ground work? Victor will highlight some aspects in building years of experience into a smooth pipeline, providing coders and artists alike with a sturdy and powerful web graphics tool. Then, Victorwill demonstrate how WebGL experiences created with Goo Engine can be elevated to the next level by making them even more immersive and engaging. They will show how you can use any smartphone connected to the public Internet to remotely control WebGL applications and games. Last, Victor will demonstrate how this communication pattern can be applied to control Web connected physical objects from continents away.

Slides

SFHTML5 WebGL Meetup - Jan 23, 2014 from pmoskovi

Talk #4: Finding (and Making) your Happy Place with Isaac Cohen 

Inspiring talk!

We as coders are by definition creators, our tools are html5 and our canvas the internet itself. Because of the power of the tools we possess, we are able to ask emotional questions through code. By spending time creating exactly what we want to create, we not only manifest a space that we can go to as an escape, but additionally provide an free oasis for the rest of humanity to explore. In this talk we will look at a few of these digital playgrounds, and additionally actualize a project of our own using WebRTC , the Web Audio API , and Three.js

Isaac's slides
Isaac's talk

The room was packed- actually they had 500 people in the waiting list so opened the cafe to accommodate more people!



Great view



Lots of food and wine



Thanks to Peter, Vanessa and all the staffs that made this event happen!

Disclaimer: The opinions expressed here are my own, and do not reflect those of my employer. -Fumi Yamazaki

Trying out Google Now

I tried using a sample app that Devnook created that enables you to send emails with embedded structured data in gmail. Those embedded structured data are used in Google Now too.

Source code: https://github.com/devnook/google-now
Deployed environment: gmail-actions.appspot.com

Several sample tests:

1. One click action test

<html>
  <head>
    <script type="application/ld+json">
    {
      "@context": "http://schema.org",
      "@type": "EmailMessage",
      "description": "Approval request for John's $10.13 expense for office supplies",
      "action": {
        "@type": "ConfirmAction",
        "name": "Approve Expense",
        "handler": {
          "@type": "HttpActionHandler",
          "url": "http://gmail-actions.appspot.com/success/AHRlWrqkhM0P6ZxW3u-P4nBk1eip-mh650NKMzdMXuUNlLJitOhhrDYTv8zpac5OpEELdjeTht5zBqYD1sVSIOvnl2vEQCLI8ur4wsSThoixnHJrH50a6m5mfuQGmcGsS-U7QMSszwiR"
        }
      }
    }
    </script>
  </head>
  <body>

      This a test for a One-click action in Gmail.

  </body>
</html>

And you get email with one click action.

2. Rate Action test

<html>
  <head>
    <script type="application/ld+json">
      {
        "@context": "http://schema.org",
        "@type": "EmailMessage",
        "description": "We hope you enjoyed your meal at Joe's Diner. Please rate your experience.",
        "action": {
          "@type": "ReviewAction",
          "review": {
            "@type": "Review",
            "itemReviewed": {
              "@type": "FoodEstablishment",
              "name": "Joe's Diner"
            },
            "reviewRating": {
              "@type": "Rating",
              "bestRating": "5",
              "worstRating": "1"
            }
          },
          "handler": {
            "@type": "HttpActionHandler",
            "url": "http://gmail-actions.appspot.com/success/AHRlWrqkhM0P6ZxW3u-P4nBk1eip-mh650NKMzdMXuUNlLJitOhhrDYTv8zpac5OpEELdjeTht5zBqYD1sVSIOvnl2vEQCLI8ur4wsSThoixnHJrH50a6m5mfuQGmcGsS-U7QMSszwiR",
            "requiredProperty": {
              "@type": "Property",
              "name": "review.reviewRating.ratingValue"
            },
            "method": "http://schema.org/HttpRequestMethod/POST"
          }
        }
      }
    </script>
  </head>
  <body>
    <p>
      This a test for a Rate action in Gmail.
    </p>
  </body>
</html>

And you get email with rate action.

3.Restaurant reservation

<html>
  <head>
    <script type="application/ld+json">
    {
      "@context": "http://schema.org",
      "@type": "FoodEstablishmentReservation",
      "reservationNumber": "OT12345",
      "underName": {
        "@type": "Person",
        "name": "John Smith"
      },
      "reservationFor": {
        "@type": "FoodEstablishment",
        "name": "Wagamama",
        "telephone": "044755755755",
        "address": {
          "@type": "PostalAddress",
          "streetAddress": "1 Tavistock Street",
          "addressLocality": "London",
          "addressRegion": "Greater London",
          "postalCode": "WC2E 7PG",
          "addressCountry": "United Kingdom"
        }
      },
      "startTime": "",
      "partySize": "2",
    "reservationStatus": "confirmed",
    "modifiedTime": "2013-11-03T21:00:00+01:00",
    "modifyReservationUrl": "http://gmail-actions.appspot.com/success/AHRlWrqkhM0P6ZxW3u-P4nBk1eip-mh650NKMzdMXuUNlLJitOhhrDYTv8zpac5OpEELdjeTht5zBqYD1sVSIOvnl2vEQCLI8ur4wsSThoixnHJrH50a6m5mfuQGmcGsS-U7QMSszwiR"
    }
    </script>
  </head>
  <body>
    <p>
      This a test for a Restaurant reservation Google Now card in Gmail.
    </p>
  </body>
</html>

And you get email with the action to change your reservation.

Actions you can use: https://developers.google.com/gmail/actions/actions/actions-overview

Google Now Card schemas: https://developers.google.com/schemas/now/cards

Disclaimer: The opinions expressed here are my own, and do not reflect those of my employer. -Fumi Yamazaki

Code for San Francisco Brigade- Civic Hack Night

I joined Code for San Francisco Brigade- Civic Hack Night today. Since it was the first Civic Hack Night for 2014, the agenda was much structured than the regular hack nights :)

== Agenda ==

6:30 pm -- Intro to the SF Brigade, 2013 accomplishments, 2014 opportunities
6:45 pm -- Jay Nath, Mayor’s Chief Innovation Officer, San Francisco
7:15 pm -- Intro to Deep Dives
7:30 pm -- Deep Dives into topics such as leadership opportunities in the SF Brigade, project strategy, policy brainstorm, data discussion
8:30 pm -- Report out and next steps
9:00 pm -- Wrap

== Intro to the SF Brigade, 2013 accomplishments, 2014 opportunities ==

Hannah Young kicked off the meeting with her presentations explaining what the brigade program is, what they did in 2013, etc. I especially liked the fact that for each project, they need to have not just developers but also government person involved, so that we can make sure we are making the right thing. You can see the slides here:





== Jay Nath, Mayor’s Chief Innovation Officer, San Francisco ==

Jay explained about the work that his team does around open data etc.



James, Krista and Jake - who works for the city government as fellow or full-time - explained about their projects:

-Standardization of data

-ImproveSF which is a crowdsourcing platform

-Living Innovation Zone project on Market street

-Incorporating design thinking, design process to government / civic design camp

-SF local government is huge, and there are 28,000 employees in 60 departments

-Raise awareness of brigades

-There is no list of social services- need to create a yellow page for social services.

-Child care public services work with 200 nonprofits, more so with healthcare services.

-"Healthy San Francisco" project. How to make ACA and local healthcare useful to the SF citizens- creating a site as navigator, translator and calculator for Affordable Care Act.

-San Francisco Decoded By making San Francisco City laws, rules and regulations available on this website, there was a feedback from a citizen and this issue actually led to fixing the legislation.

-Visualizing metadata around law - SF Ordinances

== Deep Dives in breakout teams ==

The participants split to the following 3 teams, to discuss what we want to accomplish in Q1. I joined the data & policy team.

-Data & Policy
-Project strategy
-Outreach

== Data & Policy Team ==

1) We discussed what Open data means, examples, why we got interested in data/policy, what problems we want to resolve.

-Several people were interested in utilization of data to be prepared for natural disasters, others were interested in education, and some on politics.
-Economic value of data - "data is currency"
-Importance of making standards
-Opening government data and incorporating them to websites ex) Restaurant Health Scores used in Yelp, residential data used in Trulia
-Example from Japan: Fukushima nuclear power plant data
-Example from Nairobi: bus service data
-Example from Hawaii: Ohana API





2) We took a look at data.sfgov.org to check what data is available, what apps are already created in the Apps Showcase, and compared with what other cities have implemented.



-Case data for 311

Powered by Socrata

-Apps Showcase

-There's only 1 app in politics showcase...
Maybe we should replicate what the Chicago team did with Chicago Lobbyists?

-DotMap - demographic data from 2010 census

== Outreach / community team ==

-Increase the diversity of participants
-Education
-Tell stories
-Run hackathon on effective topics such as safety, childcare
-Reach out to tech communities and nonprofits
-"Friends of brigade" "Bring your brigade friend day"
-Learn from other brigades, NY, Oakland are doing well
-Survey our group, talents, etc



== Project team ==

1) Existing projects
- Projects that San Francisco office is doing, brigades in the past did
2) Emerging projects
- Topics we don't know yet
- Housing is hot issue in San Francisco
- Communicate success stories
- Pets that need to be adopted
- Social services, food stamps
3) Redeployment and improvement of existing projects



==What should we fix?==

We need to do a better job making a system to know who's who within Code for San Francisco Brigade team.
- Learn from what code for philly is doing? They have website that gives visibility on what skills they have, what project they are working on, etc.

Code for Philly - A collaborative space for Philadelphia's civic developers -
Users' URL http://codeforphilly.org/ 
Developers' URL http://codeforphilly.org/develop

Apps for Philly - A living catalog of apps built for Philadelphians -
Users' URL http://appsforphilly.org/
Developers' URL http://appsforphilly.org/develop

==Pizza and Code for America Brigade cake==





==What's next?==

In case you are interested: the next Code for San Francisco Brigade- Civic Hack Night is going to be held on 1/22 (Wed)- sadly I can't join due to a business trip, but I'm sure it will be great.

Meetup: Weekly Civic Hack Night

==FYI on Brigades==

Brigade 101: How to Hack Night
Lessons from Brigade, Year One: Do This!
Brigade Spotlight: CHICAGO
How to Hack Night - Hangout



Disclaimer: The opinions expressed here are my own, and do not reflect those of my employer. -Fumi Yamazaki

How students can learn about Google's technologies and/or work with Google

I had a chance to talk with various students studying computer science recently, and was asked how they can be involved in Google's activities. Surprisingly many of them didn't know many of the programs I mentioned, so I thought I'd start documenting here.

"I want to meet like-minded developers!"
Google Developers Group (GDG)

Google Developer Groups (GDGs) are communities for developers who are interested in Google's developer technology; everything from the Android, App Engine, and Google Chrome platforms, to product APIs like the Maps API, YouTube API and Google Calendar API. A GDG can take many forms -- from just a few people getting together to watch our latest video, to large gatherings with demos and tech talks, to events like code sprints and hackathons. However, at the core, GDGs are focused on developers and technical content, and the core audience should be developers. There are 442 chapters in 98 countries worldwide, most of them are for "everyone" so you are welcome to join, some of them are run by university students and running inside university so you should check them out, and if there is not GDG in your city or university, feel free to start one! Note that GDGs are not run by Google- they are independent communities run by local developers globally.

"I want to work at Google as an intern!"
Google Internship Program

There are many internship opportunities globally- follow the link above to see the list. You can watch the videos of the interns from the past here.

Technical Intern experience



Product Management Intern



"I want to act as liaison between Google and my university!"
Google Student Ambassador Program

The Google Student Ambassador Program is an opportunity for students to act as liaisons between Google and their universities. These ambassadors:
-Learn about innovative Google products and programs.
-Plan and host fun events on campus.
-Act as a campus contact for Google teams.
-Help Google better understand each university’s culture.

"I want to receive scholarship from Google!"
Oh gosh there are so many scholarships that Google provides to students...

Generation Google Scholarship
Google Anita Borg Memorial Scholarship
Google Lime Scholarship for Students with Disabilities
Google SVA Scholarship for Student Veterans
Google Europe Scholarship for Students with Disabilities
Women in Tech Conference and Travel Grants

"I want to join programming contests!"
Google Code Jam

Google Code Jam is an international programming competition hosted and administered by Google. The competition consists of a set of algorithmic problems which must be solved in a fixed amount of time. Competitors may use any programming language and development environment to obtain their solutions. Google Code Jam is not just for students, but students are welcome to join the contest.

"I have a wonderful project!"
Google Science Fair

The Google Science Fair is an online competition open to students aged 13-18 around the globe. You can see the video from the Finalist Gala here:



"I want to be involved in Open Source Projects!"
Google Summer of Code

Google Summer of Code is a global program that offers post-secondary student developers ages 18 and older stipends to write code for various open source software projects. We have worked with open source, free software, and technology-related groups to identify and fund projects over a three month period. Since its inception in 2005, the program has brought together over 7,500 successful student participants and over 7,000 mentors from over 100 countries worldwide to produce over 50 million lines of code. Through Google Summer of Code, accepted student applicants are paired with a mentor or mentors from the participating projects, thus gaining exposure to real-world software development scenarios and the opportunity for employment in areas related to their academic pursuits. In turn, the participating projects are able to more easily identify and bring in new developers. Best of all, more source code is created and released for the use and benefit of all.

"I want to be involved in Open Source Projects and I am pre-university student!" Google Code-In

Google Code-in is a contest for pre-university students (e.g., high school and secondary school students ages 13-17) with the goal of encouraging young people to participate in open source. There have been 1238 students from 71 countries that completed tasks in the Google Code-in over the last three years of the contest. For many students the Google Code-in contest is their first introduction to open source development. For Google Code-in we work with open source organizations, each of whom has experience mentoring students in the Google Summer of Code program, to provide "bite sized" tasks for participating students to complete.

"I don't code. Is there a policy related fellowship?"
Google Policy Fellowship

The Google Policy Fellowship program was inspired by Google’s Summer of Code with a public policy twist. The Google Policy Fellowship program offers undergraduate, graduate, and law students interested in Internet and technology policy the opportunity to spend the summer contributing to the public dialogue on these issues, and exploring future academic and professional interests. Fellows will have the opportunity to work at public interest organizations at the forefront of debates on broadband and access policy, content regulation, copyright and trademark reform, consumer privacy, open government, and more. More information about the host organizations and the areas of focus for the fellows are outlined here. Fellows will be assigned a lead mentor at their host organizations, but will have the opportunity to work with several senior staff members over the course of the summer. Fellows will be expected to make substantive contributions to the work of their organization, including conducting policy research and analysis; drafting reports and analyses; attending government and industry meetings and conferences; and participating in other advocacy activities.

"I don't code. Is there a journalism related fellowship?"
Google Journalism Fellowships

In an effort to help develop the next crop of reporters working to keep the world informed, educated and entertained, we have created the Google Journalism Fellowship. As a company dedicated to making the world’s information easily accessible, Google recognizes that behind many blue links is a journalist and that quality journalism is a key ingredient of a vibrant and functioning society. The program is aimed at undergraduate, graduate and journalism students interested in using technology to tell stories in new and dynamic ways. The Fellows will get the opportunity to spend the summer contributing to a variety of organizations -- from those that are steeped in investigative journalism to those working for press freedom around the world and to those that are helping the industry figure out its future in the digital age. There will be a focus on data driven journalism, online free expression and rethinking the business of journalism. The 10-week long Fellowship will open with a week at Google followed by nine weeks at one of the participating organizations.

"I want to join Google's computer science summer camp!"
Computer Science Summer Institute (CSSI)

Google's seventh annual Computer Science Summer Institute (CSSI) is a three-week introduction to computer science for graduating high school seniors with a passion for technology — especially students from historically underrepresented groups in the field. CSSI is not your average summer camp. It's an intensive, interactive, hands-on and fun program that seeks to inspire the tech leaders and innovators of tomorrow by supporting the study of computer science, software engineering and other closely related subjects. As CSSI students, you will learn programming fundamentals directly from Google engineers, get an inside look at some of Google's most exciting, emerging technologies, and even design and develop your very own application with fellow participants that you will showcase to Googlers in local offices. You'll attend the program at one of our Google office locations in Mountain View, Calif., Boston, or Seattle/Kirkland, and experience firsthand Google's unique and innovative office culture. And at the end of each day, attendees will enjoy a unique residential experience in dorm-style housing at local universities. CSSI is an all-expenses-paid program. Google will provide housing, meals and transportation for invited students.

"I want to receive research grants from Google!"
Research at Google - Award Programs

Google supports academic communities in computer science, engineering, and related fields by providing funding opportunities for university faculty. Our ongoing programs regularly solicit proposals for funding either through an open submission process or by invitation. All awards made through Google's academic funding programs are structured as unrestricted gifts to universities.

Google Faculty Research Awards
Google Focused Research Awards
Visiting Faculty Program
Exacycle Program for Visiting Faculty
Google App Engine Education Awards
Google App Engine Research Awards

"I am graduating university and seeking a full time job opportunity!"
Jobs at Google

Google is hiring :)

"I want to know about the newest information from Google to students!"
Following are great channels for that:

Google Students Google+ 
Google Students Blog
Google Students Twitter
Google Students Facebook
Google in Education Website

Disclaimer: The opinions expressed here are my own, and do not reflect those of my employer. -Fumi Yamazaki

Code for All! - Poland

As many of you know, Code for America is expanding globally now, and I'd like to share some of the pieces of information about those global activities.

On October 25-26th 2013,  TEDxKrakow team organized their TEDxKrakow event with 600 participants onsite and 15k people online. In conjunction, the Polish NGO ePanstwo in cooperation with Code for America which started KdP-Koduj dla Polski (Code for Poland, one of the Code for All Brigade programs) hosted Open Data Hackathon (120 participants) in Krakow, which we sponsored.

It's great to see Open Data, Open Government and Code for All movement expanding to Poland! I hope I can visit there some day :D

Photo by Wojciech Mardyla

Articles:
Kodowali dla Małopolski
Urzędnicy „Kodują dla Polski”

Catherine Bracy, who is in charge of Code for America's international projects gave a speech on "Coding better government" and you can watch her talk here:



Disclaimer: The opinions expressed here are my own, and do not reflect those of my employer. -Fumi Yamazaki

3D printed myself!

Back in September, at Science Hack Day, Matthew Bennett created a 3D model of me (thank you Matthew!) and I finally had a chance to 3D print it. It's very rough since I wanted to experiment so the settings are speed>quality and size is small, but I think it was a good experiment ;)



==Preparation and Tools==

Primesense Carmine

-This is a 3D sensor, which is actually used in various devices such as Kinect.



You can hold it up so that you can scan yourself, or have someone scan you. What you are capturing is sent to your computer in real time, so you can actually see what you are capturing.



SKANECT

-3D scanning software. This app can export file in various file formats, which is awesome. I got it exported as .stl file this time.









So I scanned myself as well- though I can't take a picture of me when I'm scanning myself ;) and this is the output. We cut off the head in half since we don't need the back part, we should've done a better job getting the top of my head but we can clean it up later with data.







Makerware

I use either Makerware or ReplicatorG when I do 3D printing. This time, I simply used Makerware. The data was extremely small when it was sent to me, so I scaled it, but not too big since I didn't want to take up too much time.

This is my first data, which is in the orientation of which the data I received was, to give it a try.



Then I rotated it so that the back of the head (flat cut part) will be the bottom- for the second print.



MakerBot

As usual, I use Makerbot to print.



==Printing==

First print- horizontal orientation. I knew from the beginning this is not the best thing to do, but gave it a try. Also, the printing is low quality since I decreased quality to increase speed. When I clean the data and make it nicer, I might do a better quality print.



When 3D printing, if you don't have something beneath an object it is hard to print, since there is nothing that would support it and you will be printing in the air. This time, my chin was in the air so the filaments were getting tangled in the air like a spring. (And if you are making something like that, you can make a support object beneath what you want to print so that it won't dangle.)







Hole in the hoodies, precisely as I had a hole in the data, so that's good.





OK, next I will print the same data, with a same printer, same filament in vertical orientation.









No more dangling cheeks here so that's good.



Hole in the hoodies is captured well too, and the Android ear on the hoodies didn't dangle so that was a success as well. (I was actually expecting it might just dangle.)





To me, what was interesting was how the 2 products looked differently despite it was using the same data, same printer, and same filament.

In the horizontal one, my face is much skinnier, the color of the filament is black whereas the other one looks more like grey, horizontal one is much more shinier, and of course the layers are horizontal vs vertical which makes my face look like a mountain on the vertical one, etc... it really looked different. (Hard to tell from the photos!)





Disclaimer: The opinions expressed here are my own, and do not reflect those of my employer. -Fumi Yamazaki