Every movement begins with a moment.

Coding Your Dreams With Processing

Posted 8 July 2016 9:00 AM by Pedro Arevalo @MoxieUSA, @MoxieFutureX

As the world advances into an age of Mixed Reality (MR), the marketing industry needs to keep pace with the ever-changing technological landscape. As a member of the industry, you can help shape it with the prototypes of your ideas. But why create prototypes of your ideas — and where?

The first part of that question can be answered with a simple argument: Ideas are only as good as their prototypes. The power to convincingly express your ideas ultimately enables you to pitch them to other people — and to do so in a way that goes beyond words and demonstrates their viability. And who, better than you, to make your ideas come to life?

The second part of the question can be answered with Processing — a platform that was created to teach the principles of coding within the realm of the visual arts.

Prototyping with Processing

Employing a Java-like programming language, Processing enables you to use predetermined and customized functions to bring 2D and 3D objects to life. With it, you can code sketches that range from simple interactions, such as circles that change color depending on the mouse’s position, to powerful visualization tools that use live data.


But why not use Photoshop, Axure or other software to create a prototype? While these programs offer a plethora of great tools, they lack two of Processing’s greatest strengths: (1) simple principles and (2) data integration.

Data in Processing can be pulled from numerous sources, and to do this, your best allies are its libraries. Processing’s libraries allow you to use everything from weather data to tweets to manipulate your sketches. You can also employ awesome new technology, like the hand-tracking device Leap Motion, to gather positional data or the Arduino controller to create digital objects that react to light, sound or other inputs. Additionally, you can feed endless volumes of data from Excel sheets — such as real estate stats or even the migration patterns of birds — into Processing to see how you can use that information to tell a great story.


If these arguments haven’t convinced you, maybe venturing into the realm of programming (with Processing as our guide) will.

Introduction to Processing

Getting started in programming can be intimidating. When you look at a line of code, there are a lot of symbols staring back at you, and most of them do not make sense at first sight. It makes you wonder if you’ll ever be able to mimic those stereotypical Hollywood hackers from the ‘90s or, at the very least, just make your computer say, “Hello World.” But as with any new learning experience, the more you allow yourself to play, learn and explore, the more confidant you will become. So let’s go down the proverbial rabbit hole — together.

The First Steps

To start using Processing, you first need to download it from here. Once you have installed Processing, there are several ways to start learning how to use it. If you are old school and prefer reading, there is a great book available via Amazon about Processing and its functions. The book contains several exercises that explain the principles of coding, as well as examples of how the combination of specific functions leads to mesmerizing results.

If you prefer to watch videos and enjoy interactive tutorials, Processing has created the perfect resource for you: a website that not only allows you to watch very detailed explanations of the core principles of Processing, but also complete interactive exercises to help you develop and test your skills. Additionally, the Processing website has an entire section dedicated to tutorials.

While the resources I just shared are definitely helpful, the best way to truly understand all that Processing has to offer is to just get in there and use it.

Tips and Tricks

Let’s say that you want to impress your coworkers and friends but don’t know how to code that sweet interaction or effect that you want. Worry not! Processing has been around for several years, which means it’s easy to find an example of code online. The Open Processing website offers a vast aggregation of processing sketches that you can find and download and — even better — use to learn more about coding. When you find a sketch that does what you want your project to do, you can look at the code and even modify it to see how it affects the sketch. Through pure curiosity and playful interest you will begin to understand how Processing works.

The Processing website also has a section that explains each one of the predetermined functions and symbols that come with it. When you’re curious about a specific symbol or function, you can look for it here and then explore how to use it to your advantage. The site also has a section dedicated to working project examples that you can reference. In it, you will find a variety of examples of how motion works, algorithms to simulate flocks, how to integrate GUI elements and more. Exploring these projects is a great way to see Processing in action and — just as with the Open Processing site — find code that you can integrate into your own sketches. The more you explore and learn how to use these examples to your advantage, the better you will get at using these structures in your sketches. Finally, if you’re ever in need of inspiration, check out Processing’s section of featured projects. It will give you a better overview of the potential of Processing.

Beyond the Dream

Our industry is way beyond static implementations. Brands now need to tell their stories based on ever-changing information and — thanks to Processing — you have the power of data to help with this never-ending task. It matters little if you are part of a creative or designing team — everyone can be a #MoxieMaker. So the next time you want to tell a compelling story, remember that the first step to every great dream is a prototype — and now you know where to create it.


Add your comment






