© Stephanie Bono Ying Yang Koi, 2015 Interactive Canvas Illustration 800x600px, 30fps
For the regular person, coding can be daunting — a foreign language, not worth the hassle of learning. Santiago Echeverry would like to change that mindset. By coming up with an educational approach to coding that focuses on the visual and encourages a mistake here and there, Santiago has been able to generate immediate results and translate his passion for coding to his students. Read on to learn more about Santiago’s and to see incredible graphics his students have created less than three months into their coding education.
SIGGRAPH: Your 2021 Educator’s Forum project, “Interactive 2D Illustrations on HTML5 Canvas: A Creative Introduction to Computer Graphics and Programming”, focuses on a new approach to drawing through code. Tell us a little bit about that approach and how educators can implement it for students and in classrooms.
Santiago Echeverry (SE): I used to be in the art department, and in the art department students were taught how to draw on paper — 2D. I found that this limited students. For students who wanted to work in new media, they needed something other than drawings on 2D paper; they needed to learn how to animate those drawings digitally. That is the reason I created this class.
The hardest part about teaching students who are art-focused how to animate with code is having them comprehend that there are certain elements that aren’t necessarily visible. When you teach students to understand 2D drawings as if they are paper-cut animations, they are then able to understand that each element exists on its own and can be animated accordingly. Each layer of the animation, each part of the drawing can be transformed. Understanding this process is the first step. It changes the notion that a flat, 2D illustration may appear 2D but is actually a series of layers.
In 2013, I started working on this education concept. [Adobe] Flash was no longer used because of a fight between Steve Jobs and Adobe, yet my entire portfolio was on Flash. I needed an engine that was going to be more constant and durable. I started working on coding in 1995 — I remember writing code directly into the terminal. Throughout the years, the constant has always been HTML. That was the answer. Through learning JavaScript and HTML5, we are able to prepare students for a career in web design and development. JavaScript is so universal. You don’t need to download plugins and it is completely integrated into HTML. It is not only a friendly environment, but also a forgiving language. My students have no idea how to code when they start my class, with HTML5 I can let them make mistakes, and they learn from that.
SIGGRAPH: Share with our readers how you developed your coding approach. How does it compare to traditional analog illustration paradigms? What challenges did you face or overcome? What opportunities does it provide to modern classrooms?
SE: I was very lucky because my older brother, who’s 12 years older than me, was a genius who graduated early. I was 9 or 10 years old when my brother brought home the first computer I ever saw. I have wanted to work with computers ever since. That is where my passion for coding started. My approach has always been visual. Asking myself, “How is it that I can use coding to provide visual and immediate results?” When I was getting my Master’s in interactive telecommunications at New York University (NYU), the internet appeared: HMTL1, Netscape1, etc. I got to experiment with all of these, and it opened my world to graphic, visual, and experimental approaches to coding.
Coding is an extremely stubborn thing. By creating connections and providing immediate visual results for my non-coder students, I have opened the doors to curiosity within a stubborn discipline. I gave them the chance to experiment to create a passion, just like when I was a kid.
The biggest hardship is resources. Teaching in Columbia is much harder to do because the HTML coding language is based off of English. Without prior knowledge of English, it is much harder to jump in and “get it”. But, what I noticed was that even if the language barrier was there or a student’s resources weren’t as good, passion was still present. The “I never thought I was going to be able to do this” passion. During those moments, you realize you have a success story.
SIGGRAPH: How do you expect that your approach will be used in the future by fellow educators?
SE: I believe that through the methodology and template that I have developed, educators can introduce students to coding very quickly. I have taken students who didn’t know what a variable was and had them make a 2D interactive game three months later. I would love to work with high school professors. You can use this tool to teach kids math, physics, astronomy … you name it. In its essence, this approach brings abstract concepts into a visual format. You can teach children sine, cosine, or tangent, all while they make a visual animation. I think it would be really beneficial at the high school level.
SIGGRAPH: What is next for “Interactive 2D Illustrations on HTML5 Canvas”?
SE: The class has evolved through eight assignments, starting with understanding the tools for drawing, coordinates, systems, etc. Once you understand these elements you eventually move on to variables, iterations, conditions, text, mandalas, etc. The finished result is not what matters; it is the process.
Eventually, I would like to have an advanced class of computer scientists who already know how to code. Imagine what would be created! I have already had such incredible results within the means of teaching coding, I would like to expand those boundaries and see where we can go.
SIGGRAPH: What is your favorite SIGGRAPH memory, either from SIGGRAPH 2021 or a past conference?
SE: The first time I was accepted into SIGGRAPH was in 2007. I was accepted into the Art Gallery; however, my first SIGGRAPH was in 1997. It was a life-changing experience. I was also accepted into SIGGRAPH Asia in China and then in Brisbane. You see, for a Columbian, who has had a lot of immigration issues, the ability to travel, to be respected, and to be around people who understand my research, [being part of SIGGRAPH] has been the most rewarding feeling in the world. I have a lack of support from my institution when it comes to my research and new media as a field. SIGGRAPH has showed me that I have not wasted my time, that this is worthy of something.
SIGGRAPH: What advice would you give to other educators thinking of submitting to SIGGRAPH?
SE: The worst thing that can happen is they say no. Play the game. If you are passionate — as an artist, as a researcher, as a professor — about your students, there is a niche for you at SIGGRAPH. You can go into the Educator’s Forum, Emerging Technologies, Birds of a Feather, VR Village, etc. There is something for everyone, and you can learn so much.
I also recommend that people volunteer. Get involved! I personally am a member of the ACM SIGGRAPH International Resources Committee.
To see more from Santiago and his students, browse this website. If you’re interested in submitting to or attending a future SIGGRAPH conference, sign up to our mailing list to stay in-the-know.
Santiago Echeverry is a Colombian-American new media artist and professor, with a background in video art, web design, and performance art. He started his artistic career in 1989, and he is considered a pioneer in the field of Net Art and Queer Filmmaking in Latin America. In 1995, he was awarded the prestigious Fulbright Grant to earn his Master’s degree from the Interactive Telecommunications Program at NYU. He started his academic career in 1993, and is currently an associate professor and co-founder of the recently created Film, Animation and New Media Department at the University of Tampa.
