Programming – the bigger picture DSDN 142 Creative Coding
WHY LEARN TO CODE? Programming is without a doubt the most versatile skill any computer user can learn. These days almost every piece of computer software has a built in programming language which enables you to automate often repeated tasks. Most software used in the school of architecture and design has this capability, but a few examples are enumerated here (language used is in brackets): 3ds Max (MAXscript), Photoshop (C++), Blender (Python), Flash (Actionscript), Microsoft office suite (.NET). This list really is endless, however.
This is a structure created in Houdini, a 3d program which uses generative processes to create refined yet random objects. The idea behind this word “generative” is to create a series of rules, or step by step instructions (usually using programming to express these), then let the computer run them. This often gives fantastic and unexpected results when repeated thousands of times. (a computer can often do thousands of iterations in seconds) http://www.generatorx.no/20080409/structural-tension-brandom-morse/
Programming – the bigger picture DSDN 142 Creative Coding
PROGRAMMING IN DESIGN In the context of design, programming is a great way of visualising ideas in a dynamic and ever evolving manner. It is possible and often fairly simple (with a basic understanding of the language) to create generative graphics, interaction, intricate patterns, sound and music all using code (code is the list of instructions you write for the computer, basically what the programmer is writing). As a designer is is highly beneficial to have at least a basic knowledge of programming, as this enables you to complete smaller interactive works without having to rely on others coding abilities. It also gives you the ability to judge a project's feasibility even if others end up doing the programming.
Generative art created in processing
.
“Theory is when you know something and it doesn't work, Practice is when something works but you don't know why, Programmers combine both theory and practise, nothing works and you don't know why.�
Don't stress if you don't understand things at first, As the ubove quote demonstrates, even professional programmers have issues. http://blog.makezine.com/computeArt1.jpg
Programming – the bigger picture DSDN 142 Creative Coding
THE PROS AND CONS OF PROGRAMMING WHAT WE DON'T USE PROGRAMMING FOR Writing code isn't a magical bullet that can solve all of lifes annoying design problems (it can do so for a large amount though). In many cases there are much simpler and faster ways to achieve the things you want to do. As a general rule (with exceptions of course) programming is not used to create complicated static pictures or animations which are not pattern based or constantly changing, updating or evolving.
You probably wouldn't use programming to make toast. (although you could possibly use it to help you design the perfect toaster)
http://elitechoice.org/wp-content/uploads/2007/11/cryatal_toaster.jpg
Programming – the bigger picture DSDN 142 Creative Coding
Drawing A landscape, a portrait or any other realistic image would probably fairly complicated to do through programmatic means. Photoshop is probably a much better solution for these as it is a tool especially built for this purpose among others. If, however, the image you are trying to produce is a pattern of repeating elements, the computer can probably daw it much faster than you can given the correct instructions.
Natural/realistic images vs pattern
Pattern is greatly suited to programming whilst realistic mages are not.
http://dark-spider.deviantart.com/art/Amber-89246825
http://farm3.static.flickr.com/2058/2441093407_dc1eb4fd77.jpg
Programming – the bigger picture DSDN 142 Creative Coding
Animation Set animation is another thing we are probably better off NOT doing with code (by “set” animation I mean animations which are the same every time they are played). Although it is possible, it would take a lot more time and effort to write code for these than to use Flash or After Effects. Again there is an exception to the not good for animation rule: Generative animation. Generative animation is animation which changes every time it is run. Sometimes it even evolves and bases new versions off previous ones. Simulations are also often represented through animation as well, as it is a good way to understand change through time. Programming (in one of many forms) is the ONLY way to achieve these forms of animation.
Programming – the bigger picture DSDN 142 Creative Coding
WHAT PROGRAMMING IS FOR: As a general rule you need to use programming whenever you need: variation, interaction, generation, repetiton, calculation or scalability.
these examples follow a regular motif of repetition, calculation and scalability, Each image is a simple set of rules which are continuously claculated then repeated. Every time the art is generated it will be different as random “seeds” are used. In terms of scalability, a bigger image could be produced simply by changing a number or two, and the image could be durastically changed also through the manipulation of a few numbers.
http://4volt.com/Blog/archive/2009/03/07/generative-art-context-free.aspx
Programming – the bigger picture DSDN 142 Creative Coding
VARIATION If you ever need something which is never the same twice, yet still looks refined, the computer needs to know what it can and cannot do. The code you write is essentially a list of instructions and rules for the computer to follow.
http://www.solaas.com.ar/dreamlines/p5/
These images are have all been drawn by the same program. The program takes initial images and transforms them using a set of rules into what you see here. Every time the program runs (even on the same image) the result will be different. This project, Dreamlines, was created using processing, PHP and flash.
Programming – the bigger picture DSDN 142 Creative Coding
INTERACTION ANY form of interaction must be programmed somehow. The computer needs to know how to respond to user input. The code you write is the only thing telling the computer how to react to the users actions.
REPETITION Imagine trying to draw 1,000,000 circles in a huge grid....................... It would take a while. However in just 5 lines of code you could write a program which could do it for you in seconds. Computers and programming are perfect for complex patterns.
1000000 circles are not a problem for even the slowest computers.
Programming – the bigger picture DSDN 142 Creative Coding
GENERATION Computers are great at gathering and generating huge amounts of data. (In our case in design, we would usually proceed to visualise this data). You would need to tell the computer what kind of data you need and how to create it, however, and this is where programming comes in. CALCULATION In essence, a computer is simply a giant caluclator. It is built for the sole purpose of crunching numbers and presenting them to you in a helpful way (just to clarify you don't need to be good at maths to program, programming is NOT maths). Absolutely everything in a computer is broken down into numbers which are then further broken down into 1s and 0s. The one and only thing a computer can do is maths, but we can use this to represent absolutely anything. If you need things calculated, programming is a great tool.
Programming – the bigger picture DSDN 142 Creative Coding
SCALABILITY If you are coding correctly, scalability comes naturally. What I mean by scalability is ease of change and expansion. To take a previous example, if you were to draw the 1,000,000 circles on a 500cm by 500cm piece of paper by hand, and your client came to you and asked for you to change it to 1,000,000 circles on a 200cm by 200cm sheet you would have to start from scratch and spend another few months redrawing circles. However, If you use the code example all you would need to do is change one number. Everything would automatically scale to the correct size. Also to make 10,000,000 circles all that would need to be changed is again, just one number.
To get these variations I simply changed a single number from 100 to 1000 to 5000
Programming – the bigger picture DSDN 142 Creative Coding
DIVERSITY OF LANGUAGE There are hundreds of programming languages, each with their own pros and cons.Most languages, however, run off the same fundamental principals. WRITTEN (TYPED) LANGUAGES: The vast majority of languages, including processing, are typed languages. This essentially means you can write the code in a text editor such as notepad and then compile them using a compiler (the thing which converts your code into something the computer can understand). The other option is to use a special editor, such as the processing IDE (integrated development environment) which worries about all the compiling stuff for you. A few examples of typed languages include: Processing (which is JAVA), c++, Flash Actionscript, javascript, python, ruby, php and lua.There are literally thousands of languages out there, each used for their own reasons. WHY SO MANY? Each language is used in very particular circumstances: If you want to create a slick interactive online application you would probably use flash and actionscript. If you are doing more simple websites which need to get information from elsewhere, javascript is good. If you are accessing database information a lot, PHP is great. If you are writing a standalone (can run by its self on any computer) interactive artwork or installation, Processing is a good option. Writing fully fledged programs like photoshop or firefox is usually done with C++. As you can see different situations call for different languages, but once you know one you know 90% of most of them. If you are studying digital media you will learn several.
Programming – the bigger picture DSDN 142 Creative Coding
A QUICK COMPARISON: Notice how little difference there is between these two code snippets, this is the 1,000,000 circles example written in both actionscript and processing. Processing: int mill = 1000000; int sqrty = (int)sqrt(mill); float circSize = width/(sqrty+0.0); for(int i = 0; i < sqrty; i++) { for(int j = 0; j < sqrty; j++) { ellipse(i*circSize + circSize/2, j*circSize + circSize/2, circSize, circSize); } }
ActionScript: var mill:int = 1000000; var sqrty:int = int(Math.sqrt(mill)); var circSize:float = this.stage.width/(sqrty+0.0); for(var i:int = 0; i < sqrty; i++) { for(var j:int = 0; j < sqrty; j++) { this.graphics.drawEllipse(i*circSize + circSize/2, j*circSize + circSize/2, circSize, circSize); } }
Programming â&#x20AC;&#x201C; the bigger picture DSDN 142 Creative Coding
VISUAL LANGUAGES: Visual languages are the same ideas in a different package. Many designers find these much easier to learn as they come in a visual context. This does limit them however, and as a general rule visual languages are less versatile than written languages and can only do the very particular things the creators designed them for. Visual languages include: Max/msp and jitter (sound and visuals), Quartz composer (visuals), VVVV (realtime video synthesis), Scratch (games and animation), Jeskola Buzz (music) and LabView (scientific data analysis).
Jeskola buzz
Labview
VVVV
max/msp
Quartz composer
Scratch
Programming â&#x20AC;&#x201C; the bigger picture DSDN 142 Creative Coding
CODE REUSE AND PLAGIARISM: There is no point reinventing the wheel. One of the greatest things about programming is the sheer amount of code people have released for your use. Little snippets which you can use to achieve particular tasks. For example, if you want to check if two visual object are touching on screen, you could spend hours trying to write the fairly complex mathematical code required, or you could go on the internet and get somebody else's. HOWEVER Plagiarism is still a huge issue. If you use somebody else's code you MUST acknowledge it. There is no penalty for using other peoples code in small doses, think of it as the programming version of using a quote in an essay. Using somebody's entire program and just changing some variables, however, is still plagiarism just as taking someones essay and tweaking it a bit would be considdered plagiarism. If you use somebody's code it must only be a small part of your program, rather than your input being a small change to their program. AND you MUST MUST MUST acknowledge where you sourced it from. An example of this is on the next slide.
Programming – the bigger picture DSDN 142 Creative Coding
COMMENTING CODE To acknowledge the use of somebodies code you put it in a comment. To start a comment type a dash then a star like so: /* And end it with a star then a dash: */ in processing anything between these will go grey, this means the computer will ignore it when running your program. /* * * * * */
The following code was sourced from the tutorial “PROGRAMMING – THE BIGGER PICTURE” Sourced from http://blackboard.vuw.ac.nz Written by Ben Jack
int mill = 1000000; int sqrty = (int)sqrt(mill); float circSize = width/(sqrty+0.0); for(int i = 0; i < sqrty; i++) { for(int j = 0; j < sqrty; j++) { ellipse(i*circSize + circSize/2, j*circSize + circSize/2, circSize, circSize); } }
When acknowledging code, say who it is by and where you got it from. if the author is unknown, say so. ALWAYS say where it is from