epubjs
Version:
Render ePub documents in the browser, across many devices
184 lines (104 loc) • 9.94 kB
HTML
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta charset="utf-8"/>
<title>Getting Started with Processing</title>
<script type="text/javascript">
if(!window.atlasplugins) window.atlasplugins = {}
atlasplugins.codeMirrorSettings = {
theme: "3024-day"
}
</script>
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700" rel="stylesheet" type="text/css"> </link>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"> </script>
<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"> </script>
<link rel="stylesheet" type="text/css" href="theme/html/html.css"/>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/4.4.0/codemirror.min.css"/>
<link rel="stylesheet" type="text/css" href="https://d2uogd9jz9k9zm.cloudfront.net/processingjs-0.0.3.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/4.4.0/codemirror.min.js" type="text/javascript"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/4.5.0/mode/clike/clike.min.js" type="text/javascript"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js" type="text/javascript"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/processing.js/1.4.8/processing.min.js" type="text/javascript"> </script>
<script src="https://d2uogd9jz9k9zm.cloudfront.net/processingjs-0.0.3.min.js" type="text/javascript"> </script>
<script type="text/javascript">
$(function() {
// Make all non runnable examples readonly codemirrors
$('pre:not(*[data-executable], .CodeMirror pre)').each(function(i, el) {
var textArea = $('<textarea>' + el.innerHTML + '</textarea>')
$(el).replaceWith(textArea);
var editor = CodeMirror.fromTextArea(textArea[0], {
mode: "text/x-java",
theme: "3024-day",
readOnly: true,
viewportMargin: 0
});
});
});
</script>
<style type="text/css">
/* This needs to come last to set auto height, and html.css is always included first */
.CodeMirror {
height: auto;
font-size: 14px;
padding: 15px;
border-radius: 5px;
}
.CodeMirror-scroll {
overflow-y: hidden;
overflow-x: auto;
height: auto;
}
</style>
<script type="text/javascript" src="theme/html/epub.js"> </script>
<script type="text/javascript" src="theme/html/reader.js"> </script>
</head>
<body data-type="book" id="viewer">
<section data-type="chapter" data-pdf-bookmark="Chapter 1. Hello" id="hello">
<h1>Hello</h1>
<p>Processing is for writing software to make images, animations, and interactions. The idea is to write a single line of code, and have a circle show up on the screen. Add a few more lines of code, and the circle follows the mouse. Another line of code, and the circle changes color when the mouse is pressed. We call this <em>sketching</em> with code. You write one line, then add another, then another, and so on. The result is a program created one piece at a time.</p>
<p>Programming courses typically focus on structure and theory first. Anything visual—an interface, an animation—is considered a dessert to be enjoyed only after finishing your vegetables, usually several weeks of studying algorithms and methods. Over the years, we’ve watched many friends try to take such courses and drop out after the first lecture or after a long, frustrating night before the first assignment deadline. What initial curiosity they had about making the computer work for them was lost because they couldn’t see a path from what they had to learn first to what they wanted to create.</p>
<p>Processing offers a way to learn programming through creating interactive graphics. There are many possible ways to teach coding, but students often find encouragement and motivation in immediate visual feedback. Processing’s capacity for providing that feedback has made it a popular way to approach programming, and its emphasis on images, sketching, and community is discussed in the next few pages.</p>
<section data-type="sect1" data-pdf-bookmark="Sketching and Prototyping" id="sketching_and_prototyping">
<h1>Sketching and Prototyping</h1>
<p>Sketching is a way of thinking; it’s playful and quick. The basic goal is to explore many ideas in a short amount of time. In our own work, we usually start by sketching on paper and then moving the results into code. Ideas for animation and interactions are usually sketched as storyboards with notations. After making some software sketches, the best ideas are selected and combined into prototypes (<a data-type="xref" href="#as_drawings_move_from_sketchbook_to_scre">Figure 1-1</a>). It’s a cyclical process of making, testing, and improving that moves back and forth between paper and screen.</p>
<figure id="as_drawings_move_from_sketchbook_to_scre">
<img src="images/Fig_01_01.png" alt="Fig 01 01"/>
<figcaption>As drawings move from sketchbook to screen, new possibilities emerge.</figcaption>
</figure>
</section>
<section data-type="sect1" data-pdf-bookmark="Flexibility" id="flexibility">
<h1>Flexibility</h1>
<p>Like a software utility belt, Processing consists of many tools that work together in different combinations. As a result, it can be used for quick hacks or for in-depth research. Because a Processing program can be as short as one line or as long as thousands, there’s room for growth and variation. More than 100 libraries extend Processing even further into domains including sound, computer vision, and digital fabrication (<a data-type="xref" href="#many_types_of_information_can_flow_in_an">Figure 1-2</a>).</p>
<figure id="many_types_of_information_can_flow_in_an">
<img src="images/Fig_01_02.png" alt="Fig 01 02"/>
<figcaption>Many types of information can flow in and out of Processing.</figcaption>
</figure>
</section>
<section data-type="sect1" data-pdf-bookmark="Giants" id="giants">
<h1>Giants</h1>
<p>People have been making pictures with computers since the 1960s, and there’s much to be learned from this history (<a data-type="xref" href="#processing_was_inspired_by_great_ideas_a">Figure 1-3</a>). In life, we all stand on the shoulders of giants, and the titans for Processing include thinkers from design, computer graphics, art, architecture, statistics, and the spaces between. Have a look at Ivan Sutherland’s <em>Sketchpad</em> (1963), Alan Kay’s <em>Dynabook</em> (1968), and the many artists featured in Ruth Leavitt’s _Artist and Computer_<a xmlns:mml="http://www.w3.org/1998/Math/MathML" xmlns:svg="http://www.w3.org/2000/svg" data-type="noteref" id="idp1752272-marker" href="ch01.html#idp1752272"><sup>1</sup></a> (Harmony Books, 1976). The ACM SIGGRAPH archives provide a fascinating glimpse into the history of graphics and software.</p>
<figure id="processing_was_inspired_by_great_ideas_a">
<img src="images/Fig_01_03.png" alt="Fig 01 03"/>
<figcaption>Processing was inspired by great ideas and individuals over the last four decades.</figcaption>
</figure>
</section>
<section data-type="sect1" data-pdf-bookmark="Family Tree" id="family_tree">
<h1>Family Tree</h1>
<p>Like human languages, programming languages belong to families of related languages. Processing is a dialect of a programming language called Java; the language syntax is almost identical, but Processing adds custom features related to graphics and interaction (<a data-type="xref" href="#processing_has_a_large_family_of_related">Figure 1-4</a>). The graphic elements of Processing are related to PostScript (a foundation of PDF) and OpenGL (a 3D graphics specification). Because of these shared features, learning Processing is an entry-level step to programming in other languages and using different software tools.</p>
<figure id="processing_has_a_large_family_of_related">
<img src="images/Fig_01_04.png" alt="Fig 01 04"/>
<figcaption>Processing has a large family of related languages and programming environments.</figcaption>
</figure>
</section>
<section data-type="sect1" data-pdf-bookmark="Join In" id="join_in">
<h1>Join In</h1>
<p>Thousands of people use Processing every day. Like them, you can download Processing without cost. You even have the option to modify the Processing code to suit your needs. Processing is a <em>FLOSS</em> project (that is, <em>free/libre/open source software</em>), and in the spirit of community, we encourage you to participate by sharing your projects and knowledge online at <a href="http://processing.org">Processing.org</a> and at the many social networking sites that host Processing content (<a data-type="xref" href="#processing_is_fueled_by_thousands_of_peo">Figure 1-5</a>). These sites are linked from the <a href="http://processing.org">Processing.org</a> website.</p>
<figure id="processing_is_fueled_by_thousands_of_peo">
<img src="images/Fig_01_05.png" alt="Fig 01 05"/>
<figcaption>Processing is fueled by thousands of people contributing through the Internet. This is our rendition of how they all relate to one another.</figcaption>
</figure>
</section>
<aside data-type="footnotes"><p xmlns:mml="http://www.w3.org/1998/Math/MathML" xmlns:svg="http://www.w3.org/2000/svg" data-type="footnote" id="idp1752272"><a href="ch01.html#idp1752272-marker"><sup>1</sup></a> <a href="http://www.atariarchives.org/artist/"><em class="hyperlink">http://www.atariarchives.org/artist/</em></a></p></aside></section>
</body>
</html>