Home

Creative Computing Vol1 - Department of Computing

1. La v AA apy a PE A ES pl A lt L A Example 4 6 The dimensions of a laptop display width 4 3 x 22 86cm 30 48cm Now we can calculate the size of a pixel by dividing the width by 1024 the total number of pixels across the screen or the height by 768 the total number of pixels down the screen We find that the width and height of a pixel is 0 0298cm or 0 0298cm in area That means there 33 59 pixels active to make a line of pixels that is a centimeter across and 33 59 1129 pixels to fill a square centimeter means approximately the actual answer is 1128 678 pixels but we have rounded the answer to the nearest whole number of pixels Learning activity How many pixels are there in the whole screen assuming the 1024 x 768 resolution If stretched out in one long line how long would this single line display be Comments on the activity To work out how many pixels there are in total we multiply the dimensions together For example 1024 x 768 786432 pixels To work
2. 1 8 Some further reading As for visual art there was a renewed interest in understanding music and the mathematics of sound at the Renaissance and later an example is in the work of the French mathematician Marin Mersennd who published in 1627 a book on the mathematics of harmony L harmonie universelle Mersenne is known today because his name is attached to the so called Mersenne primes prime numbers of the form 2 1 where p is itself prime Later mathematical analyses were made of the sound waves corresponding to a single note at a fixed frequency different instruments and different voices give different sound colours timbres and it turns out surprisingly that the sound waves involved can be described by a combination of sine waves at frequencies n 2n 3n where n is the frequency of the base note This technique of harmonic analysis is due to the French mathematician Fourie and is central to current digital sound production techniques We can look at an important recent example of how mathematics enabled new sound worlds to be opened up in the music of the Greek composer lannis Xenakis 1922 2001 Many of his ideas are laid out in his book Formalized Music 1992 Xenakis was influenced by ancient Greek culture and collaborated with le Corbusier as an architect in France He saw architecture as being about articulating structures in space while music involves deploying structures in time in b
3. 08 41 5 2 6 strokeCapC DO 41 53 _SmapToGridl 43 5 4 Observing and Drawing 44 5 5_ Observation and practice A A C FC lt i Ci 68 7 7 Sid A ee 70 DIN 71 73 8 1 Introduction 73 8 2 setup and draw 73 A AP 74 A 74 ae eae 75 ts a ooo ee bees Bae 76 ee PA 76 Se a ee 77 Da 77 Y eat oe Go eres Hees eae 80 ia a Rae RA a ee a 80 MESA A ee Se ces 81 be ae o GA BW eee a ke A 82 Bee he Pe we Oa dee Ga wpe sed 84 acia Sok AD Gh Sr Het Sh Hee Se EE GE 84 Cellular Automata in 1D and 2D Conway s Game of Life CC112 Creative Computing Image Sound Motion Vol 1 Ay y x Q Preface This course unit is about expressing creative ideas through computing At the end of the course unit you will understand some foundational creative processes in the form of computer programs that produce audio visual content to very high standards The course unit provides the foundations of programming for creativity coupled with principles of form structure transformation and generative processes for image sound and video These methods are the conceptual tools that are widely applied in the creative industries They are used by designers special effects technicians animators games developers and video jockeys alike At the end of this cour
4. Essential reading Processing A Programming Handbook for Visual Designers and Artists Shape 1 Drawing order Data 1 Data types Variables Processing variables Math 1 Arithmetic Operator precedence Constraining numbers Math 3 Trigonometry Control 2 Iteration Transform 1 Translation Transform 2 Rotation Image 1 Display Structure 2 Continuous evaluation Controlling the flow Structure 3 Abstraction Creating functions Shape 3 Recursion Appendix D Bit Binary Hex Additional reading Perception and Imaging Chapters 1 2 Principles of Form and Design Chapters 3 4 Introduction In the last chapter you explored methods to draw different types of shape These individual forms can be used to build up larger and more complex drawings In this chapter you will learn about the principles of structuring shapes in relation to each other Gestalt Principles The Gestalt school of psychology was founded by Max Wertheimer in the early 20th century and has profoundly influenced the way modern philosophers and psychologists think about how humans see objects in relation to each other Psychologists also discovered that the same principles apply to sound in speech and music perception see Zakia 2004 The most important guiding principle behind the observations of the Gestalt school is that property of the human brain that sees or hears the whole form not just the parts As such the principles of the Gestalt school ar
5. int dy height N textFont P for int x 0 x lt N N x stroke 127 int floor float x N N 256 strokeWeight 1 Lill f rect x N 0 25 dx x N dy 0 5 dx 0 5 dx int sw loor random dx 4 1 int s floor float x N N 256 127 255 strokeWeight sw stroke s int xl floor random 0 37 0 5 dx sw int yl floor random 0 37 0 5 dx sw int x2 floor random 0 5 dx int y2 floor random 0 5 dx line x N 0 25 dx x1 x N dyt yl x3N 0 25 dx4x2 x N dy y2 fill 0 text background x N 0 2 dx x N 0 5 dy text stroke s x N 0 2 dx x N 0 5 dy 14 text strokelleight sw x3 N 0 2 dx x N 0 5 dy 28 text line x1 yl x2 y2 xSN 40 2 dx x N 0 5 dy 42 Example 5 12 Processing code to generate many configurations of a single line this code uses the random method to create random end points within the constraints of each background rectangle To use this code you must first generate the font by selecting Tools gt Create Font from the Processing editor s menu bar Summary In this chapter we first looked at the necessary elements to create a single line the background stroke strokeWeight strokeCap and coordinates for the line We then looked at how patterns in the coordinates of the end points of lines create patterns of lines on the screen There are lots of ways to dra
6. line 18 18 5 35 4 background 244 stroke 116 strokeWeight 13 line 27 18 41 27 Example 5 3 background strokeWeight stroke and line used in many configurations of a single line 40 background 248 stroke 120 strokeWeight 22 line 23 36 21 18 strokeWeight 16 line 30 17 16 7 amp background 252 stroke 124 strokeWeight 11 line 14 27 19 18 5 2 4 5 2 5 5 2 6 line strokeWeight The strokeWeight method selects the size of the pen in pixels the greater the number of pixels the thicker the line that is drawn We must set the strokeWeight before drawing with the pen for it to have any effect Example 5 3 shows many possible configurations of background stroke and strokeWeight ina grid of sketches The lines are drawn with random end points but can you see the relationship between the background and stroke colours To see for yourself look at the code that generated these examples Example 5 12 Many lines size 256 256 background 192 stroke 0 line 128 0 128 255 strokeWeight 15 stroke 64 line 0 161 255 161 Example 5 4 Two Lines size 256 256 background 64 stroke 128 strokeWeight 5 line 128 0 255 161 strokeWeight 1 stroke 255 line 0 0 width 1 height 1 strokeWeight 17 stroke 32 line 0 128 161 255 Example 5 5 Three Lines Whilst there are many possibili
7. overlapped or intersected A new technique of blending image layers using bit wise logical operators was introduced A number of iterative structuring methods were demonstrated that repeat a basic form in rows columns or diagonals We finally looked at the concept of hierarchy and how to implement it as a recursive procedure in Processing The examples and methods in this chapter serve only as a guide to your own exploration of composing forms into larger concepts You are strongly encouraged to take the examples in this chapter and modify them to create your own compositions You should try making larger structures out of the simple ideas presented here You should also try combining the ideas in this chapter with ideas from previous chapters such as putting together different shapes and structuring them in new ways Exercises 1 Use Processing to draw as many of the Examples in Section Z 2 as you can Which is the hardest to create using Processing For this one can you create a different image that still captures the Gestalt Principle that it exemplifies 2 Example Z 10 shows what is effectively the union of two sets as does Example Z 11 Yet Example Z 10 has much shorter and simpler code than Example Z 1 What is really the difference between these two approaches In what circumstances would you choose one over the other Can you draw the same picture as in Example Z 12 without using the bitwise approach but instead taking an a
8. sketch_060717b Hello World for Creative Computing PFont f ll size 512 256 f loadFont ArialMT 48 vlw textFont fi11 0 text Creative Computing 1 width 16 height 2 SP sketch_060717b l x Creative Computing 1 Example 4 1 The Processing environment showing a sketch and its corresponding output screen for us automatically but we must provide the details of the size of the window that we want Learning activity In any programming language it is interesting to see what happens when we provide the system with no input whatsoever Let s start by seeing what Processing does if we do nothing Make a new Processing sketch Save the blank sketch to your Processing folder Try pressing Run on your blank sketch What happens Comments on the activity We might expect nothing to happen but something happens A blank display is drawn to the screen What size do you think this display is 24 4 3 size size To change the size of the display screen we use a built in Processing command called size gt You should go to the Processing Help Reference menu item This launches your Web browser with the Processing help pages It is often useful to look at the complete form of the Help pages rather than the abridged form That way you can see all the built in commands in Processing Example Z 2 Note that to find the Help page entry for any of the built in commands or the language elemen
9. 1 SNAP TO GRID A Grid Drawing Tool int 2Z 512 The size of the screen int GL 16 The number of grid lines we want float GS2 3Z GL int a b void setup size 32 52 drawGrid stroke 0 void draw SNAP to GRID if mousePressed line snapToGrid a snapToGrid b snapToGrid mouseX snapTo6rid mouseY a mouseX b mouseY ATT float snapToGrid int d ay float GSZml 1 GSZ f return round d GSZm1 6SZ B void drawGrid stroke 200 yam f f k single for loop performs the magic jl ii for int k 0 k lt SZ k GSZ the screen offset in Y amp line across line 0 k SZ k Reverse the c or offset in X line k 0 k 32 e y Close the loop Example 5 8 Drawing on a grid using constraints on end point positions as you increase the number of grid lines Try decreasing the number of grid lines to 8 and 4 What happens How might you draw with the mouse and save the coordinates of the lines that you create Observing and Drawing size 512 512 background 255 stroke 0 line 204 262 358 337 line 102 362 256 437 line 358 337 256 437 2 AN line 204 262 102 362 j line 204 262 256 162 line 358 337 256 162 line 102 362 256 162 Example 5 9 Pyramid adapted from John Maeda s Design By Numbers Once we have some mastery over basic line drawing techniques a 44 5 5 Observ
10. Kandinsky s Teaching at the Bauhaus Colour Theory and Analytical Drawing Rizzoli 1982 ISBN 0847807800 Background The importance of the Bauhaus in this course includes its attempts to rationalise design and production The formalisation of these creative ideas lends itself to implementation in computer aided design and visualisation tools To understand this we need to review the work of some important individuals and their interactions The Bauhaus was founded by the architect Walter Gropius in Weimar in 1919 This school of architecture and design in a small town in Germany was to have a profound effect on artists designers and art education in both Europe and the USA leading to long term influences on society in terms of architecture interior design and furnishing Germany had undergone an industrial revolution following its unification from a number of independent states in1871 The speed with which Germany had shifted from an agricultural country to an industrial one caused social problems Large cities developed where small villages had been and the small cheap dwellings built for the workers led to slum conditions Major industries such as Krupps expanded from small steel works in Essen to an enormous complex manufacturing armaments In 1885 Daimler and Benz built their first motor car Roads and railways were constructed The population of Germany quadrupled CC112 Creative Computing Image Sound Motion Vol 1 German
11. amp to blend layers 64 7 4 4 7 5 Repetition ASB C A B C eft image first argument 72 by XOR ing each pixel with a pixel in the right image second argument PImage P1 P2 int bg 0x00 Background colour int g 0xFF Foreground colour int lenl len2 void setup size 512 512 P3D Required for Image Pasting noLoop noStroke lenl 8 width 13 void draw LAYER 1 background bg fill g ellipse width 3 height 2 lenl lenl Pl get LAYER 2 background bg fill fg ellipse 2 width 3 height 2 lenl lenl P2 get imageXOR P1 P2 image P1 0 0 The imageAND method void imageXOR PImage Il PImage I2 for int i 0 i lt min Il width I2 width i for int j 0 j lt min Il height I2 height j Il set i j Il get i j 12 get i 3 Example 7 13 Using the bitwise XOR operator to blend layers The Exclusive Or operator gives the output value 1 when only one of its inputs is 1 Which bit is 1 does not matter as long as there is only one The XOR of 11000111 and 00000100 is 11000011 We see that the XOR operator acting on two images is the same as the union Or minus the intersection And which is the expression a b amp a amp b see Example 7Z 13 We use the XOR operator to invert the region of intersection in overlapping forms this can be used to create many interesting effects in visual compositions see Example Z 15 Not I
12. global variables for persistence of position and finally the component velocities setup and draw Processing enables the animation of objects by calling a special method called draw a fixed number of times per second until the sketch is stopped When the draw method is used we must also use the setup method to define the screen size background colour stroke colour fill colour and other useful parameters that will not change during the sketch The setup method is called exactly once at the beginning of the sketch then the draw method is repeatedly called These methods use the Java technique of overloading That is they are already defined within the Processing language but if we want them to do anything useful we must redefine them All sketches that use the draw method must redefine it in the following way void setup size mySizeX mySizeY 73 8 3 8 4 CC112 Creative Computing Image Sound Motion Vol 1 Your setup code void draw Your draw code here Example 8 1 shows these elements used in a simple animation float x Global variable void setup size 512 512 111 255 frameRate l0 frame rate 10 Hz draw called repeatedly at the frame rate 10 Hz void draw background 0 ellipse x height 2 10 10 x x 2 amount to change position each step Example 8 1 Animation1 the ball appears to move in a straight line Persistence T
13. height 4 P1 4 1 41 Branching make a tree by recursion void tree float sz float a float sf int n if n 0 return terminate if n is zero rect 0 sz n 6 n 26 n decrement branching pushMatrix rdinate translate 0 sz move to en rotate a rotate by angle tree sz sf a sf n draw a tree rotate 2 a rotate other way tree sz sf a sf n popMatrix 7 draw a tree coordinates R Example 7 20 Another hierarchical composition using rectangles Recursion 69 7 7 CC112 Creative Computing Image Sound Motion Vol 1 relatively common in nature and can be used to describe many natural phenomena such as mountains coast lines and clouds The method of structuring we have used for the fractal tree involves a different type of iteration than a for loop In this case each line of a tree is drawn by the tree method which then calls itself to draw the next branch of the tree Thus each branch is just a copy of the last branch but with a different starting point length and angle of rotation This process of performing a simple operation and calling upon the operation again within the operation is called recursion and is a very powerful form of expression in computer science This example shows how a composition can be organised recursively so that the different levels of the composition relate to each other by hierarchy Finally Example Z 20 shows the same seq
14. object in the array can be moved in turn When using coordinate transformations to perform the motion we must call the pushMatrix method before the transformations and call the popMatrix method after the transformations to ensure that all objects are drawn in their correct absolute position If we do not do this then each object gets a position that is relative to the last object and many of them will be drawn off the screen Example 8 11 shows a sketch that draws 10 circles in motion each with individual positions component velocities and sizes Compare this example with Example 8 2 to see how the same technique of motion is used but contained within a loop structure If you are not familiar with Java arrays then now is a good time to look them up in your Java text book Learning activity Modify the number of objects drawn in Example 8 1T to 100 and 1000 respectively Do you notice a difference in the speed of drawing Modify the sketch of Example 8 5 to draw multiple balls to be hit by the user s single bat Start the balls in different initial positions and with different component velocities as shown in Example 8 11 82 Motion of Multiple Objects int nObj 10 number of objects float x new float n0b3 y new float n0b3 float xVel new float n0bj yVel new float n0bj float sz new float n0b3 void setup size 512 512 P3D background 0 noFill stroke 255 for int i 0 i lt n0bj i 4 x
15. to zoom 32 times each pixel in the computation image would then get 32 pixels in the displayed screen image 90 9 6 9 7 Exercises Find a different set of rules for two dimensional cellular automata Explore the initial patterns and resulting behaviours for the rules that you found Summary The purpose of this chapter was to demonstrate that itis possible to draw complex patterns out of very simple rules We shall visit this concept again in Creative Computing 1 Image Sound Motion Vol We first looked at how pixel values could be manipulated as bit patterns then we looked at a method for implementing one dimensional cellular automata rules from the bit patterns This chapter concluded with a version of Conway s Game of Life a two dimensional cellular automaton that is widely known It is often used to teach fundamental principles of self organisation or distributed intelligence both of which are advanced subjects in computer science Exercises 1 In this chapter you saw a 1 Dimensional cellular automaton and a 2 dimensional cellular automaton What is the difference between these What would a 3 Dimensional cellular automaton do Can you find or create examples of one Is it possible to have 4 Dimensional cellular automaton 2 The examples in the chapter use a parameter P3D in the size method What is this parameter and what is it doing What happens if you leave it out 3 This chapter focussed on the
16. 1 f initial row PImage gl void setup size 64 64 gl new PImage width height New generation background 0 Initial conditions two gliders int wewidth 2 h height 2 set w l h 1 0 set w h 1 0 set w tl h 1 0 set w l h 0 set w h 1 0 w width 3 h height 3 set w l h 1 0 set w h 1 0 set w 1 h 1 0 set w 1 h w0 set w h 1 0 void draw Check entire screen in 3x3 grids for int x l x lt width x int sum 0 for int xx 1 xx lt 2 xx4 for int yy 1 Yy lt 2 Yy 1 xx 08eeyy 0 sumt get xX xx Y 77 61 if get x 6l 1 if sum 2 sum 3 gl set x Y 0 7 White with alpha 255 else gl set x Y 0 lt lt 24 Black with alpha 255 else if sum 3 ol set x Y D generation pixels stored in an image if yrheight set 0 0 gl put next generation to screen y l begin again Example 9 4 Two gliders in Conways Game of Life 89 CC112 Creative Computing Image Sound Motion Vol 1 The sketch in Example 9 4Jis a very simple implementation of two gliders operating under the rules of Conway s Game of Life A PImage variable holds the state of the next generation whilst the screen also a PImage holds the current state of the game The above rules are applied using a 3 x 3 grid centred on every pixel on the screen We simply count the number of neighbours for each pixel and check against the rules whether the pixel should be switched on or off
17. 3 width 3 Example 7 7 Disjoint forms Two forms are said to be disjoint if they appear as two separate entities see Example Z7 The notion of disjointness is inextricably bound to the Gestalt principles since it requires that the forms be placed at a certain distance from each other but the distance for separateness is dependent upon the size of the forms and the size of the composition You will learn by observation and by your own judgement how to place forms such that they appear disjoint Proximal When two forms come into non overlapping contact we call them proximal In Example Z8lit is clear that there is a proximity relationship by virtue of their closeness Unequal sizes with 61 7 4 CC112 Creative Computing Image Sound Motion Vol 1 Proximal forms size 256 256 background 255 f i11 0 ellipse width 3 height 2 width 3 width 3 ellipse 2 width 3 height 2 width 3 width 3 Example 7 8 Proximal forms proximal interrelationships of form suggests hierarchy and can be used to signify parent child or other unequal relationships Overlapping Overlapping forms size 256 256 background 255 i11 0 stroke 255 ellipse width 3 height 2 width 2 width 2 ellipse 2 width 3 height 2 width 2 width 2 Example 7 9 Overlapping forms The idea of overlapping forms is conveyed by drawing form boundaries with stroke colours that are different
18. Ludwig Hirschfeld Mach in 1923 wrote a score for a colour sonata of three bars using a combination of light and music Lights and templates were moved in time to the fugue like music In 1924 Hirschfeld Mach wrote Yellow red green blue in glowing intensity move about on the dark background of a dark linen screen up down sideways They join and overlappings and colour blendings result Maholy Nagy experimented with photography producing photograms and photomontages He maintained that traditional painting was finished The move from working on a canvas to creating art through mechanical means meant that artists were no longer involved with creating a piece of art In 1922 Maholy Nagy ordered his telephone abstract enamels from a factory He described these works as enamel pictures executed by industrial 13 CC112 Creative Computing Image Sound Motion Vol 1 methods e g see http www jstor org view 0024094x ap050079 05a00140 1 frame noframeauserID 9edf3b4a goldsmiths Maholy Nagy was also involved with typography and page layout which was itself an art form He moved away from static lay outs to dynamic ones especially in poster work in the style of Lisitsky a Russian Constructivist whose poster of 1919 shows a red triangular wedge representing the Communists being driven into a circle of white the White Russian Army e g see www sovr ru english show virtuall shtml or http www allposters com s
19. a shade of gray If they are all set to 1s then we see white In this chapter we will only consider black and white sketches in the next volume we will learn how to use the colour channels to make colour sketches Note The Alpha value is the degree of opacity opposite of transparency so when it has the value 255 11111111 the pixel is completely opaque while if given the value 0 it is completely transparent and thus the colour values of the pixel retain their current values and are not modified by new values We must be careful to exclude the alpha channel from any colour value arithmetic that is intended for the RGB channels We do this by bit masking which is explained below Images out of bits int y int c 0 gt gt 8 Alpha mask void setup size 256 256 P3D background 0 gt set width 2 0 0 void draw for int x 1 x lt width l x set x y l get x l yjec get x y ec get xtl yjec c if yrheight exit Example 9 2 The Exclusve OR XOR bit wise operator is applied to the colour values of each row to get the pattern for the next row We can use the bits in each pixel to compare colour values between adjacent pixels and set the next row s colour values based on simple 86 9 4 Three bit 1D Cellular Automata adjacency rules Example 2Juses the Exclusive Or operator on three adjacent pixels in the current row y to set a pixel value in the next row y 1 The first has i
20. architects and began a programme on research into the requirements of social housing He re organised the Bauhaus into four departments Workshops were now to operate for three days The new departments were Building Advertising Interior Design and Textiles Workshops were to become self financing through commissions The Interior Design Department under a former student Alfred Arndt designed low cost furniture for mass production and wallpaper which became very popular and helped finance the department e g see http www artmuseums harvard edu collections servlet webpublisher WebCommunication ia cosrch l The Textile Department liased with the manufacturing industries and Walter Peterhans joined the Advertising Department where he focused on teaching photography not as an art form but as a science e g seelhttp www ifa de a al foto ealbpebi htm Mayer was forced to leave the Bauhaus in 1930 by the Nazis who accused him of allowing a communist cell into the school Mies van der Rohr succeeded Mayer He had worked with Gropius in Behrens office He had begun to design skyscrapers and was a supporter of functionalism The school closed for a period and when it opened it was more a school of architecture than design The last phase of the Bauhaus in Germany The Nazis had little sympathy with van der Rohr s ideas on simplicity and functionalism The school in Dessau was closed and van der Rohr moved the Bauhaus to
21. circles that are two circles wide The hierarchical aspect is that there is a clear division between left and right parts of the composition so there are two sides each made up of 36 circles and the right hand side has three groups of 12 circles All of these groupings are caused by some circles being closer to each other than others Do you see any other groupings in this picture 59 7 2 2 7 2 3 CC112 Creative Computing Image Sound Motion Vol 1 OOO 00 00000090 O 0 05 00 00000090 O DO Do 00000090 Example 7 5 Gestalt Principle of Similarity Forms that are similar are seen as grouped together Here we see rows instead of a square of circles Similarity The Gestalt principle of similarity is more complex in that it requires there to be something that is unchanged or changed very little between forms for them to be perceived as similar Example 75 shows an arrangement of circles such that the perceived grouping is caused by the similar colours in each row of circles It is close to impossible to see the picture any other way Closure Example 7 6 Gestalt Principle of Closure We tend to see whole shapes as closed forms even if the lines that define them are broken The principle of closure or good continuation is the observation that lines do not have to be continuous to define a form In Example Z 4 the lines are broken yet the perceived forms seem complete We see a circle and a rectangle as complete
22. draws the ball at the origin In addition to the global variables for remembering the position of the coordinate system the component velocities are also defined using two global variables float dx 1 dy 2 Compared to Example 8 2 this example shows that setting the jumps in x and y to different values changes the direction of travel If the size of the jumps is the same each time we call the draw method then the motion will always be in a straight line Eventually depending on the size of the jumps the ball reaches the edge of the screen and moves beyond it The ball continues to be 75 8 6 8 7 CC112 Creative Computing Image Sound Motion Vol 1 drawn but it is drawn off the screen so we do not see it Reflection at Boundaries float x 256 y 256 Global variables float dx 11 dy 13 rate of change of position velocity int sz 10 void setup size 512 512 P3D 111 255 frameRate 10 draw called repeatedly at the frame rate 10 Hz void draw background 0 translate x y ellipse 0 0 sz s8z if x lt sz x gt width dx dx dx Reflect off left and right screen edge if y lt sz y gt height dy dy dy Reflect off top and bottom screen edge x dx f amount to change x position each step yt dy amount to change y position each step Example 8 4 Detecting when the ball is at or past one of the edges of the screen and reversing the component velocity To
23. endShape O and vertex x y In Example 6 ZJa series of vertices points describe an irregular shape that is then completed automatically to create a closed shape Learning activity Using Example 6 7 what happens when you use i11 0 before calling beginShape beginShape accepts an argument such as beginShape TRIANGLES try each of the arguments from the following list what do they do i TRIANGLES ii QUADS iii POINTS iv LINES v TRIANGLE_STRIP vi QUAD_STRIP vii TRIANGLE_FAN Construct some of the regular polygons described above using beginShape and endShape The translateQ line and rotate methods do not work between the beginShape and endShape method calls You will need to perform some geometry to calculate the vertex coordinates for your regular polygons 55 6 4 6 5 CC112 Creative Computing Image Sound Motion Vol 1 Summary In this chapter we discussed various types of shape and how to construct them using Processing We have also investigated how unit forms can be combined to yield more complex forms and that these more complex forms can be structured into elaborate compositions It is with this structuring process that we are concerned in the next chapter Exercises 1 56 In Section 6 2 Mondrian s Composition with Red Yellow and Blue was presented You will look in detail at colour later in the course but now is a good time for you to begin to u
24. from their interior fill colours as in Example Z 9 Note that the stroke colour is the same as the background colour in this example The form that is drawn last appears to be on top of its predecessor Conjoined If we remove the stroke in the overlapping portion of the two forms then we obtain a new form that is the union of the unit forms This is a way to combine unit forms into more complex forms as shown in Example Logical Combination More complex forms arise when we colour the areas of intersection of two unit forms in different ways In this section we look at doing 62 7 4 1 7 4 2 7 4 3 Logical Combination Conjoined forms size 256 256 background 255 fi11 0 ellipse width 3 height 2 width 2 width2 ellipse 2 width 3 height 2 width 2 width 2 noFill stroke 0 rect 0 0 width 1 height 1 Example 7 10 Conjoined forms this using binary logic Each colour value for each pixel is represented in hexadecimal notation as a 32 bit number of the form AARRGGBB these are the alpha value AA red RR green GG and blue BB colour values respectively Each pair of letters 0 to 9 and A to F in hexadecimal notation represents eight bits of data or one byte Therefore the bit wise logical operations on the RRGGBB values perform each of the conventional set theoretic operations of union intersection and complement The alpha value which controls opacity is described more full
25. have been built to carry out en wikipedia org wiki Abacus 1 7 CC112 Creative Computing Image Sound Motion Vol 1 calculations mechanical devices in the 19th century up to programmable electronic machines starting around 194 Back in 1843 Charles Babbage in England designed a mechanical computer programmable via punched cards Ada Lovelacd I worked closely with Babbage and was thus one of the first computer programmers It is striking how much of the mathematical theory of computation had been put in place before there were any computers in existence as we understand the term today Already in 1936 mathematical characterisations had been worked out of which functions from natural numbers to natural numbers could be computed and it had been shown that there are some such functions that simply cannot be computed whichever programming language is used and however much time and space is used in the computation Alan Turing was one of the pioneers here along with Alonzo Church and Emil Post It had been a long standing philosophical question whether machines can show intelligence and Alan Turing was also instrumental in provoking work in Artificial Intelligence His description of reasoning machines breathed new life into Leibniz s outline proposal Turing argued that computers could in principle be made to process sensed data following reasoning patterns as humans do and would then be to all intents and purposes act
26. height 1 line width 1 height 1 0 height 1 line 0 height 1 0 0 Example 5 7 A grid can be composed by equally spaced lines in both horizontal and vertical directions Grids are extremely important tools for drawing structuring and compositional processes A grid usually consists of evenly spaced horizontal and vertical lines that extend across the screen see Example 5 7 The important aspects of this sketch are the relationships between the coordinates First take a look at the vertical lines then the horizontal lines Do you notice any patterns in the coordinates between the two types of lines These patterns are fundamental they are due to the geometry of grids You should become familiar with them and try to use them whenever arranging a sketch with multiple elements Often we don t actually want to draw a grid but use it as a guide for arranging a composition or sketch Example 8 shows how we can use a grid to constrain the drawing of a set of lines by hand Contrast this example with the example in Chapter 1 using mouse movement to draw points to the screen Learning activity Starting with the sketch in Example 5 8 remove the drawing of the grid but leave the constraint of the grid in the code Try increasing the number of lines in the grid by changing int GL 16 to other values such as 32 64 and 128 What do you notice 43 5 4 CC112 Creative Computing Image Sound Motion Vol
27. in the next generation We store the next generation state in a second PImage because all of the pixels are supposed to be changed at the same time instant called a tick The calls to the set O method in the setup code initialize two gliders These are patterns that have a walking motion across the screen under the rules of the cellular automaton Example 9 5 Initial state pattern for a glider The initial pattern for a glider is shown in Example 9 5 Example 9 6 Initial state pattern for a spaceship Another type of glider is known as the spaceship its initial pattern is not a3 x 3 grid but instead must be constructed on a 5 x 4 grid However the glider works using the standard 3 x 3 grid rules of the Game of Life Example 9 6 shows the spaceship initial pattern Example 9 7 Initial state pattern that self replicates grows indefinitely There are also patterns that grow indefinitely and reproduce One such pattern is shown in Example 9 7 The initial pattern requires a 5x5 cell Learning activity Add the spaceship and self replicating patterns to the initial conditions of Example 9 4 You should be careful to place the patterns away from any of the other initial patterns so they don t interfere in the first generation Make an implementation of the Game of Life that uses larger blocks One possible way to do this is to make the screen image a zoomed in version of a smaller computation image For example
28. noStroke lenl 8 width 13 void draw LAYER 1 background bg fillifg ellipse width 3 height 2 lenl lenl Pl get LAYER 2 background bg fill fg ellipse 2 width 3 height 2 lenl lenl P2 get imageOR P1 P2 Pl Pl P2 image P1 0 0 The imag JR method void imageOR PImage Il PImage 12 for int i 0 i lt min Il width I2 width i for int j 0 j lt min Il height I2 height j Il set i j Il get 1 3 12 get 1 3 Example 7 11 Using the bitwise OR operator to blend layers Image AND Two Laye f This operator is NOT commutitive AsB sC As BaC The method imageAND modifies the left image first argument 7 by AND ing each pixel with a p PImage P1 P2 int bg 0x00 Background colour int fg OxFF Foreground colour int lenl len2 void setup 3ize 512 512 P3D Required for Image Pasting noLoop noStroke lenl 8 width 13 void draw LAYER 1 background bg fill fg ellipse width 3 height 2 lenl lenl Pl get LAYER 2 background bg fill fg ellipse 2 width 3 height 2 1enl lenl P2 get imageAND P1 P2 image P1 0 0 xel in the right image md argument The imageAND method void imageAND PImage Il Plmage I2 for int i 0 i lt min Il width I2 width i for int j 0 j lt min Il height I2 height j Il set i j Il get i j I2 get i j Example 7 12 Using the bitwise AND operator
29. out how many centimeters a line of this many pixels would be we calculate 786432 x 0 0298 23435 6 cm that is x 234 meters or 0 23 kilometers 33 CC112 Creative Computing Image Sound Motion Vol 1 As an illustration of how to use Processing to work out the answers to the display dimension problem Examples 4 ZJjand Z 8 show a Processing sketch that computes these dimensions and its output Don t worry if you don t understand all the syntax for now you will learn what it all means in your JAVA course and in later sections of this subject guide But see if you can find where the diagonal dimension and aspect ratio are specified and where the answers to the screen width and height and dimensions of a single pixel are calculated 7 Solve the screen pixel size problem float D 38 1 L float A 4 3 A float h sqrt pow D 2 pow A 2 1 Height cm float hPix 768 height pixels Go backwards to check our result float d sqrt pov A h 2 pow h 2 Now print the results println All Screen Units in Centimeters println screen diagonal d ength of the diagonal pect ratio println screen width Ath Print Width println screen height h Print Height printin pixel width h hPix Print Width println pixel height h hPix Print Height println pixel per cm 1 th hPix println total pixels A hPix hPix println total pixel centimeters A hPix h Exa
30. percepts This principle suggests that we can play with line as a way to suggest form without explicitly drawing the entire object Learning activity Make a Processing sketch of the first figure in this chapter showing the Gestalt principle of reification Example 7 7 Hint use the arc method to draw the incomplete circles from a 60 7 3 7 3 1 7 3 2 Interrelationship of Unit Forms starting angle StartAngle the distance around the circle is StartAngle 5 TWO_PI 6 An equilateral triangle has equal length sides use a variable such as float length The horizontal position of the top vertex relative to one of the bottom vertices is length 2 The vertical distance from the base to the top is sqrt 3 length 2 in Processing this distance is negative relative to the base line because the upwards direction corresponds to decreasing the y coordinate Interrelationship of Unit Forms We now go on to look at how to program the basic ways in which unit forms are placed in relation to each other using proximity relationships We go on to examine structuring principles that build on these relationships The proximity relationships are Disjoint Proximal Overlapping and Conjoined Each of these concepts should be considered as examples of Gestalt principles as shown above Disjoint Disjoint forms size 256 256 background 255 fil1 0 ellipse width 4 height 2 width 3 width 3 ellipse 3 width 4 height 2 width
31. size method requires two arguments both of which are integers and they control the width and height of the Processing display screen The width is simply the number of pixels horizontally across the screen and the height is the number of pixels the screen will display vertically For example the following Processing sketch makes a screen that is 128 pixels wide and 512 pixels high size 128 512 This sketch consists of a single line of code Try running it In Processing like many other computer languages individual chunks of code must be terminated by semi colons This makes it easy for the Processing program to identify where each statement ends Line breaks are allowed between parts of a single statement but statements must be terminated with a semicolon Here are some other screen sizes for you to try How they appear on your physical display device depends on the type of device you are using especially its physical dimensions and screen resolution Learning activity Launch Processing Make a new folder for your sketches Make a series of sketches consisting of screens of the following different sizes size 512 128 size 128 512 size 1024 128 size 1024 768 Save these sketches to your folder Re load the sketches using the sketch gt open menu item in the Processing environment Try modifying and re saving some of your sketches Comments on the activity Processing automatically makes a new folder for you
32. slow way to do things compared to Processing s built in shape drawing methods setting individual 85 9 3 CC112 Creative Computing Image Sound Motion Vol 1 pixels allows us complete control over the screen Example 9 1 shows how to switch all the individual elements on the screen using a bit wise operation A global variable y holds the height of the row to be drawn Then the setup method draws the sketch window and makes the background black The draw method uses a for loop to visit every pixel in each row of the sketch Each pixel is accessed using the set x y c method which sets the pixel at screen position x y to the value c In Processing and Java the colour value of each pixel is represented by a 32 bit integer Black is all bits set to zero and white is all bits set to one We can quickly set all the bits to one using the unary bit wise not operator which flips all the bits in a binary representation of a number For the number 0 the bits in a 32 bit integer are 00000000000000000000000000000000 and the value 0 makes the bits in the integer 11111111111111111111111111111111 So the method call set x y 0 sets all bits to one which is white The 32 bit integer representing colour is split into four bytes 11111111 11111111 11111111 11111111 These bytes represent the Alpha Red Green and Blue colour channels respectively AAAAAAAA RRRRRRRR GGGGGGGG BBBBBBBB When the R G and B values are the same we see
33. starting with size 512 512 38 5 2 2 5 2 3 line Draw a vertical line down the left hand side of the screen at x coordinate 0 Draw a vertical line down the right hand side of the screen What is the x coordinate of the last column of pixels on the right hand side of the screen Draw a horizontal line across the middle of the screen Draw a horizontal line across the bottom of the screen What is the y coordinate of the last row of pixels at the bottom of the screen Draw a diagonal line that is 20 pixels to the right of the default line Draw a vertical line that is 50 pixels below the default line Put all your lines in a single sketch background There are four method calls in this chapter s examples that control the appearance of a line background stroke strokeWeight and strokeCap The background sets the background colour of the screen with 0 meaning black and 255 meaning white Values in between are shades of grey that are continuous from black to white stroke The stroke method also sets a colour but it is the colour of the pen We must set the colour of the pen before drawing with it The range of possible colours for the pen are the same as for the background What will happen if we set background and stroke to the same colour Learning activity In a new sketch using size 512 512 try to find the value of the default background colour by setting stroke gt
34. the editing box screen Visual artists create on a canvas composers create on staff paper In Processing we create on a screen The screen is a flat rectangular surface with millions of pixels that can be controlled individually to produce light at different intensities In Processing we type commands into a text document called a sketch After we make a Processing sketch we can play it by pressing the Run button as if it were a music player or a video player for example Via sketches we control the individual pixels on the screen So the pixels are the raw material that we manipulate in a visual sketch Note that we may create sound instead of a visual image but for now we will concern ourselves only with the visual domain We must be careful to make a distinction between the screen in Processing and the display device that is attached to your computer be it a laptop a monitor on your desktop or maybe a wide screen high definition plasma display We will call these physical displays In Processing the screen is an interface to a window that is displayed automatically see Example 4 1 This window is sent to the display device via the operating system OS In contrast to JAVA where we must explicitly program every graphical interface element ourselves the Processing environment will create a window 23 CC112 Creative Computing Image Sound Motion Vol 1 o processing oris Beta 10 x File Edit Sketch Tools Help
35. use of pixel manipulation to create images What aspects of a pixel can be manipulated changed 4 You will see more on colour in the next volume of material for this course but now is also a good time to experiment yourself with the colour values that can be changed by using methods such as set Modify Example 9 2Jand Example 9 3 to include colour rather than greyscale shading Again you should bring a creative component as well as a techinical component to this exercise 91
36. 0 pixels then a line at the turtle s origin is different from a line at the screen origin The turtle s origin is wherever the turtle happens to be Learning activity Using the example in Example 6 6Jas a guide construct the following regular polygons i Hexagon Six Sides ii Heptagon Seven Sides iii Octagon Eight Sides iv Nonagon Nine Sides v Decagon Ten Sides How many sides can you get up to Which shape does your many sided polygon start to resemble as the number of sides increases 54 6 3 5 Construction of Simple Polygons Irregular polygon size 512 512 background 255 noFill beginShape vertex 61 161 vertex 61 61 vertex 161 100 vertex 261 161 vertex 161 261 endShape CLOSE beginShape vertex random 512 random 512 vertex random 512 random 512 vertex random 512 random 512 vertex random 512 random 512 endShape CLOSE Example 6 7 Construction of irregular polygons using automatic closure Construction of Irregular Polygons Irregular polygons have one or more non similar edge lengths or angles For these it is not possible to repeat exactly the same sequence of line translate and rotate statements to draw the shape Processing offers three convenient methods to calculate the angle and length of the last connecting line given a sequence of points that describe the edges of a shape They are beginShape
37. 3 strokeWeight 5 strokeWeight 35 strokeCap PROJECT strokeCap ROUND strokeCap PROJECT line 30 34 37 65 line 45 25 127 29 line 37 58 113 51 strokeWeight 28 strokeWeight 5 strokeWeight 30 strokeCap SQUARE strokeCap ROUND strokeCap SQUARE line 45 49 115 64 line 43 38 70 120 line 35 67 68 35 Example 5 6 Pairs of lines with different strokeWeight and strokeCap values 42 5 3 Snap To Grid Exampleb 6 shows the three types of strokeCap that are available ROUND SQUARE PROJECT The fist two are straightforward except that round projects beyond the end of the line using a semicircle that has a radius of the current strokeWeight in pixels For this reason the third strokeCap type namely PROJECT is used to create a SQUARE end to a line that projects the same amount as a ROUND line end Example 5 6 demonstrates that lines that end with ROUND or PROJECT are more likely to fall outside of the shaded background area this is because the randomly selected end points are chosen to fall within the background area but some of the lines project beyond their end points due the strokeCap Snap To Grid 2 A Grid size 256 256 stroke 0 line 0 16 255 16 line 16 0 16 255 line 0 32 255 32 line 32 0 32 255 line 0 48 255 48 line 48 0 48 255 line 0 64 255 64 line 64 0 64 255 Vertica 7 A Border line 0 0 width 1 0 line width 1 0 width 1l
38. 8 16 line 31 19 35 19 line 21 7 3 12 background 20 stroke 147 stroke Weight 12 line 20 14 2 9 background 52 stroke 179 strokeWeight 10 line 15 27 4 34 background 84 stroke 211 stroke Weight 14 line 29 23 27 36 background 116 stroke 243 strokeWeight 8 line 14 15 14 44 background 148 stroke 20 strokeWeight 11 line 18 20 6 16 E background 24 stroke 151 strokeWeight 18 line 24 30 17 3 background 56 stroke 183 strokeWeight 10 line 18 12 9 18 background 88 stroke 215 stroke Weight 24 line 38 41 47 15 background 120 stroke 247 strokeWeight 15 line 25 18 21 26 background 152 stroke 24 strokeWeight 12 line 16 23 28 34 d background 28 stroke 155 stroke Weight 10 line 21 14 9 21 E background 60 stroke 187 strokeWeight 7 line 16 13 9 42 background 92 stroke 219 stroke Weight 20 line 28 31 21 21 background 124 stroke 251 strokeWeight 17 line 17 31 22 32 background 156 stroke 28 strokeWeight 10 line 27 27 14 2 y background 180 background 184 background 188 stroke 52 stroke 56 stroke 5D strokeWeight 15 strokeWeight 3 stroke Weight 20 line 30 20 46 8 line 17 3 5 15 line 30 28 36 35 background 212 background 216 background 220 stroke 84 stroke 88 stroke 92 stroke Weight 11 line 17 12 9 32 strokeWeight 4
39. Arab Islamic part of the world new ideas were developed that affect the way we think mathematics and represent it to this dayH Not all the mathematicians involved were in fact Muslim Jews and Christians were involved and itis worth remembering that North Africa and parts of Spain were part of the Arab world at the time It is a tribute to this period that mathematical terms from Arabic have found their way into the English language Among these are zero The Roman number system does not have a number zero nowadays the symbol 0 plays two roles as a number on its own and as a part of a number system in base 10 for example Both these uses came to the west through the influence of Arab mathematics 1 www groups dcs st and ac uk history Mathematicians Pythagoras html www groups dcs st and ac uk history Indexes Arabs htm www groups dcs st and ac uk history HistTopics Zero html 1 5 CC112 Creative Computing Image Sound Motion Vol 1 algebra The beginnings of modern algebra appear with the work of al Khwarizm 4 he treated rational numbers irrational numbers and geometrical magnitudes as algebraic entities The word algebra itself comes from the title of his book from the 9th century Hisab al jabr w al muqabala algorithm The term algorithm is in fact based on the name al Khwarizmi The word has passed through Latin originally referring to the Arabic numbering syste
40. BSc Hons Creative Computing CC112 Creative Computing Image Sound Motion Vol 1 Subject guide Written by xxx yyy ZZZ Published 2007 Copyright University of London Press 2007 Printed by Central Printing Service The University of London Publisher University of London Press Senate House Malet Street London WC1E 7HU All rights reserved No part of this work may be reproduced in any form or by any means without permission in writing from the publisher This material is not licensed for resale Contents 1 History of Mathematics and Computing in Creativity 1 1 Introduction A SIA ERA AA a Wi A fe lt 1 8 Some further reading 2 The Bauhau 2 2 The Beginning of the Bauhaus 2 4 Movement towards Constructivis ANA Gare ee 41 4 2 Introductio screen Pa 4 11 Exercises 5 background stroke and line 5 1 Introductio DAN 5 2 2 background HH 5 2 3 stroke H 5 2 4 strokeWeight 2 1 Backoroundl 2 2 1 Principles for the Bauhaud 2 3 Bauhaus Developments with New Staff 2 5 The last phase of the Bauhaus in Germany 5 2 1 Vertical Horizontal and Diagonal Lineg 0 NX D0040NNR pa CC112 Creative Computing Image Sound Motion Vol 1 525 Manylinegd
41. Berlin However after a number of raids by the Nazis the school closed down Many of those who had worked there eventually settled in the United States of America Exercises Use the recommended reading and other relevant texts in working on the following exercises In your writing be sure to place any material from sources in quotation marks and identify the source at the point of use and provide a full reference list at the end this is to ensure you avoid plagiarism see News page advice and Student Handbook Long quotations have no value in showing understanding or earning marks In any assessment it is your own contribution in your own words that matters 1 Discuss the importance of the contributions of Itten and Albers Moholy Nagy in the development of the Foundation Course at the Bauhaus Include consideration of the contrast between the Nature and Machine approaches and their effects on teaching and outcomes for the students 2 Discuss which of the Itten and Albers Moholy Nagy approaches to design teaching lends itself most easily to implementation and expression with computer aided tools for 16 Exercises pictorial expression such as the Processing package used in this unit Include an appraisal of the benefits or otherwise of possible languages of basic shapes such as that of triangle circle square and their differing emphases on two and three dimensional work Discuss whether or not the approach of Kand
42. Global variables void setup size 512 512 111 255 frameRate 10 draw called repeatedly at the frame rate 10 Hz void draw background 0 ellipse x y 10 10 x x 2 amount to change x pos ach step step yeytl amount to Example 8 2 Using component velocities in both x and y makes diagonal motion Shifting by two pixels each step results in motion that is twice as fast as one pixel each step Using two global variables one each for the x dimension and y dimension we can create motion in two dimensions Example 8 2 shows the resulting motion of moving a ball with component velocities x x 2 and y y 1 Motion by Coordinate Transformations float x 256 y 256 Global variables float dx 1 dy 2 f rate of change of position velocity void setup size 512 512 P3D 111 255 frameRate 10 draw called repeatedly at the frame rate 10 Hz void dravw background 0 translate x y ellipse 0 0 10 10 xt dx amount to change x yt dy amount to change y Example 8 3 Setting the component velocities to different values changes the angle direction of motion Recall in Chapter 6 we used Processing s built in transformation methods translate and rotate to draw shapes using the turtle graphics concepts of Seymour Papert s Logo language Example 8 3Juses the translate x y method to change the position of the origin of the coordinate system and then
43. Illustrator or a programming language such as Processing We will focus on lines in this chapter because a thorough understanding of line forms the basis of every artist s repertoire of drawing techniques Line is also a structural concept once we know how to draw a line we can understand how to arrange other elements into lines and we can start to use line in our sketches and compositions line In Processing drawing is defined by a total of seven numbers the background colour the stroke colour the stroke weight width of the pen and two points to connect requiring a total of four coordinates As we saw in Chapter B Processing provides us with a default screen background colour and stroke colour The simplest line we can possibly make uses default values for all of these Such a line requires only four numbers the two sets of x y coordinates of the end points For example the single statement line 0 0 width 1 height 1 used in a sketch draws a line in the default stroke colour 0 against the default background colour 0 using the default screen 100 x 100 pixels see learning activity below Try it see Examplel5 1 The default line is a very useful line because it tells us many things about a drawing program Perhaps the most important thing it tells 37 5 2 1 CC112 Creative Computing Image Sound Motion Vol 1 line 0 0 width 1 height 1 Example 5 1 The simplest line in processing using all the defau
44. Prefabrication of Houses on a Unified Artistic Basis 10 2 2 2 2 1 The Beginning of the Bauhaus The Beginning of the Bauhaus In 1907 an organisation called Werkbund led by Muthesius an architect was formed Muthesius maintained that industry not the artist had the energy to make cultural changes He held that architecture should move towards standardisation Gropius disagreed with this theory as he considered the artist or architect should determine the forms of buildings Gropius and his partner Adolf Meyer were successful architects before the 1st World War Gropius had designed the model factory for the Cologne exhibition the Fagus factory see e g ttp www greatbuildings com buildings Fagus_Works htm or furniture and a locomotive After the war Gropius was asked by the Weimar State Council to formulate his plans for establishing a school of art and architecture In 1919 Gropius was appointed as director Principles for the Bauhaus Gropius produced the Bauhaus Manifesto to set out his aims for the school He wrote that all creative arts were to return to the crafts and there was to be no difference between the artist and craftsman Architecture was the supreme art form Artists must be trained to work for industry Artists architects sculptors and craftsmen should all work to one common goal The Bauhaus staff would consist of a master and ajourneyman to each workshop ensuring that techniques as we
45. alues a and r to rectangular coordinates x and y Perlin Noise float xoff 0 0 int sz 20 void setup size 512 512 P3D frameRate 30 background 0 stroke 255 void draw 111 0 0 0 20 Make a trace using alpha channel rect 0 0 width height Get a noise value based on xoff and scale float x noise xof width float y noise xoff 1 41 height translate x Y ellipse 0 0 8Z 8Z With each cycle increment xoff xoff 0 01 Example 8 10 Perlin noise generates motion that looks more life like than Brownian motion It is still randomly generated but using a special noise method that generates the Perlin noise Sometimes we want to generate motion that is indeterminate but that has a more life like quality than the motion that is generated by Brownian motion Ken Perlin invented a technique to generate noise that is more natural in appearance than that of the random method The method is called noise in Processing and takes one argument that is an offset value This value simply determines where in a pre computed function to look up the noise value Small jumps create small shifts in random values and larger jumps create larger jumps in the random values Using this method we can create a smooth random motion Example 8 10jillustrates Perlin noise used in this manner Notice in this example that the x and y positions are not persistent Instead the xoff noise table look up p
46. ance of motion in Processing can be created by repeatedly erasing drawing and moving a set of objects The type of motion can either be in a straight line Example 8 1 Example 8 2 and Example 8 3 or a more complex motion based on curved paths Example 8 6 and Example 8 7 or a motion based on different types of randomness Example 8 9Jand Example 8 10 In applying motion to our sketches we can give the impression of movement that we might see in nature such as bouncing gravity or life like motion Perlin noise When we make a creative sketch it is useful to base our programming on observations of the real world so that we learn to choose the correct type of motion to model the situation we want to create You should look carefully at different types of motion now that you know the basics of how to imitate them and see if you can refine your sketches to create more realistic lifelike and compelling creative works Exercises 1 Take the sketch in Example 8 6land modify it to incorporate a gravity component where the height of the bounce lessens as the bounce progresses as a fixed fraction of the speed is lost at each bounce 2 The noise method in Processing can take 1 2 or 3 parameters Try to modify the examples in this chapter where noise is used to establish how it works with the different numbers of parameters You should also look at the Processing reference to understand what is being done You will see more on Perl
47. and zero in the y dimension In Processing where is the point 0 0 We shall call the point 0 0 the origin or O for short Not to be confused with 0 zero Once we know the position of the origin we can draw in the plane using points and lines This placement of the origin at the top of the screen with y values increasing down the screen is common in computer graphics and image processing applications such as Processing and the Java two dimensional graphics libraries However this is a different position for the origin than the usual location in geometry as taught in mathematics courses In mathematics the origin is usually at the bottom with y values increasing as we move up the page That is here we use right hand axes while in mathematics it is conventional to us left hand axes Plane Geometry In plane geometry the plane is the area on to which lines and points are drawn This can simply be thought of as an infinitely large sheet where each cotton thread is indexed by a number from zero to the screen width minus one for the x dimension and from zero to 28 4 7 1 Plane Geometry Example 4 3 The Origin in Processing is the point in the top left corner that is point 0 0 The grid is made by placing lines at a regular interval in both the horizontal and vertical directions the screen height minus one for the y dimension Cartesian coordinates in two dimensions always occur as pairs of numbers such as x1
48. and drawing a line How can you tell when you have found the background colour s value 39 CC112 Creative Computing Image Sound Motion Vol 1 background D stroke 127 stroke Weight 14 line 19 27 20 39 background 32 stroke 159 strokeWeight 5 line 17 12 47 12 background 64 stroke 191 stroke Weight 23 line 24 34 28 40 background 96 stroke 223 strokeWeight 18 line 26 19 41 23 background 4 stroke 131 stroke Weight 3 line 17 13 19 24 background 36 stroke 163 strokeWeight 17 line 22 23 20 10 background 68 stroke 195 strokeWeight 15 line 19 24 22 11 background 100 stroke 227 strokeWeight 5 line 5 13 11 21 background 128 background 132 stroke D stroke 4 strokeWeight 4 stroke Weight 13 line 5 19 40 42 line 22 24 6 35 background 160 background 164 stroke 32 stroke 36 strokeWeight 17 strokeWeight 18 line 28 29 4 46 line 28 33 22 14 background 192 background 196 stroke 64 stroke 68 strokeWeight 5 strokeWeight 24 line 15 10 12 30 line 34 39 1 6 amp los background 224 background 228 stroke 96 stroke 100 strokeWeight 15 strokeWeight 4 line 27 32 12 14 line 4 15 26 27 background 8 stroke 135 strokeWeight5 line 20 14 38 1 background 12 stroke 139 strokeWeight 2 line 17 7 30 14 background 40 stroke 167 strokeWeightS lin
49. arameter is persistent and the x and y positions are generated independently at each step by the noise method The change in the xoff parameter at each step determines the average velocity of the motion and the difference between the parameter in the two calls to noise generates the difference between the x and y velocity components 81 8 10 CC112 Creative Computing Image Sound Motion Vol 1 Learning activity Modify the range parameter in Example 8 9 to the values 1 20 and 100 respectively What happens if you replace random range range with random range in Example 8 9 In Example 8 10 modify the second call to noise xoff 1 41 For example try float y noise xoff 4 float y noise xoff 20 float y noise xoff 100 and float y noise xoff What do you observe in each case Now modify the line xof 0 01 to increment by a different amount For example xoff 0 001 xoff 0 1 xoff 10 What do you observe in each case Write down an explanation of the behaviour of the noise method in your own words Look up Perlin Noise on the internet using Google Try to understand what is happening behind the noise O method Motion of Multiple Objects Multiple objects can be set in motion on individual paths by creating arrays of positions and component velocities The method for creating the motion is exactly the same as for a single object we just have to include the code within a for loop so that each
50. as they are seen The interest in the geometry of three dimensional space can be seen in the work of the artist Uccell The artist Diirer is credited with the invention of perspective machines that helped artists master the new techniques as seen in his own etching below of 1525 We might think that these devices would lead to mechanical drawings but in fact Diirer s own work is anything but mechanical the mathematics of space had opened up new artistic possibilities www groups dcs st and ac uk history Biographies Al Khwarizmi htm www groups dcs st and ac u history HistTopics Arabic numerals htm www history mcs st andrews ac uk Biographies Brunelleschi htm library utoronto ca moorish art guidosaracens JPG abstract art com abstract_illusionism ai_03_put_into_persp html 1 Bl 1 6 Inventing Computational Thinking Example 1 3 Diirer Draughtsman Making a Perspective Drawing of a Woman From Bronowski J The ascent of Man Inventing Computational Thinking Computational devices and algorithmic ideas went hand in hand with mathematics from the earliest times think of the abacud 4 found throughout the world at different times Astronomy gave ways of predicting the seasons and methods and tools are associated with it such as the astrolabd 4 Leibnid was a German philosopher and mathematician who lived from 1646 to 1716 As a philosopher he tried to provide acco
51. asurements are shown in Example 8 8 For more on the geometric construction of triangles see http mathworld wolfram com EquilateralTriangle html http en wikipedia org wiki Triangle Replace the line in the draw method that calls background 0 with 111 0 20 rect 0 0 width height What effect does this have The second argument to fi11 isa transparency value Why do you see the effect that you see 79 CC112 Creative Computing Image Sound Motion Vol 1 Modify all of the examples in this chapter to create the same effect 8 9 Random Motion 8 9 1 Brownian Motion float x 256 y 256 initial position float sz 20 size of ball float range 10 void setup size 512 512 noFill stroke 255 frameRate 30 void draw background 0 translate x ellipse 0 0 sz s8z x random range range generate random x velocity yt random range range generate random y velocity Example 8 9 An approximation to Brownian motion consisting of random jumps in x and y This corresponds to having random component velocities at each step The random components can be negative numbers as well as positive and are drawn from the real line Sometimes we want motion that is not deterministic i e it does not follow a predictable path We can achieve this by incorporating randomness into our sketches Example 8 9jillustrates the type of motion that occurs when the jumps in position are random a
52. ation and practice very large world of possibility opens up Consider Example 5 J This is an arrangement of lines that represents a complex shape In this case we naturally perceive the shape as a pyramid which is a three dimensional object However we have only drawn seven lines on a two dimensional screen to achieve the effect size 512 512 background 255 stroke 0 line 271 152 256 122 line 256 122 276 102 line 276 102 291 107 line 291 107 302 127 f line 302 127 286 147 N line 286 147 271 152 line 250 162 256 282 line 296 167 307 287 line 250 162 307 167 line 250 162 215 197 line 215 197 168 142 line 307 167 327 227 line 327 227 327 282 line 256 282 307 287 line 256 287 235 357 line 235 357 250 447 line 307 287 312 367 line 312 367 322 457 4 Example 5 10 Human Figure Drawing adapted from John Maeda s Design By Numbers Knowing where to put lines in order to create a representation of an object or impression of an object is what artists are very good at It is a skill that can take many years to master However starting with the basic principles of this chapter you have at your disposal enormous potential to create images and impressions of things that you see The most important lesson is to look carefully at the world and images created by other artists and to learn from what you see Try getting into the habit of seeing the l
53. cceleration in the direction that the spaceship is pointing By rotating the spaceship and applying thrust in different directions very complex motions can be created In this example the motion is contained within the screen by wrapping the spaceship around the screen edges This example is based on the popular early computer game called Asteroids The novel aspect of the motion is the rotation of the spaceship around its centre using translate x sz 2 y sqrt 3 sz 4 Here the x y coordinates are the position of the bottom left vertex of the spaceship The mid point of the spaceship is calculated as the mid point of a triangle We translate to that point rotate the coordinate system then translate back to the bottom left vertex to start drawing The effect of the translation rotation and translation are to rotate the spaceship around its centre Example 8 8 Construction of an equilateral triangle with edge length 200 The height of the triangle above its baseline is sqrt 3 200 2 and the mid point is at one third of its height on the centre line Learning activity What happens if you replace the lines translate x sz 2 y sqrt 3 sz 4 rotate angle Rotate spaceship about centre translate sz 2 sqrt 3 sz 2 with the following code translate x y rotate angle Rotate spaceship Modify the code to make the spaceship an equilaterial triangle with edge length 200 and rotate it about its centre The necessary me
54. cial cases where the edges are of equal length as are the angles between them Apart from the special case of a square and an equilateral triangle Processing does not have built in commands to construct regular polygons For example there are no pentagon hexagon or dodecagon methods for creating polygons with five six and twelve edges respectively Instead we can construct regular polygons by drawing a sequence of lines of equal length and rotating the lines through equal angles In principle this sounds easy However in practice it requires some geometry to calculate the points required for drawing polygons There are many text books and Web sites that discuss construction of polygons in two dimensions using Cartesian coordinates Processing offers a very simple and convenient method to construct regular polygons by rotations and line drawing the method is similar to the Turtle Graphics approach introduced by Seymour Papert in the 1970s with the Logo programming language This approach is widely used for teaching graphics programming to beginning students To draw any regular polyhedron a shape with N edges of equal length we first find the rotation angle for each edge this is simply TWO_PI N Now we choose a length for our edges say 100 pixels and a number of edges say 5 Then we repeat the following process 5 times line 0 0 100 0 translate 100 0 rotate TWO_PI 5 Note that the position of the origin in Processing determin
55. d This type of relationship is called Reification in Gestalt psychology Example Z 3 is an example of how the figure ground relationships in a composition can be obscured The Gestalt Principle of Multistability is the observation that this figure can be perceived either as a white vase figure seen against a black background ground or we can see this as a pair of heads figure against a white background ground Control over the perception of figure and ground is an important skill for the artist and applies just as much in the digital domain as in the traditional visual arts The lesson to be learnt from the Gestalt princples is that the placement of forms in relation to each other has a profound impact on the way we perceive the whole picture This chapter explores ways of putting together unit forms that express a higher concept or shape Proximity O Ot AO O OO GO a Or On DUDO OO Co 0 0000 00 0 GAL 00O OO OO 000 Om OO EN OD 0000 OD OO OO 000 0000 OO 00 00 Example 7 4 Gestalt Principle of Proximity Forms that are closer are seen as grouped together The simplest of the Gestalt principles is that of relationships by proximity Those forms that are closer are seen as grouped together The principle applies hierarchically so that many levels of grouping are sometimes seen Example Z 4 shows an arrangement of circles such that a large square is perceived on the left of the figure On the right we see three vertical columns of
56. d Form The Basic Course at the Bauhaus Thames and Hudson 1975 ISBN 0471289302 Kandinsky Wassily Point and Line to Plane Dover 1979 ISBN 0486238083 Maeda John Creative Code Thames and Hudson 2004 ISBN 0 500 28517 9 Moggridge Bill Designing Interactions MIT Press 2006 ISBN 0 262 13474 8 Naylor Gillian The Bauhaus Revisited The Herbert Press 1985 ISBN 0906969298 0906969301 pbk Packer Randall and Jordan Ken Eds Multimedia From Wagner to Virtual Reality W W Norton and Company expanded edition 2002 ISBN 0 393 32375 7 Poling Clark V Kandinsky s Teaching at the Bauhaus Colour Theory and Analytical Drawing Rizzoli 1982 ISBN 0847807800 Rand Paul A Designer s Art Yale University Press new edition 2001 ISBN 0 300 08282 7 George Steiner Grammars of Creation Faber and Faber London 2001 John Stillwell Mathematics and its History Springer Verlag 1989 Wong Wucious Principles of Form and Design Wiley 1993 ISBN 0 471 28552 8 I Xenakis Formalized Music Thought and Mathematics in Composition Pendragon Press Stuyvesant New York 1992 Zakia Richard D Perception and Imaging Focal Press 2nd edition 2004 ISBN 0 240 80466 X vi Chapter 1 History of Mathematics and 1 1 Computing in Creativity Essential reading www groups dcs st and ac uk history Additional reading Bell E T Men of Mathematics Simon amp Schuster New York 1986 J
57. derstand these texts as talking of algebraic problems One case that appears here involves finding three integers a b c such that a b c Why should this be interesting One aspect of this known to the Babylonians is that if a rope is used to form a triangle whose sides are such lengths a b c then the triangle has a right angle an angle of 90 degrees We are used to being surrounded by objects with right angles that can fit together easily and help in construction of buildings But how is a right angle to be formed without one to start with The most well known case of these numbers is 32 42 5 Hypotenuse Example 1 1 The 3 4 5 triangle A natural question to ask is whether there is a general pattern to such combinations of a b c and if we can be sure we have all such combinations You can check that if a b c then if we multiply each number by a fixed other number the resulting numbers have the same property e g 6 8 10 From the Babylonian texts they found a more interesting way of coming up with such numbers if p q are any two positive numbers then let a p q b 2pq c pP 8 Then a b c this can be checked easily it turns out that this gives all possible numbers without a common factor though that is a lot harder to show Their are some characteristic features of mathematics here there is an initial discovery with useful practical consequences which prompts more general ques
58. e 12 15 32 47 background 72 stroke 199 strokeWeight 19 line 34 27 15 4 background 104 stroke 23 1 strokeWeight 10 line 15 19 35 35 background 136 stroke 8 stroke Weight 21 line 26 26 37 27 background 44 stroke 171 strokeWeight 13 line 22 20 9 7 L background 76 stroke 203 strokeWeight 11 line 28 24 9 41 background 108 stroke 235 strokeWeight 14 line 24 25 30 43 background 140 stroke 12 strokeWeight 16 line 17 23 43 12 background 16 stroke 143 strokeWeight 17 line 24 31 14 28 background 48 stroke 175 strokeWeight 16 line 21 22 2 45 background 80 stroke 207 stroke Weight8 line 23 18 27 11 background 112 stroke 239 strokeWeight 23 line 33 23 8 30 background 144 stroke 16 strokeWeight 7 line 11 23 36 32 background 168 background 172 background 176 stroke 40 stroke 44 stroke 48 strokeWeight 14 strokeWeight 2 strokeWeight 20 line 22 19 32 32 line 6 5 11 5 line 28 30 13 41 background 200 background 204 background 208 stroke 72 stroke 76 stroke 80 strokeWeight 5 line 8 12 28 10 strokeWeight 14 line 14 14 12 16 strokeWeight 9 line 12 18 22 0 2 l background 232 background 236 background 240 stroke 104 stroke 108 stroke 112 strokeWeight 8 strokeWeight 15 strokeWeight 7 line 16 19
59. e observations made about the way humans see and hear so they are often thought of as rules of perception Gestalt principles are widely used in the visual and musical arts and are the basis of composition putting forms together to make a whole picture Example Z I shows one of the most well known observations from Gestalt psychology The circles are drawn using an arc that does not 57 CC112 Creative Computing Image Sound Motion Vol 1 Example 7 1 Gestalt Principle of Reification The circles are drawn to suggest the presence of a triangle even though the triangle is not drawn she An 4s Example 7 2 Reification of a 3D form The triangular forms are arranged to suggest the presence of a sphere even though the sphere is not drawn Example 7 3 Gestalt Principle of Multistability The image can be seen as a vase or as two human heads facing each other by a switch in figure and ground perception 58 7 2 1 Gestalt Principles extend the entire way around Instead a carefully drawn pattern of triangular notches are left in each circle The effect is to create the perception of a large triangle between the circles that is not drawn at all the Gestalt principle is at work here the triangle is simply implied by the forms that are drawn Example 72 shows a similar effect here a sphere is perceived but is not drawn the conical forms implied by triangles with curved bases imply the spherical form which is perceive
60. e of a pixel then is its width and height in standard physical units Computer displays are measured by the length of the diagonal For example Iam currently writing this subject guide on a laptop computer that has a 15 inch screen however let us work in centimeters for the purpose of international standardisation An inch is 2 54 centimeters cm so 15 inches is 15 x 2 54 38 1cm this is the distance from the top left to the bottom right of the screen a diagonal line Example f 6 shows the monitor and the diagonal length of 38 1 cm I know that my display s aspect ratio is 4 3 this is the ratio of the width to the height of the screen This means that the width is 4 3 or 33 33 larger than the height By Pythagoras Theorem we know that the sum of the squares of the width and the height equal the square of the diagonal length We also know the aspect ratio so we can write down the following equation width height diagonal We know that width and height are related by width aspectRatio X height So we can substitute for width aspectRatio x height height diagonal 38 1 Now we rearrange the equation to obtain the height of the screen 1 aspectRatio x height 38 12 and finally height 4 38 12 1 4 3 22 86cm 32 Size of a pixel 15in 38 1cm 768 pixels 22 86cm m 1 pixel 0 029cm x 0 029cm 30 48cm 1024 pixels
61. e pattern of bits for the output bottom row is the binary for the decimal number 129 Table 9 2jis the table for RULE 30 Example 3lis a completely general three pixel cellular automata generator By changing the line that reads int rule 129 to assign any value between 0 255 we can explore the entire set of possible three pixel cellular automata Learning activity Set the rule in Example 9 3 to int rule 30 Also try the following rules 22 110 255 Explore the complete set of all 255 cellular automata rules Which ones are the most interesting Why Two Dimensional Cellular Automata Conway s Game of Life The Game of Life is a cellular automaton that was invented in 1970 by the British mathematician John Conway Although not an interactive game it has rules that are applied to a two dimensional grid much like the rules that are applied to the one dimensional rows in the cellular automata discussed above The rules are deceptively simple 1 Any live cell with fewer than two live neighbours dies as if by loneliness 2 Any live cell with more than three live neighbours dies as if by overcrowding 3 Any live cell with two or three live neighbours lives unchanged to the next generation 4 Any dead cell with exactly three live neighbours comes to life and from these rules emerges extremely complex patterns of behaviour such as self replication motion growth and death 88 Two Dimensional Cellular Automata int y
62. ed indexing and it is the form of addressing used in Java and in some other programming languages such as C and C We must remember that the pixel indexed by the number 512 is actually the 513th pixel this is off the screen because the last visible pixel is 511 How can we make a screen where pixel number 512 in either the x dimension or y dimension is included on the screen The answer is that we make the screen at least 513 pixels in its width dimension x and height dimension y For example screen 513 513 line 512 0 512 512 31 4 9 CC112 Creative Computing Image Sound Motion Vol 1 Here all the pixels at position 512 in x or 512 in y are drawn because the screen is 513 pixels wide and 513 pixels tall Size of a pixel Pixels can be seen as the individual light sources that are packed together on your computer s display to make an image They are the smallest unit of control that we have in making an image We start our creative computing journey by learning how to manipulate pixels to draw images on the display device Before we embark on drawing to our display device it will be useful to know how big the pixels are and therefore how big the screen that we are drawing to is In short we would like to know the dimensions of our display and of our created images To work out these sizes we need to know two things The first is the size of the physical display and the second is the display resolution The siz
63. ee students worked on the interior designs Joost Schmidt made relief carvings on the staircase Josef Albers designed the stained glass windows and Marcel Breuer designed the furniture Breuer s furniture was influenced by Reitveld s Red Blue chair designed in 1917 and illustrated in De Stijl magazine e g see http www terraingallery org Anthony Romeo Chair html Movement towards Constructivism In 1923 L szl Maholy Nagy was invited to teach at the Bauhaus to replace Itten He was a Constructivist whose work emphasised the importance of the machine Constructivism he declared could expand from an art form into industrial design Josef Albers had trained as an art teacher before becoming a Bauhaus student He now began working with Maholy Nagy on teaching the Preliminary Course where without using workshop equipment tasks were given to explore the nature of materials Moholy Nagy directed experiments in form He emphasised that in an industrial culture the need to understand the load bearing properties and other characteristics of materials was essential linking design and engineering Maholy Nagy was interested in the development of photography and reflected light compositions He experimented with optical and acoustic equipment to make new creations A starting point in reading about their influence is Borchardt Hume s edited collection Albers and Mohol Nagy from the Bauhaus to the New World 2006 A Bauhaus student
64. es that the y dimension values increase as we go down the screen Consequently positive angles describe clockwise rotations in Processing as opposed to the counter clockwise direction of angles in most mathematics texts Once you have mastered the sequence of line lengths and rotations for drawing a polygon you can draw any regular polygon using the above recipe Example 6 6 shows a sketch for drawing a pentagon using the turtle graphics method 53 CC112 Creative Computing Image Souna Motion Vol 1 Pentagon using turtle graphics size 200 200 background 255 noFill rect 0 0 width 1 height 1 translate 37 37 strokeleight 2 FAX line 0 0 100 0 translate 100 0 rotate TWO_PI 5 line 0 0 100 0 translate 100 0 rotate TWO_PI 5 line 0 0 100 0 translate 100 0 rotate TWO_PI 5 line 0 0 100 0 translate 100 0 rotate TWO_PI 5 5 line 0 0 100 0 translate 100 0 rotate TWO_PI 5 Example 6 6 Construction of a pentagon using line O translate and rotate The figure shows the construction of a pentagon using the translate and rotate methods To understand these methods it is useful to think of a turtle a small animal that is initially facing right positioned at the top left corner Each translation and rotation moves the turtle by the set amount Now each line is drawn relative to the turtle s position so if we rotate the turtle and translate him by 10
65. et i j Il get i j I2 getti j Example 7 14 Using the bitwise unary NOT operator 7 to invert an image for initialization termination increment statement s The initialization expression is executed once when the loop begins The boolean termination expression will halt the loop if it evaluates to false The increment expression is evaluated at the end of each loop iteration Rows Example Z 16luses a for loop to iterate in the x dimension while leaving the y dimension fixed The number of steps to iterate is set to 10 and the amount of each jump along the x dimension is set to width 10 This results in 10 equal jumps across the width of the screen Columns We can apply the same technique as above to repeat along the y dimension by transposing the position variable and the fixed position Compare Example 7 T7 with the rows example to see what has changed 66 Image XOR Two Co This operator AB AS B C The method imageXOR modifies the left image first argument by XOR ing each pixel with a pixel in the right image ond argument PImage Pl1 P2 int by 0xFFFFFFFF Background colour int g 0xFF000000 Foreground colour int lenl len2 void setup size 512 512 P3D Required for Image Pasting noLoop noStroke lenl 8 width 13 len2 8 height 13 3 void draw LAYER 1 background bg fill fg ellipse width 3 height 3 lenl len2 Pl get LAYER 2 backgro
66. everyday tool in the creative industries As the capabilities of computers grew so did the ease with which media could be manipulated Multimedia computing became a reality in the late 1980s and early 1990s followed rapidly by the Internet and World Wide Web Processing We will develop our creative tools in a programming language called Processing Introduced in 2005 Processing is based on JAVA and provides all the functionality that JAVA offers However it is designed to be far simpler to use than the standard JAVA distribution Processing has a user friendly integrated development environment IDE and it has many pre defined methods for performing graphical and multimedia design tasks with very little user written code 19 3 2 CC112 Creative Computing Image Sound Motion Vol 1 Processing is an open source programming language and environment for programming images animation and sound Itis widely used by students artists designers architects researchers and hobbyists for learning prototyping and production It was created to teach fundamentals of computer programming within a visual context and to serve as a software sketchbook and professional production tool As Open Source software Processing is an ongoing project and is developed by artists and designers as an alternative to proprietary software tools in the same domain The Processing open source project was initiated by Casey Reas UCLA Design Media Arts De
67. g package introduced later in this unit can be thought of as a simple workbench providing a basic stock of elementary shapes and colours together with the tools to combine and manipulate such primitives to design and produce novel products Correspondingly Bauhaus staff initiated what are now some standard image manipulation techniques For example Itten 1975 p21 has an interesting Light dark analysis of a picture by Goya where the breakdown is into a regular array of squares that predates modern image pixelation by more than half a century Another example is at The same Itten text has examples of image kaleidoscoping e g pp56 57 using regular photographic darkroom techniques but which can now be simply carried out in standard photoimage processing packages The Metal Workshop was founded to develop prototypes for mass production Gropius maintained that standardisation of goods was the means by which the masses could acquire items so designs should be suitable for furnishing a house Marianne Brandt and William Wagensfeld achieved the most successful work Wagenfeld designed table lamps with straight shafts and an opaque glass shade e g see Brandt produced designs that were criticised for putting the light bulb in the foreground Her reflectors were made of nickel plated metal They had moveable shades and arms for good light dispersion see e g or http www trocadero com MusexXX items 142321 item142321st
68. h the x dimension boundaries of the bat and the y dimension boundaries of the bat if x gt 0 6 width amp amp x lt 0 6 width 20 amp amp 76 8 8 8 8 1 Gravity and Acceleration float x 256 y 256 Global variables float dx 11 dy 13 rate of change of position velocity int sz 10 void setup size 512 512 P3D fi11 255 snoStroke frameRate 20 draw called repeatedly at the frame rate void draw background 0 rect 0 6 width mouseY 50 20 100 translate x y ellipse 0 0 8z s8z if x lt 3z x gt width dx dx dx Reflect off left and right screen edge if x gt 0 6 width e x lt 0 6 width 20 amp y lt mouseY 50 amp amp y gt mouseY 50 dx dx Reflect off the bat if y lt 3z y gt height dy dy dy Reflect off top and bottom screen edge x dx amount to change step yt dy amount to change y position each step Example 8 5 Detecting when the ball has hit a bat controlled by the user y lt mouseY 50 amp amp y gt mouseY 50 dx dx this reverses the x dimension velocity component if the expression is true Learning activity Modify the sketch in Example 8 5 so that a score is kept of the number of times the player has hit the ball with the bat Use the println method to print the current score each time the bat is hit Modify your game so that the game ends if the ball disappears off the right edge of the screen All other edges should still reflect
69. he Processing sketch There are many example sketches for you to try see the Exercises at the end of this chapter Summary At this point you should be able to do the following 1 Explain what Processing is and who wrote it 2 Download Processing install and run it 3 Open and run the examples sketches that are bundled with Processing Exercises Open each of the five sketches listed below and run them by pressing the Run button at the top of the Processing application Try to understand how they work by looking at the code for each sketch in the text area You should recognise some of the commands from Java but you will also notice that Processing simplifies standard Java syntax Write a brief explanation 2 to 3 sentences of what each sketch does I Form gt ShapePrimitives II Structure WidthHeight UD Drawing gt ContinuousLines IV Drawing gt Pattern V Input gt Click 22 Chapter 4 Origins 4 1 4 2 Essential reading Processing A Programming Handbook for Visual Designers and Artists Structure 1 CodeElements Shape 1 Coordinates Shape 1 Primitive shapes Gray values Development 1 Sketching software Additional reading Principles of Form and Design Chapters 1 2 Introduction This chapter introduces the foundations of two dimensional drawing in Processing The chapter assumes that you have succesfully installed Processing understand how to launch the application and are able to type in
70. he apparent motion of an object or scene on a screen is a trick of the eye The process of animating an object is to draw it erase it draw it in a slightly different position and so on This sequence of operations creates the illusion of movement of an object on the screen Clearly nothing is really moving The pixels remain in their permanent locations There are two unrelated concepts of persistence at play in this example The first is the persistence of vision which is a property of our eye brain system that makes a sequence of small jumps such as erase move re draw appear as a smooth motion rather than a sequence of jumps This property of the eye brain system only works for relatively small jumps if we make the jumps too large then the motion would appear jerky The second type of persistence that we employ is a memory of the location of the object from the previous step The draw method must remember the new location of the ball to draw it in the correct position This is persistence of a variable and it is achieved using a global variable float x which is defined at the top of the sketch before the setup In general global variables are defined anywhere outside of the methods defined in your sketch See Examplel8 1 Velocity The speed and direction of the velocity are controlled by the number of pixels that we shift the object by each time it is re drawn 74 8 5 Motion by Coordinate Transformations float x y
71. hick using the strokeWeight 15 and line method calls We could also have made the coloured rectangles using the line command For example the first coloured rectangle 50 6 3 2 Construction of Simple Polygons Piet Mondrian Composition with Red Yellow and Blue size 772 814 background 255 white background noStroke No outline Coloured patches 111 245 245 0 Yellow Patch rect 0 0 91 177 111 0 100 150 Blue Patch rect 92 709 200 34 111 160 0 0 Red Patches rect 452 528 150 160 rect 734 705 66 38 stroke 0 Draw the lines in black strokeWVeight 15 Make a thick pen f Vertical lines these lines are rectangles that is thick lines line 92 0 92 height 1 line 186 0 186 height 1 line 249 0 249 height 1 line 288 0 288 height 1 line 452 0 452 height 1 line 600 0 600 height 1 line 649 0 649 height 1 line 734 0 734 height 1 Horizontal lines line 0 178 vwidth 1 178 line 0 298 width 1 298 line 0 393 width 1 393 line 0 528 width 1 528 line 452 688 648 688 These lines are shorter line 452 784 648 784 Example 6 2 Mondrian sketch was made using rect 0 0 91 177 and using the 1110 method to make the fill colour yellow The same rectangle would result using either strokeWeight 177 line 0 0 91 0 or strokeWeight 91 line 0 0 0 177 The first is a line that is 92 pixels wide but has a thickne
72. i random width y i random height xVel i random 10 10 i yVYel i random 10 10 random y cC sz i random 40 5 random siz void draw i11 0 20 rect 0 0 width height Dr aw multiple mor for int i 0 i lt n0bj i pushMatrix re translate x 1 v i ellipse 0 0 sz i sz i popMatrix Restore coordinates 1f x i gt width abs xVel i x i lt abs x el i xVel i x el i R e if y i gt height abs yV el i y i lt yVel i yVYel i R e x i xVel i y i yVel i current coordinate s left and righ yvel i and bottom off Example 8 11 Motion of multiple objects with individual component velocities and sizes 83 8 11 8 12 CC112 Creative Computing Image Sound Motion Vol 1 Extend the sketch of Example 8 T0 to draw multiple different objects using Perlin noise motion In this example each object will have a random offset xoff i and a random increment xoff i xInc i Extend the sketch of Example 8 7 to play a simple version of the game Asteroids You will need multiple asteroids moving in straight line motion each with its own random component velocities and a number of rockets that can be fired using the SPACE bar to destroy the asteroids The ship should be destroyed if it hits one of the asteroids The rockets spaceship and asteroids should all wrap around the screen edges as in Example 8 7 Summary The appear
73. in later chapters but how is the method being used by Processing Comments on the activity draw is a built in method You should look at the help pages for 30 4 8 4 8 1 Lines a description of what it is and how it works Processing calls the draw method automatically in a loop This allows us to make interactive drawing applications such as the one shown in this example Lines In Processing a line is defined by two points that are joined by filling in all the points in between The line method allows us to define the two end points of a straight line size 512 512 background 255 stroke Q strokeWeight 10 line 100 200 200 200 It doesn t matter in which order the two points are specified We would get the same results with size 512 512 background 255 stroke Q strokeWeight 10 line 200 200 100 200 These two describe the same line We can check our intuition by performing the end point trick Let us deconstruct the two lines into points point 100 200 point 200 200 point 200 200 point 100 200 It is the same two points so the same line will be drawn the direction of drawing is different but that has no influence on what we see the same pixels will get coloured in both cases Zero Based Indexing The screen we ve been using is 512 x 512 pixels But the pixels are addressed in the range 0 511 This type of indexing is called zero bas
74. in noise in later parts of this course 3 In Example 8 11 you saw a sketch that demonstrates the motion of multiple objects Develop a sketch that contains only two objects that move randomly but change the direction of their motion when they collide 84 Chapter 9 Cellular Automata in 1D and 2D Essential reading Processing A Programming Handbook for Visual Designers and Artists Simulate 1 Biology Cellular automata Image 3 Pixels Synthesis 3 Motion and Arrays Appendix D Bit Binary Hex 9 1 Introduction When we make a sketch we usually start with a clear picture in our minds of what we are going to draw Whether it is a pattern based on grids symmetry or motion we are responsible for placing all of the elements in the scene In contrast this chapter introduces methods for drawing complex patterns and animations based on simple rules You will draw using primitive operations that interact to create complex patterns To do this we must first consider how to represent primitive elements as code in our rule based drawing system 9 2 Bits and Pixels int y void setup 3ize 512 512 P3D background 0 void dravw for int x 0 x lt width x set x Y O if y gt height exit Example 9 1 Each individual pixel in the sketch is switched from black to white using the set method In this chapter we will draw by setting the individual pixels on the screen Although it is a
75. ines in everyday scenes or objects and try to recreate them in your own sketches The drawings in ExampleB I0Jand Examplefb 11Jare adapted from John Maeda s Design by Numbers Take a careful look at the numbers that have been used to construct the lines Can you see patterns between lines that are joined versus those that are not joined Observation and practice It is very important to take an organized approach to creating sketches when they have many elements as in these complex line drawings A good strategy is to start at the point closest to the origin and work your way around the drawing in clockwise rotation so that each pair of connected lines are next to each other in your code It is also important that you keep viewing your sketch as you are coding so that you can quickly spot any errors as they occur It is 45 CC112 Creative Computing Image Sound Motion Vol 1 John Maeda desk lamp drawing from Design by Numbers size 512 512 background 204 stroke 0 line 512 472 128 402 line 102 387 256 332 es line 286 322 348 302 line 102 387 102 422 line 102 422 460 487 line 225 442 225 512 line 256 472 256 512 line 276 457 276 512 line 261 342 286 337 line 256 337 179 212 line 256 312 209 237 line 276 312 209 212 Line 174 207 327 112 line 209 212 312 137 line 348 82 373 112 O line 348 82 332 92 line 373 112 358 122 line 322 97 343 137 Li
76. ing intelligently The present day Loebner competition in Artificial Intelligence is based directly on Turing s work Mathematics and Music There has been an interplay between music and mathematics throughout the development of both subjects Fauvel Flood amp Wilson cover the history and current state of this interaction Pythagoras whom we met above and his school investigated how to produce different musical notes pitches e g by hitting glasses filled with water to different heights or bells of different sizes see the illustrations herd It has been argued that this was the basis of the Ancient Greeks interest in rational numbers the most important intervals in music can be obtained by taking a vibrating string e g guitar and then not allowing the string to vibrate at points at 4 4 1 of the length of the string so producing musical Ry 4 harmonigdi It was from Pythagorean times that mathematics was considered to be composed of the four related studies astronomy geometry arithmetic and music This persisted into medieval times where throughout European universities up to the 16th century the final topics studied at university formed the quadrivium consisting of just these subjects en wikipedia org wiki History of computing hardware www groups des st and ac uk history Mathematicians Lovelace html en wikipedia org wiki Turing test www Loebner net Prizef loebner prize html
77. insky offers greater opportunities or greater difficulties for artistic expression with a computer based drawing package than the approaches of Itten and Albers Moholy Nagy 17 CC112 Creative Computing Image Sound Motion Vol 1 Ay y x Q 18 Chapter 3 Introduction to Processing 3 1 Essential reading Processing A Programming Handbook for Visual Designers and Artists Using Processing Additional reading Designing Interactions Chapter 1 The Mouse and the Desktop Chapter 2 My PC Multimedia From Wagner to Virtual Reality Chapter 13 Alan Kay User Interface A Personal View The year 1984 saw the beginning of a major change in the creative industries which was heralded by the arrival of personal computers with graphical user interfaces GUIs The Apple Macintosh was the first widely available personal computer that could display image sound speech music video and text This caught the attention of the design industry and very soon sophisticated audio visual software packages became the main tools of creative professionals Among these were Adobe s Photoshop for editing and creating images and Digidesign s Sound Designer II for editing audio and music The What you See Is What You Get WYSIWYG interface paradigm offered direct manipulation of media objects simply by pointing and clicking All media became part of the everyday desktop computing environment and as a result computing became an
78. ints join the end points by a straight line the shortest possible pattern of connected turned on pixels between two points on the screen We now have a method for joining two points with a line In the next chapter we will see how lines can be made to have many different meanings 35 CC112 Creative Computing Image Sound Motion Vol 1 4 11 Exercises 1 In section 22 you created a blank sketch and were asked what size you thought the sketch was Without guessing or simply using judgement how would you find out the actual size Why do you think this particular size is used as a default Note that when we talk about size we could be referring to actual lengths or to numbers of pixels it is important to get to be comfortable about both of these uses 2 In Processing what is the difference between a sketch and a screen Why does Processing need both 3 In Section 5 1 you saw an example where we used strokeWeight to change the thickness of the stroke What is actually happening when this is done What is the relation between the pixels and the point At the end of that section we say that we will use a large stroke to make points more visible Why then is it useful for us to have pixels as small as they are Would not making the physical size of a pixel bigger improve visibility What do we lose when we do this 4 Write a Processing sketch that covers the display screen with vertical lines Now modify it to do horizonal
79. ion of street number and apartment number uniquely identifies your place of residence both of the x value and y value together uniquely identify a pixel on the screen The same pair of x value and y value will always identify that same specific place on the Processing screen We can turn each individual display pixel on and off to make points on the screen A series of points in a row makes a line But the points are very small how small so it takes a lot of points in a row to produce a line that is significant To avoid the repetitive turning on and off of pixels to make lines or other shapes we use the pre defined line command as part of a Processing sketch A sketch is entered as statements separated by a semicolon The semicolon is required for the machine to be able to read and interpret the sketch and a new line at the end of a statement is optional and is for human readability of the sketch The line command took the list of two numbers for the start point and the end point of the line and joined them by filling in the pixels in between So when we draw lines in computing we are really drawing a series of points In this case we let an algorithm decide which points to fill in to draw the line so there is already computing going on under our noses The algorithm for drawing lines is quite complicated and is covered in a later section For now it suffices that lines are really a collection of points with the property that the po
80. lication 20 3 3 A Quick Tour of Processing A Quick Tour of Processing In Computer Science a program is the list of instructions thatis written by a human for a computer to execute In Processing this list of instructions is called a sketch This is to emphasize that this programming language is designed for creative computing To see what this means click on the processing exe shortcut that you made in the activity above Once Processing is running click on the File menu and select Sketchbook gt Examples see Example 3 1 SP Processing 0123 Beta File Edit Sketch Tools Help New Ctrl Sketchbook Ctri O Ctrl s Save 3D Camera Save S Ctrl Shift 5 3D Form Export Ctr E 3D Image Export Application Ctrl Shift E 3D Lights Page Setup Ctrl Shift P 3D Transform Print Ctrl P 3D Typography Preferences Ctrl Comma Color Control Ctrl Q Quit Data Drawing Form GUI Image Input Library Net Library OpenGL Library PDF Library Serial Library Video Math Motion Simulate Structure Transform Typography Web 0 ADIDAS II LANA IAN II ANA Example 3 1 Opening example sketches in Processing Try opening one of the examples such as Form ShapePrimitives and click on the Run button which looks like a conventional video 21 3 4 3 5 CC112 Creative Computing Image Sound Motion Vol 1 or audio Play button at the top of t
81. ll as design ideas were brought together There were to be six categories of craft training Sculpture stonemasons woodcarvers ceramic workers and plaster casters Metalwork blacksmiths locksmiths founders and metal turners Cabinet making Painting and decorating glass painters mosaic workers and enamellers Printing etching wood engravers lithographers and art printers Weaving Apart from studies in these areas students would experience instruction in drawing and painting including colour theory the science of materials and basic business studies 11 2 3 CC112 Creative Computing Image Sound Motion Vol 1 Bauhaus Developments with New Staff Johannes Itten joined the Bauhaus in 1919 He developed the Basic Course of one term s length Here the students were taught to develop self confidence They were taught theories of form with emphasis on the simple basic forms of circle triangle and square Compositions were made employing the three shapes These shapes were derived from Cubism and were seen as historically primary in art Also they are independent of nature and easily produced appearing in Itten s wood and metal workshops In addition students learned colour theory in order to understand the expressive qualities of colour and colour contrasts and consideration of materials and texture The latter were considered essential for commercial artists and industrial designers The Processin
82. lt values us is whether the origin the point 0 0 is at the top or bottom of the screen We know that the x dimension will always have 0 at the left hand side by convention But the vertical y dimension 0 can either be at the top or bottom depending on the drawing program The default line which is drawn from the origin to the maximum extent of the screen tells us the answer to where vertical 0 is The line in Example 1Jextends from the top left to bottom right which immediately tells us the origin is at the top What type of line would we see if the origin were at the bottom left corner of the screen as it is in some drawing programs Vertical Horizontal and Diagonal Lines The coordinates of the end points of a line determine its orientation on the screen Horizontal and vertical lines leave one of the coordinates fixed in each end point but vary the other For example the vertical line in Example 2Jhas a fixed x coordinate for both end points but varies the y coordinate size 256 256 background 128 stroke QO line 128 0 128 255 Example 5 2 A vertical line fixes the x coordinate but varies the y coordinate Conversely a horizontal line fixes the y coordinate but varies the x coordinate A line that varies in both coordinates at both its end points will be oriented in a direction other than horizontal or vertical so it will be diagonal Learning activity In this activity you should make a sketch
83. m but also associated with different ways of working out solutions to arithmetic problems Arabic numerals The symbols 0 1 2 3 4 5 6 7 8 9 to which we are accustomed come from Indian sources to the west via Arabic mathematics It is much easier to work with this number system than with for example Roman numbers try to work out an algorithm for the multiplication of two numbers directly in the Roman system and the difference becomes apparent The Renaissance Geometry and Perspective During the Renaissance in the west there was a flowering of thought both in sciences and in the arts with interaction between them for example Leonardo da Vinci s anatomical drawings We can look at one connection around this time that between the mathematical analysis of the geometry of vision and the introduction of perspective into western art The Renaissance brought with it a questioning of the received ideas and an interest in classical thought as a model that could be surpassed Brunelleschf shows these traits he trained as a goldsmith and sculptor while taking an interest in geometry In 1415 he worked out the principles of perspective parallel lines in reality should be depicted as converging to a vanishing point and objects size should vary inversely with their distance from the plane of the painting Earlier paintings at this time depicted scenes as they are such as in the work of Simone Martin rather than
84. make the ball reverse direction when it reaches one of the edges of the screen we use a conditional in Examplel8 4 two if statements test if the ball is at or past the edge of the screen and reverse the component velocity direction if it is If the ball is at or past the left or right edge of the screen the x component velocity dx is reversed by negating its value dx dx or if the ball is at or past the top or bottom of the screen the y component velocity is reversed by negating its value in the same way This logical test and the reversing of component velocities ensures that the ball always stays within the boundary of the screen Interaction One of the first computer games was Pong which was an arcade game made by the company Atari founded by Nolan Bushnell In the game the players control a bat and they must move the bat to hit a ball The winner is the player who hits the ball the most times before missing the ball three times Example 8 5 shows the basics of such a game In this sketch the user interacts with the sketch by moving the mouse which controls the height of the bat When the ball hits the bat the ball is reflected in the x dimension This is achieved by starting with Example 8 4Jand adding two extra lines One line draws the bat rect 0 6 width mouseY 50 20 100 which is drawn at 0 6 the width of the screen with its centre placed at the mouse s Y position To detect if the bat has hit the ball we must check bot
85. mple 4 7 screenMath a Processing sketch that calculates the size of pixels for given screen diagonal length D aspect ratio A and vertical height in pixels hPix n height width height per Example 4 8 Text output of screenMath sketch Learning activity Type in the Processing sketch of Example 4 7 Look in you computer s User Manual to find the diagonal length and aspect ratio of your display device Change these values in the Processing sketch and run it a How big is a pixel on your display device b How many pixels per centimeter fit on your display device c For a 38 1cm display with resolution 1024 x 768 pixels what is the size of a 512 x 512 Processing sketch in cm 34 4 10 Summary Comments on the activity Hint The first two lines define the diagonal length and aspect ratio of the screen The fourth line defines the screen resolution in the y dimension Answer c a pixel is 0 0298cm so 512 pixels is 512 x 0 0298cm 15 257cm Summary We have seen that we can turn the display of individual pixels on and off using the point x y command Each pixel on the screen has a unique two number address just like street number and apartment number we need an x value and a y value These values mean the number of pixels to count in the x direction from left to right starting at 0 and the number of pixels to count in the y dimension starting from the top at 0 pixels Just as the combinat
86. n was an industrial town where Junkers had their aircraft factory The Bauhaus was amalgamated with the local trade school Here the course was re assessed Maholy Nagy and Albers ran the preliminary course and Maholy Nagy also headed the metal workshop Marcel Breuer headed the furniture workshop whilst two other Bauhaus trained designers Herbert Bayer and Joost Schmidt took on the printing and sculpture workshops Georg Muche was given responsibility for the weaving workshop Gropius wrote The creation of types for useful objects of every day use is a social necessity The school s aim was to research the needs of modern households and produce relevant designs that industry could produce on mass Muche designed a metal house in 1925 whilst the architects in Gropius s office designed a new Bauhaus building see ttp www bauhaus de english bauhaus1919 architektur index ht or http www tu harburg de b kuehn wg21 html consisting of two L shaped buildings with flat roofs one to house the students and the other to house the workshops The workshop had a curtain 14 Movement towards Constructivism wall made of glass that allowed people outside see what the students were creating Also built at this time were houses for the staff They were made of concrete with flat roofs large windows and balconies Each house had a studio They were set in landscaped gardens ten minutes walk from the Bauhaus e g see ttp www c20s
87. nderstand how colour works both creatively and from a medium perspective Find out what you can about additive colour and subtractive colour What is meant by each of these terms What are the true additive primary colours What are the true subtractive primary colours While it is true that red yellow and blue are often called the primary colours and they are also asethetically pleasing in combination you should have discovered that they together are neither the additive nor the subtractive primary colours but elements of both Look also at Example 6 4 which contains both the additive and the subtractive primary colours Now take the code for the Mondrian sketch and modify it to use for the coloured patches either the additive or the subtractive primary colours What part of the code do you need to modify to do so And how do these changes affect the visual impact of the image In Example 6 7 the endShape statement is given the parameter CLOSE while beginShape has no parameters What happens when you use endShape with no parameter Look at the Processing reference pages to see what should happen and then try some examples to test it out Can you use i11 to put colour into an irregular polygon Can you do this for a regular polygon constructed using turtle graphics How do you do this Can you fillC a shape that is not closed What happens if you try to do this Chapter 7 Structure 7 1 7 2
88. ndrian Reproduced using Processing originally Oil on canvas 39 x 35 cm polygons were studied by a system of construction that employed only a straight edge and compass to accurately draw them To begin with we will study the built in methods in Processing that draw the regular polygons rect The rect x y len1 1len2 method draws rectangles with top left position x y with width len1 and height len2 The default is a white rectangle with a black border Use the background stroke strokeWeight and 1110 methods to control the appearance of the rectangle Examplel6 1 is a reproduction of a painting by the artist Piet Mondrian called Composition with Red Yellow and Blue painted in 1921 The entire painting is composed of rectangles most of which appear as thick black lines which are also rectangles The lines are arranged to form an irregular grid pattern they are not evenly spaced but are placed in a non simple arrangement with respect to each other Some of the rectangles are filled with colour the rest are filled with the white background The three colours Red Yellow and Blue are sometimes called the artist primaries as they are often used as the basis for colour in visual arts practice Example 6 2 shows the sketch which is composed of both line and rect elements In the sketch we see that lines with thickness appear as filled rectangles i e the thick black lines In this sketch we have made the black lines t
89. ne 343 137 337 187 line 337 187 419 137 Example 5 11 Desk Lamp adapted from John Maeda s Design By Numbers sometimes difficult to look at a finished sketch that is incorrect and then go back and find the errors in the code errors here are lines that are drawn in a different location than you intended Learning activity Using the SnapToGrid sketch with a number of grid lines of your choosing draw some familiar objects such as an open door in a room a table a chair and a car in a garage Your can print the coordinates of your grid drawing sketches to the Processing output console using the print1n x y method call in your sketch Now make sketches that consist only of lines using the coordinates that you printed and wrote down from your grid drawings This technique of drawing lines with a mouse on a grid or not and then writing down the coordinates is a good way to build up your technique in line drawing Practice line drawing every day for at least four weeks after this you should continue to practice regularly Choose simple subjects at first and then develop more complex observations and responses based on what you see You will quickly build a style of working that you will find very valuable as you continue your work in Creative Computing 46 5 6 5 7 Exercises PFont P loadFont ArialMT 10 v1w size 768 1024 strokeCap SQUARE textMode MODEL smooth int N 8 int dx width N
90. nversion As a final example of logical operations on images we can use the bit wise not operator to invert or complement an image If the input is 11000111 then the not operator flips the bits so that the output will be 00111000 Example Z 14 shows the effect of inverting the image of Example Z 13 Repetition A powerful method of composing a design is to employ repetition of unit forms One way of repeating a form is to use a for loop to iterate a position variable Recall from Java that the syntax of a for loop is 65 7 5 1 7 5 2 CC112 Creative Computing Image Sound Motion Vol 1 Image NO R Two Layers This ope or is NOT commutitive A B C A B C The method imageNOTXOR modifies the left image first argument 7 by XOR ing each pixel with a pixel in the right image second argument PImage Pl1 P2 int bg 0x00 Background colour int fg O0xFF Foreground colour int lenl len2 void setup size 512 512 P3D Required for Image Pasting noLoop noStroke lenl 8 width 13 void dravw LAYER 1 background bg fi11 fo 3 ellipse width 3 height 2 lenl lenl Pl get ff LAYER 2 background bg fill fg ellipse 2 width 3 height 2 lenl lenl P2 get imageNOTXOR P1 P2 image P1 0 0 The imageNOTXOR method void imageNOTXOR PImage Il Plmage 12 for int i 0 i lt min Il width I2 width i for int j 0 j lt min Il height I2 height j Tl s
91. ociety org uk docs building or http www tu harburg de b kuehn wg21 htm pauhaus htm In Dessau the architects undertook a housing project for workers called the Torten Estate e g see ttp www creen demon co uk travel dessau html These were state financed and built at low cost They were small two storey buildings made of concrete with flat roofs Three hundred and sixteen one family units were built each having three bedrooms a kitchen diner and a living room Central heating double glazing and built in cupboards were provided Each house had a large garden for growing vegetables These houses were intentionally experimental Gropius decided that a national plan for housing was necessary and should include financial planning study of methods for industrial production storage of pre fabricated units and study of efficient use of materials as well as standardising building components Gropius left the Bauhaus in 1927 and his place was taken by Hans Mayer whose interest was in social housing He advocated a technical not an aesthetic process to designing buildings Past styles were to be rejected in favour of modern He laid stress on collective rather than individual work He believed that the new house should be pre fabricated for building on site Those involved on building schemes should be economists statisticians industrial engineers standardisation designers heating engineers and even clima
92. of y position Example 8 6 Motion of a projectile under gravity with reflection bouncing float x 128 y 128 initial position float dx 0 dy 0 initial ve ity float angle 0 initial rotation float sz 61 void setup size 512 512 P3D noFill stroke 255 frameRate 20 draw called repeatedly at the frame rate void draw background 0 if keyPressed amp amp keyCode LEFT LEFT ARROW ROTATE LEFT angle angle PI 16 TW0_PI else if keyPressed amp amp keyCode RIGHT RIGHT ARROW ROTATE RIGHT angle angle PI 16 TWO_PI if keyPressed amp amp keyCode UP UP ARROW THRUST ACCELERATE dx sin angle 3 ent acceleration due to rotation onpi dy cos angle y component acceleration due to rotation translate x 52 2 y 3qrt 3 sz 4 rotate angle Rotate spaceship about centre translate sz 2 sqrt 3 sz 2 beginShape Draw spaceship vertex 0 0 vertex sz 2 sqrt 3 sz vertex 3sz 0 vertex sz 2 sqrt 3 sz 37 endShape CLOSE X x dx width apply y y dy sheight if x lt sz x width if y lt sz y height wrap around screen top edge x component velocity and wrap at right edge velocity and wrap at bottom edge een left edge Example 8 7 Motion of a space ship with thrust acceleration and rotation direction 78 Gravity and Acceleration arrow keys The UP arrow key applies thrust which is a
93. ohn Fauvel Raymond Flood and Robin Wilson Music and Mathematics Oxford University Press 2003 John Fauvel and Jeremy Gray eds The History of Mathematics A Reader MacMillan Education 1987 D R Hofstadter Godel Escher Bach An Eternal Golden Braid Harvester Press 1979 George Steiner Grammars of Creation Faber and Faber London 2001 John Stillwell Mathematics and its History Springer Verlag 1989 I Xenakis Formalized Music Thought and Mathematics in Composition Pendragon Press Stuyvesant New York 1992 Introduction In this chapter we look at some ways in which mathematics and computing have played roles throughout history in relation to creativity At different times these sciences and technologies have opened up creative possibilities they are also arenas themselves where we see many creative moments throughout history We see the latter view from George Steiner who writes in Grammars of Creation pg 145 It is in mathematics and the sciences that the concepts of creation and of invention of intuition and of discovery exhibit the most immediate visible force We will look at some moments in history rather than attempt to trace developments through the centuries 1 2 1 3 CC112 Creative Computing Image Sound Motion Vol 1 Earliest Mathematics We know that mathematical ideas can be seen in written form as far back as the time of the Babylonians 2000 1500 BCI we un
94. ones as well Think about the distance between the vertical lines and the distance between the horizontal lines You could make them evenly spaced or you could try to make them less regular See what kinds of pictures you can come up with just through innovative use of drawing lines this does not have purely to be to do with spacing there are many other creative dimensions that you can explore Also think about this in terms of the previous chapters on the Bauhaus and creativity in mathematics In the next chapter you will learn more about lines in Processing and lines as a creative vehicle but for now try to see how much you can do with what you already know 5 Does a bigger screen size mean there are more or less or the same number of pixels on the screen Dicuss this and think about what it means for Processing and its implementation will Processing run in the same way on computers with different sized screens and screen resolutions 36 Chapter 5 background stroke 5 1 5 2 and line gt Essential reading Processing A Programming Handbook for Visual Designers and Artists Shape 1 Primitive shapes Drawing attributes Input 1 Mouse Introduction The elements of drawing on a computer consist of setting a background colour setting a foreground colour and selecting the size and shape of pen with which to draw The same elements are required whether using a graphical drawing tool such as Adobe
95. oordinate Notice the use of the modulus operator in Example Z 18 to wrap the x dimension coordinate onto the screen width 3ize 12 512 background 0 111 255 for int i 0 i lt 20 i rect i width 5 width i height 20 10 10 Example 7 18 Repeating a Unit Form along diagonals Recursion Example shows a fractal tree A fractal is a form that has self similarity in this case each branch of the tree is a smaller version of the previous branch to which it is connected Fractal forms are 68 int Branching 7 void setup size 512 512 background 0 stroke 255 strokeWeight 4 noFill void draw translate width 2 7 height 8 tree height 4 PI 5 1 41 Branching make a tree by recursion void tree float sz float a float sf int n f if n 0 return terminate if n is zero line 0 0 0 sz draw a line if n 1 if end of tree draw a leaf ellipse 0 sz 16 8 n decrement branching coordinate system pushMatrix 3 translate 0 sz to end of branch rotate a rotate angle tree sz sf a sf n draw a tree rotate 2 a rotate other way tree sz sf a sf n draw a tree popMatrix restore coordinates Example 7 19 A fractal tree drawn using recursion int Branching 7 void setup size 512 512 background 0 stroke 255 strokeWeight 1 rectMode CENTER noFill void draw translate width 2 height 8 tree
96. ore html Marianne Brandt was the only woman in the metalworkshop Most women students joined the Weaving Workshop where they experimented with techniques They created tapestries using a variety of materials and by 1931 made a range of handmade fabrics in muted colours ideal for mass production e g see ttp www bauhaus de english bauhaus1919 werkstaetten werkstaetten_weberei ht Paul Klee and Wassily Kandinsky joined the Bauhaus in the early 20s Klee and Kandinsky had both been members of Der Blaue Reiter Klee developed an independent theory of colour and an analysis of the creative process His work was derived from 12 2 4 Movement towards Constructivism nature landscapes plants sea stars and buildings Kandinsky continued to work on his theories concerning the science of art the underlying elements and themes see e g Point and Line to Plane Kandinsky 1979 in discussing a theoretic approach to analysis and synthesis of painting Another good source for examples of shape and colour work is Kandinsky s Teaching at the Bauhaus C V Poling 1982 There were debates within the Bauhaus concerning the relevance of these ideas in an institution that placed technology at the heart of experimentation and an analysis of material However the painters stayed as their fame contributed to the success of the school Summerfeld House was designed by Gropius and Mayer in 1921 for a timber mechant Thr
97. oth cases involving calculation and reasoning An example in his early piece Metastasis involves a musical version of creating curves out of a number of straight lines Here each line corresponds to an instrument playing a note whose pitch varies uniformly in time quickly if the line is steep the effect is of a mass of changing sound which has edges that move in this curved way through time He introduced many other new musical possibilities Pithopratka treats the individual musicians as like molecules in a gas moving according to chance though the sound world but still having predictable global properties by making use of the statistical mathematics of gases Xenakis showed us one way in which mathematical and computational ideas can be liberating for the artist Some further reading A good general overview of the history of mathematics is Steiner s Grammars of Creation though it supposes a good mathematical background An account that focuses more on the personalities is Bell s Men of Mathematics An excellent on line resource for the history of mathematics is the The MacTutor History of Mathematics archive We get a different feel for the invention of mathematics by looking at the way mathematicians describe their own work There is a 24www groups dcs st and ac uk history 1 9 CC112 Creative Computing Image Sound Motion Vol 1 309 340 3H 3 2 3 3 at i 12 first violin
98. partment and Ben Fry School of Design Carnegie Mellon University It is an outgrowth of ideas started in the Aesthetics and Computation Group at the MIT Media Laboratory and especially an earlier JAVA based language called Design By Numbers by John Maeda who is a world renowned graphic designer visual artist computer scientist and Professor of Media Arts and Sciences at the MIT Media Laboratory Installing Processing Learning activity Method 1 CD DVD ROM If you have the Creative Computing 1 CD DVD ROM that came with this subject guide then you can copy the Processing ZIP file from the Software directory Method 2 World Wide Web Using a World Wide Web WWW browser navigate to the www processing org web site Click on the link to download Processing This will save the Processing installation ZIP file to your computer Once the ZIP file is downloaded Move the Processing installation file to a folder that you want to install processing to For example on a Windows based machine you might try making a directory C Program Files Processing Double click on the downloaded file and extract the contents to the new directory You should now make a shortcut by right clicking on the processing exe executable file and selecting the make shortcut menu item Select the resulting processing exe shortcut and move it to the desktop Now you can just go to the desktop and click the Processing icon and it will launch the app
99. pproach more like that of Example Z 10P 3 The key to recursion is the terminating condition What is this In Examples Z19and Z 20 which statements are the terminating conditions What happens if there is no terminating condition 4 Find out as much as you can about the use of recursion in making pictures Find some examples of artists whose work uses this technique Find out what you can about the Sierpinsky triangle and Sierpinsky carpets Try to draw approximations of Sierpinsky coverings using Processing 71 CC112 Creative Computing Image Sound Motion Vol 1 Ay y x Q 72 Chapter 8 Motion 8 2 Essential reading Processing A Programming Handbook for Visual Designers and Artists Structure 2 Continuous evaluation Controlling the flow Structure 3 Function overloading Control 1 Decisions Input 1 Mouse data Input 2 Keyboard Synthesis 2 Input and Response Motion 1 Lines Curves Transform 1 Controlling transformations Simulate 2 Motion simulation Math 4 Noise Additional reading Computer Graphics Principles and Practice Chapter 5 Chapter 21 Introduction So far you have been studying methods for drawing stationary images In this chapter you will learn how to create sketches with objects that move guided by functions that you will design These processes are called animations There are four requirements for creating an animation These are the draw method the background method
100. r sketch and creates a special file called a Processing Development Environment PDE file and places it in that folder You only need to choose the name and the top level directory where you want to save the sketch Processing does the rest It is good practice to organise your files into directory trees in some systematic way For example you might make a directory called CC1 and inside it make a directory called Chapter6 then save your sketches for that chapter within that folder This way it is easier to remember where your sketches are when you want to refer back to them at a later time 26 4 4 4 5 4 5 1 Coordinates background We now start to explore how to draw in our sketch Just like paper or a canvas we start with a background colour that we specify using the background method Learning activity Try typing and running the following sketch size 512 512 background 9 What do you see Now try the following sketch size 512 512 background 100 and finally try size 512 512 background 255 Type in the sketches above and run them What is the meaning of the number in the brackets in the background statements Comments on the activity The number in the brackets is the level of light intensity that is emitted from each pixel on the screen It can take on values between 0 and 255 where 0 Is zero light intensity black and 255 is maximum light intensity white Values in between a
101. re various shades of grey that get progressively lighter as the number gets larger Processing s screen is a model for the physical display that you are viewing So increasing the value of the number argument of the background method increases intensity of light on the physical display You are controlling the display using a highly sophisticated software interface Coordinates Cartesian Coordinate System A point is the smallest unit of drawing in Processing Each position on the screen is labeled by its coordinate pair x y 27 4 6 4 7 CC112 Creative Computing Image Sound Motion Vol 1 Example size 512 512 background 255 stroke Q point 256 256 In this example we have made the screen 512 x 512 pixels set the background colour to white and the stroke colour to black Type in this example Can you see the pixel in the centre The single pixel is a little too small for our purposes because the pixels are very tiny see Section 9 Instead let us increase the size of what we can see by changing the thickness of the stroke Example size 512 512 background 255 stroke Q strokeWeight 10 point 256 256 Type in this example what do you see From now on we shall use a large stroke to make points visible enough for us to see them The Origin The most important point in the Cartesian coordinate system is the origin This is the point at 0 0 that is zero in the x dimension
102. rest in colour for its own sake and by 1910 he had produced his first abstract painting of basic shapes lines and forms In his Compositions Kandinsky carefully arranged shapes and colour to attempt to communicate feelings to the spectator whilst in his Improvisations which were more freely painted he wished to express experiences and feelings New ideas concerning the direction of art were developing in other countries In Russia Tatlin pioneered constructivism an abstract art form that made use of machinery and modern materials In Holland a group of artists published a journal called De Stijl Mondrian was the most famous member of the group The austere abstract style had more influence on architecture than painting and also an influence on designers working in the Bauhaus Walter Gropius 1863 1969 had been a student at the Weimar School of Arts and Crafts when the Belgian architect Henri van de Velde had been its director Van de Velde pioneered the Art Nouveau style He designed the building which was opened in 1907 offering courses in printing weaving ceramics book binding and precious metalwork An art academy was on the same site In 1915 the school was closed and the workshops dismantled Before the outbreak of the 1914 18 war Gropius had worked in the design office of Behrens at AEG where he had developed ideas for standardising components for construction and written with Behrens a Memorandum on the Industrial
103. s V I 12 second violins V Il BviolasA 8 cellos VC 6 double basses CB Lo ox Tele 3 a Fig l 2 String Glissandi Bars 309 14 of Metastasis Example 1 4 Xenakis sketch for Metastatis From Iannis Xenakis Formalized Music Thought and Mathematics in Composition Bloomington Indiana University Press 1971 pg 3 collection of snippets from mathematics through the ages in The History of Mathematics a Reader Poincar was a famous French mathematician who wrote about mathematical invention there is an interesting comparison between Poincar and his contemporary the artist Marcel Duchamp by Gerald Holtorl Hofstadter s Godel Escher Bach 1979 remains the best popular account of the interplay between mathematics science and the arts all seen as creative domains in their different ways Exercises 2muse jhu edu journals leonardo v034 34 2holton html Chapter 2 The Bauhaus 2 1 Essential reading ttp www baunaus de englis Additional reading Borchardt Hume Achim ed Albers and Moholy Nagy from the Bauhaus to the New World Tate 2006 ISBN 1854376918 hbk 1845376381 pbk Itten Johannes Design and Form The Basic Course at the Bauhaus Thames and Hudson 1975 ISBN 0471289302 Kandinsky Wassily Point and Line to Plane Dover 1979 ISBN 0486238083 Naylor Gillian The Bauhaus Revisited The Herbert Press 1985 ISBN 0906969298 0906969301 pbk Poling Clark V
104. se unit you will have the facility to program your creative ideas As such you will understand more deeply the concepts behind creative and commercial software that is in wide use The subject guide for Creative Computing 1 is divided into two volumes The first volume will introduce you to the basic materials that you will need to start your own creative portfolio The second volume will expand on these foundations so that you can develop your own unique tools and methods via programming It is therefore very important that you become familiar with the contents of this guide By the end of this course unit you should be able to implement creative concepts that are not easily realised with commercial software packages and therefore you will be enabled to demonstrate a high degree of originality in your own creative work The assessment of this course unit will be formed of four course works and an exam that you will sit at the end of the first year of the programme The exam will be an unseen written exam The questions will be about the background techniques and examples in this subject guide the second volume of this subject guide and the required reading see below but not the additional reading While not required you should read the items on the additional reading list where possible to increase your understanding of the general subject area This subject guide is not a course text It sets out the logical sequence in which to st
105. ss of 177 pixels The second line describes the same rectangle as the first Learning activity Using the sketch in Example 6 2 replace the line method calls with the rect O method Apart from renaming the method call what other steps must you take to make rect draw the correct rectangles Processing does not have a square method How can you draw squares Can you draw a transparent non filled square using the line O method Explain your answer ellipse The ellipse x y len1 1len2 method is similar to the rect O method except that it produces a curved shape Example 6 3 gives an example of constructing ellipses that are nested inside each other Notice that an ellipse with equal width and height is a circle 51 6 3 3 CC112 Creative Computing Image Souna Motion Vol 1 size 300 300 noFill strokeWeight 2 Circles ellipse 161 161 161 161 ellipse 161 161 261 261 ellipse 161 161 61 61 Ellipse ellipse 161 161 261 161 ellipse 161 161 161 261 ellipse 161 161 61 161 ellipse 161 161 161 61 Example 6 3 Nested ellipses size 420 420 strokeWVeight 2 Arcs stroke 255 0 0 arc 161 261 261 420 PI TWO_PI stroke 0 255 255 arc 161 261 261 161 0 PI stroke 0 255 0 arc 161 261 100 161 PI TWO_PI stroke 255 0 255 arc 161 261 100 61 0 PI stroke 0 0 255 arc 161 261 37 61 PI TWO_PI stroke 255 255 0 arc 161 261 37 22 5 0 PI E
106. t Lazar Lisitsky Posters_c81955_ htm These symbols could be easily understood even by an uneducated peasant population In 1923 whilst Germany was in the grip of rising inflation a competition was held in the Bauhaus to design an experimental house to demonstrate the abilities within the school the design to be chosen democratically by staff and students Georg Muche who had joined the staff as a painter won with a design for a single storey house named Haus am Horn e g see http www hausamhorn de Constructed from concrete the main part of the house was the living room lit by a clear storey Other smaller rooms were set around it including a small easy clean kitchen with built in storage and where everything was within reach The aim was for economy of space time and energy The house was furnished by members of the school The Bauhaus mounted an exhibition in 1923 There were lectures by Gropius and Kandinsky and performances of the Triadic Ballet by Schlemmer e g see ttp www meisterhaeuser de en bewohner_ 5_schlemmer htm who had painted murals on the walls of the Bauhaus Music was provided by the Bauhaus jazz band as well as concerts at which works by Hindemith Busoni and Stravinsky were played This made Weimar the focus of the avant garde but locally Hitler s National Socialists were gaining popularity and they cut the grant to the Bauhaus forcing it to re locate to Dessau in April 1925 Dessau the
107. t each step In this case the random value is drawn from the range 9 10 this means that values can be both negative and positive The random method returns real valued numbers float so the jumps are whole pixels plus fractional parts The trace effect is created by using the alpha channel transparency as in the previous learning activity True Brownian motion originally observed with smoke particles under a microscope is produced using a random angle of rotation and random jump length radius for each step Thus it is a circular non uniform distribution of velocities To do this in Processing we must first calculate a random angle and radius then convert these circular values into rectangular coordinates Recall from trigonometry that the relationships between an angle a a radius r and x and y coordinates are x r cos a y r sin a 8 1 The circular coordinates a r are called polar coordinates in mathematics and the standard x y coordinates are known as rectangular coordinates 80 8 9 2 Random Motion Learning activity Modify the approximate Brownian motion sketch in Example 8 9 so that it uses a true circular random distribution Hint at each step you should make a random angle a in the range float a random TWO_PI and a random radius in the range float r random 10 Now use the trigonometric relations above using the cos and sin methods in Processing to convert the circular v
108. the ball Gravity and Acceleration Rates of change of position were determined by the component velocities Example 8 djillustrates what happens when the velocity itself is changing In this case the y component velocity is subject to gravitational acceleration At each step the y component of the velocity is decreased by a small amount This amount is constant and is called the acceleration The acceleration is in the downward direction which in Processing is positive in the y component velocity The effect is to create a bouncing ball that moves on a curve called a parabola Rotation and Acceleration Example 8 7jillustrates acceleration in all directions The spaceship can freely rotate around its centre point using the LEFT and RIGHT 77 CC112 Creative Computing Image Sound Motion Vol 1 float x 128 y 128 initial position float dx 5 dy 10 initial ve y float gravity 5 float ballSize 20 void setup size 512 512 P3D 111 255 frameRate 20 draw called repeatedly at the frame rate void dravw background 0 translate x y ellipse 0 0 ballSize ballSize if x gt width ballSize 2 x lt ballSize 2 dx dx bounce off screen sides if y gt height ballSize 2 dy dy bounce off sc eleration of ball else dy gravity x dx app Y dy apply apply acceleration change of veloc component velocity change of x position component velocity change
109. ties for a single line things get a lot more interesting with multiple lines ExampleB AJshows one possible relationship between two lines and ExampleB 5 shows a simple composition with three lines strokeCap In addition to drawing multiple lines in a composition we can change the way each line looks by changing the shape of the pen 41 CC112 Creative Computing Image Sound Motion Vol 1 background 0 background 28 background 56 stroke 127 stroke 155 stroke 183 strokeWeight 3 strokeWeight 14 strokeWeight 2 strokeCap PROJECT strokeCap PROJECT strokeCap ROUND line 9 12 112 127 line 23 16 102 109 line 14 49 63 42 strokeWeight 34 strokeWeight 29 strokeWeight 13 strokeCap ROUND strokeCap PROJECT strokeCap ROUND line 37 35 16 121 line 75 34 94 25 line 29 54 98 92 background 85 background 113 background 142 stroke 212 stroke 240 stroke 14 strokeWeight 1 strokeWeight 8 strokeWeight 1 strokeCap ROUND strokeCap PROJECT strokeCap PROJECT line 36 29 95 112 line 35 34 90 70 line 44 20 126 8 strokeWeight 7 strokeWeight 29 strokeWeight 25 strokeCap PROJECT strokeCap PROJECT strokeCap SQUARE line 35 34 75 25 line 37 39 26 24 line 51 39 42 93 Ses background 170 background 199 background 227 stroke 42 stroke 71 stroke 99 strokeWeight
110. tion Shape 2 Vertex Math 4 Unexpected numbers Additional reading Principles of Form and Design Chapters 1 2 Introduction In this chapter you will learn how to use shapes as building blocks for drawing more complex compositions Shape is an extension of the idea of line because we combine many lines in a closed loop to make a shape Shape is fundamental to visual design and there are many books about construction of complex designs by combining simple shapes that are called Unit Forms Unit Forms Unit forms are the material from which compositions are made see Example 6 1 for example In this composition the unit forms are all rectangles The unit forms are repeated within a composition but there are many variations on the basic shapes over the entire composition There are methods built into Processing for drawing primitive shapes such as rectangles and ellipses and there are different methods for more complex shapes Construction of Simple Polygons A shape bounded by a sequence of straight line segments is called a polygon Simple polygons include triangles rectangles squares pentagons and so forth In the field of mathematics a great deal of effort has been put into understanding the construction of various types of polygon In classical Greek mathematics for example 49 6 3 1 CC112 Creative Computing Image Sound Motion Vol 1 Example 6 1 Composition with Red Yellow and Blue 1921 Piet Mo
111. tions Finding answers involves mathematical invention it is a lot harder to dream up the equations above than to check that they give us a good answer Ancient Greece Ancient Greece was important for the development of western mathematical thought we owe the systematic development of 1 4 Arab Mathematics and Computation geometry and the introduction of the deductive method to them for deduction see section L 6 as well as the discovery of irrational numbers Let s look at what we call Pythagoras Theorem given any right angled triangle so the length of the sides does not have to be an integer if we draw a square of each side of the triangle the sum of the areas of the smaller square is the area of the largest square Example 1 2 Pythagoras s theorem There are many different ways of showing this you might try to think how this could be proved in general There are some animated versions of the proof that work by moving parts of the diagram around so that the different areas and some copies of them can be put together in different ways Remember that the claim as that this relationship holds for all possible right angled triangles Coming up with a way of showing that this is the case involves inventing new ways of thinking about area and geometrical shape Arab Mathematics and Computation In the period 800 1400 there was relatively little new mathematics being developed in the west However in the
112. tologists before involv ing an architect For Mayer architecture should be functional e g see ttp www bauhaus de english bauhaus1919 architektur architektur meyer htm Maholy Nagy insisted that designers should see their ideas through to completion and take note of their impact on individuals and society He foresaw the time when electrically powered machines would reduce labour hours and the labour force required by industry Marcel Breuer experimented with furniture made from tubular steel for domestic use He welded pieces of steel together to make a chair eg Maholy Nagy photographed the prototype and when it was published in a newspaper people wanted to buy the chair because it was light simple comfortable and inexpensive In the Typography Workshop Herbert Bayer designed the Universal Type e g see http aww type nu bayer univer hil He wrote We do not speak with a capital A and a small a to convey one sound we do not need large and small letter symbols He aimed to produce guidelines for a more precise visual language As the depression worsened in Germany designers began to feel that Mayer was planning to turn the Bauhaus into a trade school Before the move to Dessau painters had developed theories of space form and colour that they taught to the students Mayer 15 2 5 2 6 CC112 Creative Computing Image Sound Motion Vol 1 tried to diminish their influence He increased the staff with
113. ts type in the commandwhat you are looking for into a sketch window highlight the text and then click on Find in Reference Processing BETA Language Environment Libra Language AFI The Proc facilitate the creation of Viewing Options Complete Languages English x point The abridged reference omits hado description and functions for guadu drawing in 3D and for EELA ok eae ey ee advanced data manipulation trianale Creating A Racing The complete reference ds alpha document t of cur blue core proce brightness S SS colori Visit the lib greent extensions hue language e g red saturation CES pda structure reis SLPUCLUNE Image O parentheses sphere Brats comma sphereDetail wltiline comment doc comment i comment i semicolon 5 implements Loading amp Displaying image imageMode loadImage noTint tinti Pixels blend copy r loon eti ToN loadPixels a E nolLoop pixels null sett oo redraw updatePixels r rn Example 4 2 The built in Help pages in Processing The parentheses mean that this command is a method that takes arguments Arguments are simply values that we use to control the 25 CC112 Creative Computing Image Sound Motion Vol 1 behaviour of a method The full name of the size method is size int width int height This tells us that the
114. ts middle pixel set to white in the setup method set width 2 0 0 In the draw method the rule for setting each pixel in the next row is the bitwise Exclusive Or operator XOR applied to the RGB bits only Using the bitwise And amp operator between a colour value and the alpha mask returns an integer with only the colour bits represented The Alpha mask is created by right shifting the all ones bits by 8 bits int c 0 gt gt 8 which is the binary value 00000000111111111111111111111111 Compare this with the ARGB bit positions above to see why this selects colour values only and ignores the alpha value The set x y 1 c method is called using the get x y method as an argument instead of a variable c and the returned colour bits are Exclusive Or d together using the bit wise Exclusive Or operator This is done for three adjacent pixels starting at x 1 in the current row y Finally the alpha value is re applied because we need it to display the pixel by Or ing it with the inverted alpha mask c The entire line that does the drawing is set x y 1 get x 1 y c get x y amp c get x 1 y 8c c The remarkable pattern that is generated from these simple operations on the pixels is a fractal It is a repeating pattern that exhibits self similarity at all scales There are many such patterns that can be made out of rule based drawing We now go on to explore one particular class of them 3 bit Cellular A
115. udy the topics in the course Where coverage in the main texts is weak it provides some additional background material Further reading is essential as you are expected to see an area of study from an holistic point of view and not just as a set of limited topics CC112 Creative Computing Image Sound Motion Vol 1 Essential reading Reas Casey and Fry Ben Processing A Programming Handbook for Visual Designers and Artists MIT Press Sep 2007 ISBN 0 262 18262 9 Reas Casey and Fry Ben htip www processing org reference on line Processing reference manual ttp www baunaus de engl1s www groups dcs st and ac uk history Additional reading Bell E T Men of Mathematics Simon amp Schuster New York 1986 Berger John Ways of Seeing Penguin reprint edition 1990 ISBN 0 140 13515 4 Borchardt Hume Achim ed Albers and Moholy Nagy from the Bauhaus to the New World Tate 2006 ISBN 1854376918 hbk 1845376381 pbk John Fauvel Raymond Flood and Robin Wilson Music and Mathematics Oxford University Press 2003 John Fauvel and Jeremy Gray eds The History of Mathematics A Reader MacMillan Education 1987 Foley James D van Dam Andries Feiner Steven K and Hughes John F Computer Graphics Principles and Practice Addison Wesley 2nd edition 1995 ISBN 0 201 84840 6 D R Hofstadter Godel Escher Bach An Eternal Golden Braid Harvester Press 1979 Itten Johannes Design an
116. uence of operations with different parameters and using rectangles instead of lines and ellipses to draw the Unit Forms Note that in both of these examples the relationships of forms to each other is by hierarchical composition using recursion The visual perception of such structures includes the concept of nesting that is forms inside or subordinate to each other Learning activity Modify the sketch in Example 7 T19 so that the leaves are triangles instead of ellipses What happens if you change the angle to PI 2 in the draw method s call to tree O The angle is the second argument to tree What happens if you change the angle to PI What happens if you change the angle to TWO_PI 3 Change the Branching factor to Branching 10 What happens Change the scale factor sf the third parameter to tree to 1 61 2 and 1 0 respectively What happens in each case Remove the second method call to tree inside the tree O method What happens Why Summary In this chapter we have investigated how unit forms can be structured into larger forms concepts and compositions using a number of principles of combination We started by considering the Gestalt principles that describe our ability to see whole aspects of a set of forms rather than a collection of individual forms We then looked at how to achieve some of the effects of proximity and the relationships between forms by the way in which they 70 7 8 Exercises
117. und bg fill fg ellipse 2 width 3 height 3 lenz lenl P2 get imageXOR P1 P2 Pl Pl P2 Rotate and paste unit form translate width 2 height 2 rotate PI 4 translate vidth 2 height 2 image P1 0 0 P2 get Now XOR The Original and Rotated Images imageXOR P1 P2 image P1 0 0 The imageXOR method void imageXOR PImage Il PImage I2 for int i 0 i lt min Il width I2 width i for int j 0 j lt min Il height I2 height j Tl set i j 11l get 1 3 IZ get i j Example 7 15 Using XOR to blend rotated layers the intersections are always inverted even upon multiple pastes This creates an interesting alternating pattern that has been used in mosaics through the centuries size 12 512 background 0 111 255 for int i 0 i lt l0 i rect i width 10 height 2 20 20 v v Example 7 16 Repeating a Unit Form along a row Repetition 67 7 5 3 7 6 CC112 Creative Computing Image Sound Motion Vol 1 size 512 512 background 0 fill 255 for int i 0 i lt 20 i rect width 1 61 i height 20 10 10 Example 7 17 Repeating a Unit Form along a column Diagonals Using a single for loop a repetition structure that spans the x dimension and the y dimension can be generated In Example Z 18 the iteration variable i is used both for both x and y coordinates However we have used a different function of the variable for each c
118. unts of knowledge of truth and of the relation of perception to the external world He thought that mathematics gave access to especially clear and uncontroversial conclusions via calculations He build a calculating machine which he showed to the Royal Society in London in 1673 so his interests in this topic were not just theoretical Leibniz thought that reasoning in general could be dealt with via calculation if we could express statements in what he called the Characteristica Universalis universal mathematics Then given rules to calculate correct conclusions reasoning could be done in this new language Once we wrote down our knowledge in this special language reasoning could be replaced by computation He wrote Telescopes and microscopes have not been so useful to the eye as this instrument would be in adding to the capacity of thought If we had it we should be able to reason in metaphysics and morals in much the same way as in geometry and analysis and also If controversies were to arise there would be no more need of disputation between two philosophers than between two accountants For it would suffice to take their pencils in their hand to sit down to their slates and say to each other with a friend as witness if they liked Let us calculate This idea of having machines use logic for themselves eventually became an impetus for work in Artificial Intelligence Since the 19th century other machines
119. utomata Three bit 1D Cellular Automata int y int rule 129 void setup size 256 256 P3D background 0 set width 2 0 0 void draw for int x l x lt width l x int pixl get x 1 y 41 lt lt 2 100 int pix2 get x y 61 lt lt 1 010 int pix3 get x 1 y 4 l 001l int bits pixl pix2 pix3 if rules 1 lt lt bits gt 0 Test pattern in rule set x y l 0 Set next row if true if y gt height exit Example 9 3 Three adjacent pixel cellular automata generated using RULE 129 from the Wolfram naming scheme The number of possible patterns of on s and off s for three adjacent pixels is 2 8 A cellular automaton CA RULE defines the centre pixel in the next row given the three adjacent pixels in the current row 87 9 5 9 5 1 CC112 Creative Computing Image Sound Motion Vol 1 current three pixel pattern 111 110 101 100 011 010 001 000 new state for centre pixel 1 0 0 0 0 0 0 1 Table 9 1 Rule 129 Cellular Automaton Table current three pixel pattern 111 110 101 100 011 010 001 000 new state for centre pixel 1 0 0 0 0 0 0 1 Table 9 2 Rule 30 Cellular Automaton Table Table 9 1 shows the cellular automaton table for RULE 129 The possible current three state patterns are shown on the top row and their corresponding outputs for the pixel in the middle of the three cells on the next row is given on the bottom row It is called RULE 129 because th
120. w a line and a single line can have a lot of meaning such as dividing the screen or creating part of a border We then investigated how to use multiple lines to make simple compositions in our sketches and extended the use of multiple lines to drawing with a mouse and constraining the end points of lines to a grid Finally we looked at how complex drawings can be produced with just the right collection of lines and discussed how you can set about learning to develop your drawing skills by observing and drawing things that you see in the world around you Exercises 1 ExamplesB 9I B T0JandB Tl are recognisable images of objects that are made of a series of lines Try yourself to draw an image 47 CC112 Creative Computing Image Sound Motion Vol 1 of your choice using Processing that is made of lines You could for example try to draw a table a cat a cube a doorway In this exercise you are trying to develop both your technique using Processing and your creativity 2 With the object you have created in the previous exercise try out different stroke weights shapes etc to experiment with the different properties available for lines in Processing See where this can take you creatively 48 Chapter 6 Shape 6 1 6 2 6 3 Essential reading Processing A Programming Handbook for Visual Designers and Artists Shape 1 Primitive shapes Math 3 Trigonometry Transform 1 Translation Transform 2 Rota
121. xample 6 4 Nested arc sections arc The method arc x y len1 len2 ang1 ang2 is almost the same as for an ellipse but adds two more parameters If the parameters are set to arc x y len1 1len2 0 TWO_PI then the method is the same as ellipse The last two parameters of the arc method are the starting angle and the final angle for drawing a segment of an ellipse Angles are given in radians rather than degrees so the angles 0 TWO_PI describe an arc that starts at angle 0 the right most point of the ellipse extending all the way around to 2 x tt radians which is the full ellipse To go half way around the angles would be 0 PI Note that Processing uses the pre defined constants PI and TWO_PI to mean 7 and 2 x r respectively Example 6 5 shows the four compass points on a circle and their values in radians as represented in Processing Note that angles 0 and TWO_PI are the same point on the circle In fact all angles that are an integer multiple of TWO_PI 2 x r apart are the same angle However the arc method requires the fifth argument to be strictly less than the sixth argument for the arc to be drawn 52 6 3 4 Construction of Simple Polygons 3 PI 2 radians TWO_PI radians 0 radians PI 2 radians Example 6 5 Positions around a circle or ellipse in radians in Processing Positive angles describe clockwise rotations Construction of Regular Polygons using Turtle Graphics Regular polygons are spe
122. y in Section 9 2 In the examples that follow we are drawing the Venn diagrams that represent the set theoretic operations being illustrated Or The bitwise Or operator alb is used for the union operator Each pixel in the output image gets the logical Or of each pair of input pixels see Examplefig ImageOR The Or operator acting on an 8 bit word used for colour representation is applied component wise on each bit So if we start with 11000111 and 00000100 as input sequences we get 11000111 as the output And The Bitwise And operator a amp b performs the intersection of two forms see Example Z 12 If the two bytes to compare were 11000111 and 00000100 the output would be 00000100 only one bit is in common between the two Exclusive Or The combined operation of union minus intersection is a very interesting case It is so useful in art mathematics computer science and machine learning theory that the operation has a special name it is called the Exclusive Or operator XOR 63 CC112 Creative Computing Image Sound Motion Vol 1 Image OR Two L 3 This operator i ommutitive AIB C Al BIC e method image0R modifies the left image first argument by OR ing each pixel with a pixel in the right image second argument PImage P1 P2 int bg 0x00 Background colour int fg O0xFF Foreground colour int lenl len2 void setup size 512 512 P3D Required for Image Pasting noLoop
123. y was now an important trading nation and with this rise in importance there was a related development in German art Dresden and Munich then Berlin emerged as artistic centres The artists in the German Expressionist movement were influenced by the work of Van Gogh and Gauguin with their use of colour to express emotion Based in Dresden the Briicke artists Kirchner Heckel Bleyl and Schmidt Rottluff were influenced also by the linear quality of Gothic art and the fact that the artist carvers were anonymous members of a guild which did not differentiate between art and craft The Briicke artists wanted their art to speak to the people They published a manifesto calling upon youth to revolt against old established ideas In Munich a New Artists Association was formed Members included Kandinsky Jawlinsky Miinter and Franz Marc They organised an exhibition of work by Picasso Derain and Vlaminck in 1910 but the group broke up and Kandinsky and Marc formed the Blaue Reiter group In a publication they produced Kandinsky wrote that distinctions between different art forms should be broken down Kandinsky had arrived in Germany from Russia in 1896 He had studied law but turned to art and art theories writing Concerning the Spiritual in Art a justification for abstract art Kandinsky was affected by colour which caused him to hear definite sounds This had an effect on the development of his art He had an inte
124. y1 and x2 y2 for two different points p1 and p2 point Now that we have a background we can add foreground content The concepts of foreground and background will become much more developed later For now the background is an initially blank solid coloured canvas and the foreground is anything that is drawn upon it To draw a point we call the point method size 512 512 background 0 stroke 255 strokeWeight 1 point 256 256 What do you see Each point on the Processing screen corresponds to a pixel on your computer s monitor A pixel is the smallest unit of change that is possible on your computers screen Now try the following size 512 512 background 0 stroke 255 strokeWeight 1 point 256 256 29 CC112 Creative Computing Image Souna Motion Vol 1 point 256 257 point 256 258 point 256 259 point 256 260 What do you see What are the dimensions of what you see Remember dimensions are measurements of an object s width and height In this case the dimensions are width 1 pixel height 5 pixels PointSketch void draw f if mousePressed point mouseX mouseY Example 4 4 PointSketch a simple mouse controlled point drawing sketch CCA Ea Example 4 5 Output of the PointSketch sketch Learning activity Type in the sketch shown in Example 4 4 What does it do What is the name of the method defined in this sketch We will discuss the use of methods

Creative Computing Vol1 - Department of Computing

Contents

Download Pdf Manuals

Related Search

Related Contents