#crisis #socialmediacrisis #socialmedia #digitalmarketing #socialmarketing #strategy #influencers #communication #pr #media #ideation #creation #content #planning #culture Snapchat Snap Inc. advertising marketing social media community management brand millennials authenticity Spectacles Wearables customer customer service Paid Media Podcasts Content Sponsored Ads Content Marketing #content #marketing #media #analytics #digitalmarketing #ideation #creation #production DecisionIQ strategy big data personalization Humanizeit Facebook Facebook Live Video Instagram Stories ftc guidelines social influencer social influencers social media influencers social media broadcasting live video Processing prototype prototyping user experience ux technology programming coding java ideas design visual arts mix reality mixed realities data tutorial sketch Twitter Carousel Ads Ad Exchange Programmatic FBX Disney virtual reality projection mapping RFID Tumblr Voice Tone Axure wireframing UX software collaboration Measuring Usability UX Best Practices Designing User Journeys Stop counting clicks Designing for completion Designing for satisfaction Dieter Ram and User Experience Less is more Less but better Influencer Marketing learnability user interface user-created content gaming maker editor Super Mario Maker Nintendo digital media chat bots messaging mobile applications automation F8 Mark Zuckerberg Business F8 Conference Email office agency communication Slack Facebook at Work meetings productivity Wearable tech Healthcare Experience Patient Experience Service Design Strategy Creative Moxie VR Six Flags Six Flags Over Georgia theme parks Samsung Samsung Gear Samsung Galaxy VR headset Oculus Rift Playstation VR roller coasters Dare Devil Drive Websites Web dev development digital reactions emotion analytics dislike social metrics clicks Brands Consumers CPG Retail Consumer Marketing Consumer Insights Super Bowl Commercials Football Cultural Phenomenon Game adtech martec auto-responders automated marketing Experience Design Interaction Design Ecosystem iOS Healthkit Ad blocking Forbes Condé Nast GQ interactive media ad-light hashtags hashflags audience visual emojis campaign management 1-to-1 marketing omnichannel CES CES 2016 Oculus Sony PlayStation uSens HTC special mapping hand tracking games PetBot WonderWoof BowTie Pets OTT digital distribution Netflix Reed Hastings on-demand #yearahead #2016 #newyear #2016predictions #digitalstrategy #modernism user-generated content UGC Consumer Connection Integrated Marketing Manufacturers Accessibility usability engagement rate disability awareness creative process creativity fail fast hiring ideas imperfectionist perfectionist personnel progress test and learn fast casual restaurants social media campaigns QSR social strategies in-store promotions in-store social media promotions successful social media campaigns Logos Typography Branding #CPG #Retail #ConsumerInsights #CRM #ConsumerDirect #Seamless #OmniChannel #MoxieMakers #frontierism #intelligence #architecture insight moments Unit3C FutureX lab innovation open house Q&A UnitFilms 48in48 General Assembly Non-Profit Ponce City Market Branded design technical design style guide wireframes brand guidelines Consumer Products Interactive Marketing GIF social campaign modern marketing Cannes Lions new media pop culture meme Web Accessibility QA media media buying mobile apps targeting wires Advertisers Apple Store EasyPay self-checkout app mobile payment Sporting Events Sitecore CMS delivery Content Marketing Strategy Brand Content Marketing Content Strategy Brand Content Strategy Social Content Strategy Cannes humanity what3words life saving dot Agency Partnership Agency Relationship Competitive Review Millennial Marketers email marketing omni-channel digital marketing esp email service provider process WCAG 2016 Planning Connected Omni AR Commerce Social Innovation Create Content Strategy OMMA MediaPost Internet Week TV & Video Media Planners Creative Conundrum real-time scalability Customization smartphone loyalty advocacy live streaming content democracy Open Source Node.js Cheerio Handlebars Hyperquext MongoDB Atlassian Stash PhantomJS Shopping On-demand economy Sharing economy Everything on demand Instant delivery iPhone App Amazon Now Build Automation DevOps Native Advertising Machina Forrester SXSW Machine Learning Data Streams Web search results Data Platforms ROI Instagram Purchase Behavior Like Content Consumer Channel Role and Purpose ExactTarget Salesforce Cloud Responsys Oracle Silverpop IBM Agency Culture Innovation and Technology Client Relationships Platform Partnerships Ever-evolving Digital Age geo-fencing tablet Android second-screen Austin FOMO Meerkat scaleable vector graphics Flash animation interactivity code browsers uber-savvy consumers integrated digital-connectedness Valentine's Über Bloom that Open Table Waze marketing research google music art sports illustration sculpture food green entertainment movies photography real time marketing cheat sheet smart homes vine print 3d printing street art painting fashion influencer movie billboard outdoor mobile wallet toys film halloween history space films cars anniversary


Error: All fields are required.