tag:blogger.com,1999:blog-8155259333889287662024-03-04T20:30:44.865-08:00Mass WritingIan Welchhttp://www.blogger.com/profile/10505279500693891681noreply@blogger.comBlogger6125tag:blogger.com,1999:blog-815525933388928766.post-36694749356196652432009-04-14T05:12:00.000-07:002009-04-14T05:16:12.756-07:00Program code - Plasma Ball<pre><br /><span style="font-size:85%;"><span style="font-family: courier new;">float[]x = new float[12];</span><br /><span style="font-family: courier new;">float[]y = new float[12];</span><br /><span style="font-family: courier new;">float[][]xy = {x,y};</span><br /><br /><span style="font-family: courier new;">void setup(){</span><br /><span style="font-family: courier new;"> size(300,300);</span><br /><span style="font-family: courier new;">}</span><br /><span style="font-family: courier new;">void draw(){ </span><br /><span style="font-family: courier new;"> background(10,3,255);</span><br /><span style="font-family: courier new;"> noStroke();</span><br /><span style="font-family: courier new;"> ellipse(width/2,height/2,width,height);</span><br /><span style="font-family: courier new;"> fill(0);</span><br /><span style="font-family: courier new;"> noStroke();</span><br /><span style="font-family: courier new;"> smooth();</span><br /><span style="font-family: courier new;"> frameRate(30);</span><br /><span style="font-family: courier new;"> follow();</span><br /><br /><span style="font-family: courier new;">}</span><br /><span style="font-family: courier new;">//follow the mouse</span><br /><span style="font-family: courier new;">void follow(){</span><br /><span style="font-family: courier new;"> for( int i =0 ; i<12; i++){</span><br /><span style="font-family: courier new;"> xy[0][0] = (width/2);</span><br /><span style="font-family: courier new;"> xy[1][0] = (height/2) ;</span><br /><span style="font-family: courier new;"> xy[0][i] = mouseX ;</span><br /><span style="font-family: courier new;"> xy[1][i] = mouseY;</span><br /><span style="font-family: courier new;"> </span><br /><span style="font-family: courier new;"> //Keep within the boundaries of the ellipse </span><br /><span style="font-family: courier new;"> float inside = ((sqrt( ((mouseX-width/2)*(mouseX-width/2)) + ((mouseY-height/2)*(mouseY-height/2)) ))-width/2);</span><br /><span style="font-family: courier new;"> if(inside >1) {</span><br /><span style="font-family: courier new;"> xy[0][0] = (width/2);</span><br /><span style="font-family: courier new;"> xy[1][0] = (height/2);</span><br /><span style="font-family: courier new;"> check(i);</span><br /><span style="font-family: courier new;"> }</span><br /><span style="font-family: courier new;"> }</span><br /><span style="font-family: courier new;"> makeRect(xy);</span><br /><br /><span style="font-family: courier new;">}</span><br /><span style="font-family: courier new;">//check that points stay in circle</span><br /><span style="font-family: courier new;">void check(int i){</span><br /><span style="font-family: courier new;"> float rndNumX1 = random(width);</span><br /><span style="font-family: courier new;"> float rndNumY1 = random(height);</span><br /><span style="font-family: courier new;"> float xStart = width/2;</span><br /><span style="font-family: courier new;"> float yStart = height/2;</span><br /><span style="font-family: courier new;"> float radius = width/2;</span><br /><span style="font-family: courier new;"> if((sqrt(((rndNumX1-xStart)*(rndNumX1-xStart))+((rndNumY1-yStart)*(rndNumY1-yStart))) - radius) < 1) {</span><br /><span style="font-family: courier new;"> xy[0][i] = rndNumX1;</span><br /><span style="font-family: courier new;"> xy[1][i] = rndNumY1;</span><br /><span style="font-family: courier new;"> }</span><br /><span style="font-family: courier new;"> else</span><br /><span style="font-family: courier new;"> {</span><br /><span style="font-family: courier new;"> while(i<xy[0].length){</span><br /><span style="font-family: courier new;"> check(i);</span><br /><span style="font-family: courier new;"> i++;</span><br /><span style="font-family: courier new;"> }</span><br /><span style="font-family: courier new;"> }</span><br /><span style="font-family: courier new;"> }</span><br /><span style="font-family: courier new;"> void makeRect(float[][]pts){</span><br /><span style="font-family: courier new;"> float a = random (255);</span><br /><span style="font-family: courier new;"> float b = random (255);</span><br /><span style="font-family: courier new;"> float c = random (255);</span><br /><span style="font-family: courier new;"> stroke(a,b,c);</span><br /><span style="font-family: courier new;"> smooth();</span><br /><span style="font-family: courier new;"> int steps = 100;</span><br /><span style="font-family: courier new;"> float scribVal = 2.0;</span><br /><span style="font-family: courier new;"> for (int i = 0; i<pts[0].length; i++){</span><br /><span style="font-family: courier new;"> strokeWeight(.7);</span><br /><span style="font-family: courier new;"> beginShape(POINTS);</span><br /><span style="font-family: courier new;"> vertex(pts[0][i], pts[1][i]);</span><br /><span style="font-family: courier new;"> strokeWeight(1.2);</span><br /><span style="font-family: courier new;"> if (i >0){</span><br /><span style="font-family: courier new;"> scribble(pts[0][i], pts[1][i], pts[0][i-1], pts[1][i-1], steps, scribVal*2);</span><br /><span style="font-family: courier new;"> }</span><br /><span style="font-family: courier new;"> }</span><br /><span style="font-family: courier new;"> endShape();</span><br /><span style="font-family: courier new;">}</span><br /><span style="font-family: courier new;">void scribble(float x1, float y1, float x2, float y2, int steps, float scribVal){</span><br /><span style="font-family: courier new;"> float xStep = (x2-x1)/steps;</span><br /><span style="font-family: courier new;"> float yStep = (y2-y1)/steps;</span><br /><span style="font-family: courier new;"> for (int i=0; i<steps; i++){</span><br /><span style="font-family: courier new;"> float xStart = width/2;</span><br /><span style="font-family: courier new;"> float yStart = height/2;</span><br /><span style="font-family: courier new;"> float radius = width/2;</span><br /><span style="font-family: courier new;"> if(i<steps-1){</span><br /><span style="font-family: courier new;"> float scribA = (x1+=xStep+random(-scribVal, scribVal));</span><br /><span style="font-family: courier new;"> float scribB = (y1+= yStep+random(-scribVal, scribVal));</span><br /><span style="font-family: courier new;"> if ( (sqrt( ((scribA-xStart)*(scribA-xStart))+ ((scribB-yStart)*(scribB-yStart)))- radius) < 1) {</span><br /><span style="font-family: courier new;"> beginShape(); </span><br /><span style="font-family: courier new;"> vertex(x1, y1);</span><br /><span style="font-family: courier new;"> vertex(scribA ,scribB);</span><br /><span style="font-family: courier new;"> endShape();</span><br /><span style="font-family: courier new;"> }</span><br /><span style="font-family: courier new;"> }</span><br /><span style="font-family: courier new;"> }</span><br /><span style="font-family: courier new;"> }</span></span><br /></pre>Ian Welchhttp://www.blogger.com/profile/10505279500693891681noreply@blogger.com3tag:blogger.com,1999:blog-815525933388928766.post-50620087178923550822009-04-14T05:09:00.000-07:002009-04-14T05:12:10.711-07:00Vertex Functions<p style="text-align: center;" class="western"><span style="font-size:100%;"><b>Vertex Functions</b></span></p> <p class="western"><span style="font-size:100%;">A vertex is basically another word for a point. Yet the syntax of a </span><span style="font-size:100%;">vertex()</span><span style="font-size:100%;"> function is notably different to that of the </span><span style="font-size:100%;">point() </span><span style="font-size:100%;">function.</span></p> <p class="western"><span style="font-size:100%;">For example in order to draw two points on a display screen using the </span><span style="font-size:100%;">point()</span> function you could call a similar code to that shown in code 1.. </p> <pre><span style="font-size:100%;"><span style="font-weight: bold;">Code 1;</span><br /><br /></span><span style="font-size:100%;">size(200,200);</span><span style="font-size:100%;"><br /></span><span style="font-size:100%;">background(0);<br /></span><span style="font-size:100%;">strokeWeight(10);</span><span style="font-size:100%;"><br /></span><span style="font-size:100%;">stroke(255);<br /></span><span style="font-size:100%;">smooth();</span><span style="font-size:100%;"><br /></span><span style="font-size:100%;">point((width*0.2),height/2);<br /></span><span style="font-size:100%;">point((width*0.8),height/2);</span><span style="font-size:100%;"> </span><p class="western"><span style=""><span style="font-size:85%;"><br /></span></span></p><p style="font-weight: bold; text-align: center;" class="western"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2P68PYHuedNWfbvgL6548RodtCzjrmWGupczmp_B4h_6XUIg3CpIbo3YxBgx4GQDJCaOcyc5hN9OGvzQHrMx7CeLRKfjspQ71W03VtxWUetSULNyxSIIgYGQUBwKsRl1L9BUI-NklIxU9/s1600-h/figure1.png"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 202px; height: 197px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2P68PYHuedNWfbvgL6548RodtCzjrmWGupczmp_B4h_6XUIg3CpIbo3YxBgx4GQDJCaOcyc5hN9OGvzQHrMx7CeLRKfjspQ71W03VtxWUetSULNyxSIIgYGQUBwKsRl1L9BUI-NklIxU9/s320/figure1.png" alt="" id="BLOGGER_PHOTO_ID_5324498092425766274" border="0" /></a><span style="font-size:100%;">Figure 1: vertex() and point() examples Sketch.</span><br /></p></pre><pre><span style=""><span style="font-size:85%;"><span style="font-weight: bold;"><span style="font-size:100%;">Code 2 ;</span><br /><br /></span><span style="font-size:100%;">size(200,200);</span></span></span><span style="font-size:100%;"><br />background(0);<br /></span><span style="font-size:100%;">strokeWeight(10);</span><span style="font-size:100%;"><br /></span><span style="font-size:100%;">stroke(255);<br /></span><span style="font-size:100%;">smooth();<br /></span><span style="font-size:100%;">beginShape(POINTS);<br /></span><span style="font-size:100%;">vertex((width*0.2), height/2);<br /></span><span style="font-size:100%;">vertex((width*0.8), height/2);<br /></span><span style="font-size:100%;"><a name="DDE_LINK4"></a></span><span style="font-size:100%;">endShape();</span></pre><br /><p class="western"><i>Code 2</i> shows how the use of a <span style="">vertex() </span>function would produce the same outcome (See <i>figure 1</i>) as using the <span style="">point()</span> function. The display area is broken down into coordinate locations (200 in width by 200 in height for this example) each of these references a point location or vertex, which are the arguments taken by each of the two functions. </p> <p class="western">You will probably have noticed that there is an inclusion of <span style=""><span style="font-size:100%;">beginShape()</span></span> function, and <span style=""><span style="font-size:100%;">endShape()</span></span> function, which the <span style=""><span style="font-size:100%;">vertex()</span></span> function can be found nestling in. The<span style="font-size:100%;"> </span><span style=""><span style="font-size:100%;">beginShape()</span></span> function has predefined mode arguments, these are<span style=""> </span><span style=""><span style="font-size:100%;">POINTS, LINES, TRIANGLES, TRIANGLE_STRIP, TRIANGLE_FAN, QUADS</span></span>, and <span style=""><span style="font-size:100%;">QUAD_STRIP</span></span>, if no mode is defined line strip is used instead. The <span style="">beginShape()</span> function essentially begins the recording of the drawing instructions and<span style=""> endShape()</span> stops the recording. The benefit of this is that the data can be plotted based on different drawing algorithms, using the different modes within the <span style="">beginShape()</span> and <span style="">endShape()</span> functions</p> <p class="western">The <span style="">vertex()</span> functions we saw above are specifically for displaying 2D coordinates where two arguments are fed to the function. The <span style="">vertex()</span> function also allows for displaying 3D coordinates with the use of three arguments and a display renderer such as P3D or opengl. The syntax of both are as follows;</p> <pre><p class="western"><span style="font-size:100%;">vertex(x, y);</span></p><p class="western"><span style="font-size:100%;">vertex(x, y, z);</span></p></pre> <p class="western">Just to take a moment out in order to see some<span style=""> vertex()</span> functions in action, we have seen a simple use of the <span style="">POINTS</span> mode (<i>code 2</i>) so this time lets have a look at the mode <span style="">TRIANGLES</span> (<span style="font-size:100%;"><i>code 3 and figure 2</i></span>)</p> <pre><span style="font-size:100%;"><span style="font-weight: bold;">Code 3;</span><br /><br /></span><span style="font-size:100%;">size(200,200);<br /></span><span style="font-size:100%;">background(0);<br /></span><span style="font-size:100%;">stroke(255);<br /></span><span style="font-size:100%;">strokeWeight(4);<br /></span><span style="font-size:100%;">smooth();<br /></span><span style="font-size:100%;">noFill();</span><span style="font-size:100%;"><br />beginShape(TRIANGLES);<br />strokeJoin(ROUND);<br />vertex((width*0.2), height*0.8);<br /></span><span style="font-size:100%;">vertex((width*0.8), height*0.8);<br /></span><span style="font-size:100%;">vertex(width/2, (height*0.2));<br /></span><span style="font-size:100%;">endShape();</span><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiD3n76fbbCU42ybvmJmEQyQ6B2fR4FxxOmqcw5t8XDiP4DQAKtbznvzTsN_6wf5njeS3d5C6R2CJdd9hu04muZIQvvTOm0hHtZ9tCyZRg3TzeA-Lud2P5NoEkMMGo0Obd_zzVT0F8Fne_3/s1600-h/triange_fig_2.png"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 202px; height: 197px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiD3n76fbbCU42ybvmJmEQyQ6B2fR4FxxOmqcw5t8XDiP4DQAKtbznvzTsN_6wf5njeS3d5C6R2CJdd9hu04muZIQvvTOm0hHtZ9tCyZRg3TzeA-Lud2P5NoEkMMGo0Obd_zzVT0F8Fne_3/s320/triange_fig_2.png" alt="" id="BLOGGER_PHOTO_ID_5324501810884857538" border="0" /></a></pre><br /><div style="text-align: center;"><span style="font-weight: bold;font-size:85%;" >Figure 2: TRIANGLE mode sketch example.</span><br /></div><p class="western">You should be familiar by now with the <span style="">size()</span> and <span style="">background()</span> functions. The <span style="">stroke()</span> function takes an argument from 0 to 255, with 0 being black and white being 255. The <span style="">strokeWeight()</span> function is the thickness of the line. The <span style="">noFill()</span> function ensures that the area enclosed within the shape isn't automatically filled. For example if the <span style="">noFill() </span>function were to be omitted then the display would be that of a solid white triangle. </p> <p class="western">There were two functions that I purposely left out as they require slightly more detail, the <span style="">smooth()</span> function and the <span style="">strokeJoin()</span> function.<br /></p><p class="western">The <span style="">strokeJoin()</span> function can take three different options. The one we have seen, <span style="">ROUND</span>, but also <span style="">MITER</span> which is the default option and <span style="">BEVEL</span>. These effect the way the end caps come together, and as you can see from <i>figure 2</i>, the points of the triangle are slightly rounded. We will come back to this later on in the chapter.</p> <p class="western">In order for us to see how the internal recording works the following sketch has a look at recreating the functionality found with the <span style="">vertex()</span> function, but with the use of the <span style="">point()</span> and <span style="">line()</span> function. (<i>Code 4</i>) To produce <i>figure 3.</i></p> <pre><br /><p style="font-weight: bold;" class="western"><span style=""><span style="font-size:85%;">Code 4;</span></span></p><p style="font-family:courier new;"><span style="font-size:85%;">void setup(){</span> </p><p style="font-family:courier new;"> <span style="font-size:85%;">size(200, 200);</span> </p><p class="western" style="font-family:courier new;"> <span style="font-size:85%;">background(0);</span> </p><p class="western" style="font-family:courier new;"><span style="font-size:85%;">//Sets up arrays to store coordinates</span> </p><p class="western" style="font-family:courier new;"> <span style="font-size:85%;">float[]x = new float[5];</span> </p><p class="western" style="font-family:courier new;"> <span style="font-size:85%;">float[]y = new float[5];</span> </p><p class="western" style="font-family:courier new;"><span style="font-size:85%;">//sets up 2D array to group together coordinates</span> </p><p class="western" style="font-family:courier new;"> <span style="font-size:85%;">float [][]xy = {x, y};</span> </p><p class="western" style="font-family:courier new;"><span style="font-size:85%;">//Creates a starting point from which to run</span> </p><p class="western" style="font-family:courier new;"> <span style="font-size:85%;">float pointsX = width*0.1;</span> </p><p class="western" style="font-family:courier new;"> <span style="font-size:85%;">float pointsY = height*0.9;</span> </p><p class="western" style="font-family:courier new;"><span style="font-size:85%;">//sets the starting points</span> </p><p class="western" style="font-family:courier new;"> <span style="font-size:85%;">xy[0][0] = pointsX;</span> </p><p class="western" style="font-family:courier new;"> <span style="font-size:85%;">xy[1][0] = pointsY;</span> </p><p class="western" style="font-family:courier new;"><span style="font-size:85%;">//iterates over each of the positions in the array's to assign </span> </p><p class="western" style="font-family:courier new;"><span style="font-size:85%;">//coordinates dependent on the previous coordinates</span> </p><p class="western" style="font-family:courier new;"> <span style="font-size:85%;">for (int i = 1; i</span><<span style="font-size:85%;">xy[o].length; i++){</span><style type="text/css">!-- @page { margin: 2cm } P { margin-bottom: 0.21cm } --> </style><span style="font-size:85%;"><xy[0].length;i++){></xy[0].length;i++){></span></p><p class="western" style="font-family:courier new;"> <span style="font-size:85%;">if(i ==1){</span> </p><p class="western" style="font-family:courier new;"> <span style="font-size:85%;">pointsX +=width*0.4;</span> </p><p class="western" style="font-family:courier new;"> <span style="font-size:85%;">pointsY -=height*0.8;</span> </p><p class="western" style="font-family:courier new;"><span style="font-size:85%;"> xy[0][i] = pointsX;</span> </p><p class="western" style="font-family:courier new;"> <span style="font-size:85%;">xy[1][i] = pointsY;</span></p><p class="western" style="font-family:courier new;"> <span style="font-size:85%;">}</span> </p><p class="western" style="font-family:courier new;"> <span style="font-size:85%;">if(i==2){</span> </p><p class="western" style="font-family:courier new;"> <span style="font-size:85%;">pointsX +=width*0.4;</span> </p><p class="western" style="font-family:courier new;"> <span style="font-size:85%;">pointsY +=height*0.8;</span> </p><p class="western" style="font-family:courier new;"> <span style="font-size:85%;">xy[0][i] = pointsX;</span> </p><p class="western" style="font-family:courier new;"> <span style="font-size:85%;">xy[1][i] = pointsY;</span> </p><p class="western" style="font-family:courier new;"> <span style="font-size:85%;">}</span> </p><p class="western" style="font-family:courier new;"> <span style="font-size:85%;">if(i==3){</span> </p><p class="western" style="font-family:courier new;"> <span style="font-size:85%;">pointsX -= width*0.8;</span> </p><p class="western" style="font-family:courier new;"> <span style="font-size:85%;">pointsY -=height*0.55;</span> </p><p class="western" style="font-family:courier new;"> <span style="font-size:85%;">xy[0][i] = pointsX;</span> </p><p class="western" style="font-family:courier new;"> <span style="font-size:85%;">xy[1][i] = pointsY;</span></p><p class="western" style="font-family:courier new;"> <span style="font-size:85%;">}</span> </p><p class="western" style="font-family:courier new;"> <span style="font-size:85%;">if(i==4){</span></p><p class="western" style="font-family:courier new;"> <span style="font-size:85%;">pointsX +=width*0.8;</span> </p><p class="western" style="font-family:courier new;"> <span style="font-size:85%;">xy[0][i] = pointsX;</span> </p><p class="western" style="font-family:courier new;"> <span style="font-size:85%;">xy[1][i] = pointsY;</span> </p><p class="western" style="font-family:courier new;"> <span style="font-size:85%;">}</span> </p><p class="western" style="font-family:courier new;"> <span style="font-size:85%;">}</span> </p><p class="western" style="font-family:courier new;"> <span style="font-size:85%;">star(xy);</span> </p><p class="western" style="font-family:courier new;"><span style="font-size:85%;">}</span> </p><p class="western" style="font-family:courier new;"><span style="font-size:85%;">//function called to plot a star and join the points.</span> </p><p class="western" style="font-family:courier new;"><span style="font-size:85%;">void star(float[][]pts){</span> </p><p class="western" style="font-family:courier new;"> <span style="font-size:85%;">stroke(255);</span> </p><p class="western" style="font-family:courier new;"> <span style="font-size:85%;">smooth();</span></p><p class="western" style="font-family:courier new;"> <span style="font-size:85%;">for(int i = 0; i<pts[0].length;></pts[0].length;></span><<span style="font-size:85%;"><pts[0].length;>pts[0].length; i++){ </pts[0].length;></span></p><p class="western" style="font-family:courier new;"> <span style="font-size:85%;">strokeWeight(5);</span> </p><p class="western" style="font-family:courier new;"><span style="font-size:85%;">//Plot the points from the input arrays</span> </p><p class="western" style="font-family:courier new;"> <span style="font-size:85%;">point(pts[0][i], pts[1][i]);</span> </p><p class="western" style="font-family:courier new;"> <span style="font-size:85%;">strokeWeight(0.5);</span> </p><p class="western" style="font-family:courier new;"><span style="font-size:85%;">//Join the points together with a thin line</span> </p><p class="western" style="font-family:courier new;"> <span style="font-size:85%;">if(i>0){</span> </p><p class="western" style="font-family:courier new;"> <span style="font-size:85%;">line(pts[0][i],pts[1][i],pts[0][i-1], pts[1][i - 1]);</span> </p><p class="western" style="font-family:courier new;"> <span style="font-size:85%;">}</span> </p><p class="western" style="font-family:courier new;"><span style="font-size:85%;">//If the last position in the array join to the first point.</span> </p><p class="western" style="font-family:courier new;"> <span style="font-size:85%;">if(i == pts[0].length-1){</span> </p><p class="western" style="font-family:courier new;"> <span style="font-size:85%;">line(pts[0][i], pts[1][i], pts[0][0], pts[1][0]);</span> </p><p class="western" style="font-family:courier new;"> <span style="font-size:85%;">}</span> </p><p class="western" style="font-family:courier new;"> <span style="font-size:85%;">}</span> </p><p class="western" style="font-family:courier new;"><span style="font-size:85%;">}</span> </p></pre><p class="western"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiF-tZJxzV-lxeblnQhN_RqivR8yR2Hye2mN7XHScpEZ15SSKreTId5sNhUvqaabHC7VS2ao7lsgSn7arWwgJXK4_2YqXE78UhiDEqzhPoXrDIIXQk58pwxr1OB8UmL9HOAa9GKmQvcoyIF/s1600-h/plotter_figure3.png"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 202px; height: 197px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiF-tZJxzV-lxeblnQhN_RqivR8yR2Hye2mN7XHScpEZ15SSKreTId5sNhUvqaabHC7VS2ao7lsgSn7arWwgJXK4_2YqXE78UhiDEqzhPoXrDIIXQk58pwxr1OB8UmL9HOAa9GKmQvcoyIF/s320/plotter_figure3.png" alt="" id="BLOGGER_PHOTO_ID_5324505828175665058" border="0" /></a></p> <p style="text-align: center;" class="western"><span style="font-weight: bold;font-size:85%;" >Figure 3: Star Plotter Sketch</span><br /></p><p class="western">At first glance the code may look quite daunting, however as we go through it you will find the majority familiar with what has previously been covered. </p> <p class="western">First off, the function <span style="">setup</span><span style="font-family:Liberation Serif,serif;">() which is used to setup the </span>display size, the colour is set and several array's are created and then populated. As we can recall the use of magic numbers is considered poor coding technique, so each position in the array has been setup as a percentage of the width and height assigned to the x and y coordinates. In this example consider if we had used magic numbers and the size of the display is changed. The output sketch in the display will be the same size regardless of the box size, however with the use of percentages dependent on the initial setup size, the sketch will always be proportional in size to the size of the display.</p><p class="western">You may be wondering what <span style="">i</span><<span style="">xy[0].length </span>is referring to within the <span style="">for()</span> statement . Recall that a <span style="">for()</span> statement has several properties, the first is the initialization, <span style="">int i = 0;</span> , the second, which is what we are referring to in this instance, the condition and the third is the counter <span style="">i++;</span>. So <span style="">i</span><<span style="">xy[0].length</span> is a condition, This condition is stating that the statement should continue running unless the value of <span style="">i </span>is greater than or equal to the amount of positions or length in the array containing the coordinates. For the above example (<i>code 4</i>) <span style="">xy[0].length</span> would be equal to 5. </p> Next we move on to the custom <span style="">star()</span> function, This is where all the points are plotted and then joined together. As seen in the <span style="">setup()</span> function, the <span style="">for()</span> statement is used to iterate over each of the defined <i>xy</i> coordinates. The points are then plotted with the use of the <span style="">point()</span> function. The next two <span style="">if()</span> statements act depending on the value of the integer <i>i</i>. The first draws a line between the current values for the <i>x y</i> coordinates and joins it to the previous array containing the <i>x</i> and <i>y</i> coordinates with the use of <span style="">pts[0][i-1]</span> and <span style="">pts[1][i-1]</span> as long as the point isn't that of the starting point. The second <span style="">if()</span> statement runs only if the position in the array is equal to the final position of the array, and joins that coordinate to that of the starting coordinate and thus completing the star. <p class="western">We can see quite clearly from the above example (<i>code 4</i>) how the internal recording works. Which if we had replaced the <span style="">star()</span> function to that below (<i>code 5</i>), it isn't overly clear how the process works, but will enable easier manipulation by using different algorithms to produce different shapes.</p> <pre><p style="font-weight: bold;" class="western"><span style="font-size:85%;">Code 5 ;</span></p><p class="western"><span style="font-size:85%;">void star(float[][]pts){</span></p> <span style="font-size:85%;">stroke(255);</span><br /><span style="font-size:85%;">strokeWeight(5);<br /></span> <span style="font-size:85%;">smooth();</span> <p class="western"><span style="font-size:85%;">//draws the points of the star </span> </p> <span style="font-size:85%;">beginShape(POINT);</span><br /><span style="font-size:85%;">noFill();</span> <p class="western"> <span style="font-size:85%;">for (int i = 0; i</span><pts[0].length; i++){</p><p class="western"> <span style="font-size:85%;">vertex(pts[0][i], pts[1][i]);</span> </p><p class="western"> <span style="font-size:85%;">}</span> </p><p class="western"> <span style="font-size:85%;">endShape();</span> </p><p class="western"><span style="font-size:85%;">//Change the thickness of the joining lines </span> </p><p class="western"> <span style="font-size:85%;">strokeWeight(0.5);</span> </p><p class="western"> <span style="font-size:85%;">beginShape();</span> </p><p class="western"> <span style="font-size:85%;">noFill();</span> </p><p class="western"> <span style="font-size:85%;">for (int i = 0; i<pts[0].length;></pts[0].length;></span> </p><p class="western"> <span style="font-size:85%;">vertex(pts[0][i], pts[1][i]);</span> </p><p class="western"> <span style="font-size:85%;">}</span> </p><p class="western"> <span style="font-size:85%;">endShape(CLOSE);</span> </p><p class="western"><span style="font-size:85%;"><a name="DDE_LINK6"></a></span> <span style="font-size:85%;">}</span><br /></p></pre> <p class="western">The following code (<i>code 6</i>) shows how a small change in the function can cause a completely different pattern of shapes, opening up many possibilities to be explored. </p> <pre><p class="western"><span style="font-size:85%;">Code 6;</span> </p><p class="western"><span style="font-size:85%;">void triangleExplosion(float[][]pts){</span><span style="font-size:85%;">stroke(255);</span> </p><p class="western"> <span style="font-size:85%;">strokeWeight(5);</span> </p><p class="western"> <span style="font-size:85%;">smooth();</span> </p><p class="western"> <span style="font-size:85%;">beginShape(TRIANGLES);</span> </p><p class="western"><span style="font-size:85%;">//Draw Triangles</span> </p><p class="western"> <span style="font-size:85%;">for(int i = 0; i</span><<span style="font-size:85%;">120;i++){ </span></p><p class="western"> <span style="font-size:85%;">stroke(random(0,200));</span> </p><p class="western"><span style="font-size:85%;">//Randomize the colouring of the shapes</span> </p><p class="western"> <span style="font-size:85%;">fill(random(225,255),150);</span> </p><p class="western"> <span style="font-size:85%;">strokeWeight(random(0.5,2));</span> </p><p class="western"><span style="font-size:85%;">//Create random numbers </span> </p><p class="western"> <span style="font-size:85%;">Random num = new Random();</span> </p><p class="western"><span style="font-size:85%;">//call a random integer between 0 and 5 and assign it to n</span> </p><p class="western"> <span style="font-size:85%;">int n = num.nextInt(pts[0].length);</span> </p><p class="western"> <span style="font-size:85%;">vertex(random(pts[0][n]),random(pts[1][n]) );</span> </p><p class="western"> <span style="font-size:85%;">}</span> </p><p class="western"><span style="font-size:85%;">endShape();</span> </p><p class="western"><span style="font-size:85%;">}</span></p><p class="western"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1rVOU1AHdzCcrzR2tSDMZV2KWiS9xCh54dJZ6vRMyZH7LltF7sn4AsvlVoQ9xcTmTmSMNHQvr2XzeGnESw11MKrrBCQ14qXLaW_v2atTHphra3X7pvHGRpaD6Ew_LFiUImYKLignI6PS0/s1600-h/triangleExplosion.png"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 202px; height: 197px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1rVOU1AHdzCcrzR2tSDMZV2KWiS9xCh54dJZ6vRMyZH7LltF7sn4AsvlVoQ9xcTmTmSMNHQvr2XzeGnESw11MKrrBCQ14qXLaW_v2atTHphra3X7pvHGRpaD6Ew_LFiUImYKLignI6PS0/s320/triangleExplosion.png" alt="" id="BLOGGER_PHOTO_ID_5324511047987724034" border="0" /></a></p><p style="text-align: center;" class="western"><span style="font-weight: bold;">Figure 4: triangleExplosion Sketch</span></p></pre><p class="western">As can be seen from <i>figure 4</i>, the output couldn't be any different. There are a few things to note from this coding. First of all I changed the function name to<span style=""> triangleExplosion()</span>, this could have been left as<span style=""> star() </span>however it is a good idea to have meaningful names for functions in order to give some idea of what the function does. </p> <p class="western">The fill function has two arguments, the first argument, <span style="">random(225,255)</span>, sets a colour with the value being randomly selected from the values between 225 and 255. The second argument set as 150 deals with the transparency of the colouring, enabling the triangles drawn underneath to still be visible. </p> <p class="western">Finally random integers are created to randomly pick which array coordinates are chosen to form the triangles. </p><br /><b>Anti-aliasing</b> <p class="western">As mentioned previously the function <span style="font-family:Courier New,monospace;">smooth()</span>needs further explanation. The use of this function anti-aliases the output. In other words this is a function to minimize the distortion viewed by an image. The smooth function basically, as it's name suggests smooths the edges of the images displayed by the running of the coding. In order to see this lets have a look at this simple example;</p> <p class="western"><span style=""><span style="font-size:85%;"><pre><br /></pre></span></span></p> <style type="text/css"> <!-- @page { margin: 2cm } P { margin-bottom: 0.21cm } --> </style> <p style="font-weight: bold;" class="western"><span style="font-size:85%;">code 7 ;</span></p> <p class="western"><span style="font-size:85%;">size(300,300);</span></p> <p class="western"><span style="font-size:85%;">strokeWeight(2);</span></p> <p class="western"><span style="font-size:85%;">background(0);</span><span style="font-size:85%;">stroke(255);</span> </p> <p class="western"><span style="font-size:85%;">fill(random(225,255),150);</span></p> <p class="western"><span style="font-size:85%;">float x = 0.3;</span></p> <p class="western"><span style="font-size:85%;">for(int i = 0; i<4;></span></p> <p class="western"><span style="font-size:85%;">if (x > 0.5){</span></p> <p class="western"> <span style="font-size:85%;">smooth();</span></p><p class="western"><span style="font-size:85%;"> ellipse(width*x,height*x,width/2,height/2);</span></p> <p class="western"><span style="font-size:85%;"> }</span></p> <p class="western"><span style="font-size:85%;">else{</span></p> <p class="western"> <span style="font-size:85%;">ellipse(width*x,height*x,width/2,height/2);</span></p> <p class="western"><span style="font-size:85%;">}</span></p> <p class="western"><span style="font-size:85%;">x = x + 0.12;</span></p> <p class="western"><span style="font-size:85%;">}</span></p> <p class="western"><br /><br /></p> <p class="western"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDkJr8ViqB_IhPAdivP_eu6y13CqFddpNVlo_zotohI8JkYaVVC5gjZmqi945Rto99OnI0wUQHos-oPY8fdA-K155NQD5oIT5qalNtWnvYD_Kjr7a72qPZk-6iZF0Zq1-EATDtREP7B-uS/s1600-h/AntiAliasing.png"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 300px; height: 301px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDkJr8ViqB_IhPAdivP_eu6y13CqFddpNVlo_zotohI8JkYaVVC5gjZmqi945Rto99OnI0wUQHos-oPY8fdA-K155NQD5oIT5qalNtWnvYD_Kjr7a72qPZk-6iZF0Zq1-EATDtREP7B-uS/s320/AntiAliasing.png" alt="" id="BLOGGER_PHOTO_ID_5324517413247020882" border="0" /></a><br /></p><div style="text-align: center;"><span style="font-weight: bold;font-size:85%;" >Figure 5: Circles and Anti-aliasing</span><br /></div> <p class="western">The example above <i>(code 7)</i> should be very familiar too you by now. First of all the size of the output is set, along with the thickness of the drawn lines, by the use of the <span style="">strokeWeight()</span> function. The background is set to black and the stroke colour is set to white <span style="">stroke(255)</span> so its easy to show the differences. The fill function is used to colour in the drawn shapes and I have opted to add some transparency on to further help define the edges. I wanted to draw four circles so a for statement is used to create the four circles at differing positions, where the use of the if statement controls which shapes will appear with anti-aliasing on or off. </p> <p class="western">As we can see from the example (figure 5) the two circles drawn in the top right have the ant-aliasing function off, which is the default setting in processing. In order to switch it on the function smooth() must be added. This is the case for the two circle's toward the bottom right. If you notice the difference in outline producing a smooth flowing circle when anti-aliasing is switched on. However this function can have an impact on the performance of the coding as the anti-aliasing calculations take time. </p>Ian Welchhttp://www.blogger.com/profile/10505279500693891681noreply@blogger.com0tag:blogger.com,1999:blog-815525933388928766.post-36243731213557554992009-04-14T05:02:00.000-07:002009-04-14T05:08:40.811-07:00Vertex Functions Part 4<style type="text/css"> !-- @page { margin: 2cm } P { margin-bottom: 0.21cm } --> </style> <p class="western">As can be seen from <i>figure 4</i>, the output couldn't be any different. There are a few things to note from this coding. First of all I changed the function name to<span style=""> triangleExplosion()</span>, this could have been left as<span style=""> star() </span>however it is a good idea to have meaningful names for functions in order to give some idea of what the function does. </p> <p class="western">The fill function has two arguments, the first argument, <span style="">random(225,255)</span>, sets a colour with the value being randomly selected from the values between 225 and 255. The second argument set as 150 deals with the transparency of the colouring, enabling the triangles drawn underneath to still be visible. </p> <p class="western">Finally random integers are created to randomly pick which array coordinates are chosen to form the triangles. </p><br /><b>Anti-aliasing</b> <p class="western">As mentioned previously the function <span style="font-family:Courier New,monospace;">smooth()</span>needs further explanation. The use of this function anti-aliases the output. In other words this is a function to minimize the distortion viewed by an image. The smooth function basically, as it's name suggests smooths the edges of the images displayed by the running of the coding. In order to see this lets have a look at this simple example;</p> <p class="western"><span style=""><span style="font-size:85%;"><pre><br /></pre></span></span></p> <style type="text/css"> <!-- @page { margin: 2cm } P { margin-bottom: 0.21cm } --> </style> <p style="font-weight: bold;" class="western"><span style="font-family:Courier 10 Pitch;font-size:85%;">code 7 ;</span></p> <p class="western"><span style="font-family:Courier 10 Pitch;font-size:85%;">size(300,300);</span></p> <p class="western"><span style="font-family:Courier 10 Pitch;font-size:85%;">strokeWeight(2);</span></p> <p class="western"><span style="font-family:Courier 10 Pitch;font-size:85%;">background(0);</span><span style="font-family:Courier 10 Pitch;font-size:85%;">stroke(255);</span> </p> <p class="western"><span style="font-family:Courier 10 Pitch;font-size:85%;">fill(random(225,255),150);</span></p> <p class="western"><span style="font-family:Courier 10 Pitch;font-size:85%;">float x = 0.3;</span></p> <p class="western"><span style="font-family:Courier 10 Pitch;font-size:85%;">for(int i = 0; i<4;></p> <p class="western"><span style="font-family:Courier 10 Pitch;font-size:85%;">if (x > 0.5){</span></p> <p class="western"> <span style="font-family:Courier 10 Pitch;font-size:85%;">smooth();</span></p><p class="western"><span style="font-family:Courier 10 Pitch;font-size:85%;"> ellipse(width*x,height*x,width/2,height/2);</span></p> <p class="western"><span style="font-family:Courier 10 Pitch;font-size:85%;"> }</span></p> <p class="western"><span style="font-family:Courier 10 Pitch;font-size:85%;">else{</span></p> <p class="western"> <span style="font-family:Courier 10 Pitch;font-size:85%;">ellipse(width*x,height*x,width/2,height/2);</span></p> <p class="western"><span style="font-family:Courier 10 Pitch;font-size:85%;">}</span></p> <p class="western"><span style="font-family:Courier 10 Pitch;font-size:85%;">x = x + 0.12;</span></p> <p class="western"><span style="font-family:Courier 10 Pitch;font-size:85%;">}</span></p> <p class="western"><br /><br /></p> <p class="western"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDkJr8ViqB_IhPAdivP_eu6y13CqFddpNVlo_zotohI8JkYaVVC5gjZmqi945Rto99OnI0wUQHos-oPY8fdA-K155NQD5oIT5qalNtWnvYD_Kjr7a72qPZk-6iZF0Zq1-EATDtREP7B-uS/s1600-h/AntiAliasing.png"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 300px; height: 301px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDkJr8ViqB_IhPAdivP_eu6y13CqFddpNVlo_zotohI8JkYaVVC5gjZmqi945Rto99OnI0wUQHos-oPY8fdA-K155NQD5oIT5qalNtWnvYD_Kjr7a72qPZk-6iZF0Zq1-EATDtREP7B-uS/s320/AntiAliasing.png" alt="" id="BLOGGER_PHOTO_ID_5324517413247020882" border="0" /></a><br /></p><div style="text-align: center;"><span style="font-weight: bold;font-size:85%;" >Figure 5: Circles and Anti-aliasing</span><br /></div> <p class="western">The example above <i>(code 7)</i> should be very familiar too you by now. First of all the size of the output is set, along with the thickness of the drawn lines, by the use of the <span style="">strokeWeight()</span> function. The background is set to black and the stroke colour is set to white <span style="">stroke(255)</span> so its easy to show the differences. The fill function is used to colour in the drawn shapes and I have opted to add some transparency on to further help define the edges. I wanted to draw four circles so a for statement is used to create the four circles at differing positions, where the use of the if statement controls which shapes will appear with anti-aliasing on or off. </p> <p class="western">As we can see from the example (figure 5) the two circles drawn in the top right have the ant-aliasing function off, which is the default setting in processing. In order to switch it on the function smooth() must be added. This is the case for the two circle's toward the bottom right. If you notice the difference in outline producing a smooth flowing circle when anti-aliasing is switched on. However this function can have an impact on the performance of the coding as the anti-aliasing calculations take time. </p>Ian Welchhttp://www.blogger.com/profile/10505279500693891681noreply@blogger.com0tag:blogger.com,1999:blog-815525933388928766.post-68651873950836190042009-04-14T04:18:00.000-07:002009-04-14T04:58:26.264-07:00Vertex Functions Part 2<style type="text/css"> <!-- @page { margin: 2cm } P { margin-bottom: 0.21cm } --> </style> <p class="western">The <span style="">strokeJoin()</span> function can take three different options. The one we have seen, <span style="">ROUND</span>, but also <span style="">MITER</span> which is the default option and <span style="">BEVEL</span>. These effect the way the end caps come together, and as you can see from <i>figure 2</i>, the points of the triangle are slightly rounded. We will come back to this later on in the chapter.</p> <p class="western">In order for us to see how the internal recording works the following sketch has a look at recreating the functionality found with the <span style="">vertex()</span> function, but with the use of the <span style="">point()</span> and <span style="">line()</span> function. (<i>Code 4</i>) To produce <i>figure 3.</i></p> <pre><br /><p style="font-weight: bold;" class="western"><span style=""><span style="font-size:85%;">Code 4;</span></span></p><p style="font-family:courier new;"><span style="font-size:85%;">void setup(){</span> </p><p style="font-family:courier new;"> <span style="font-size:85%;">size(200, 200);</span> </p><p class="western" style="font-family:courier new;"> <span style="font-size:85%;">background(0);</span> </p><p class="western" style="font-family:courier new;"><span style="font-size:85%;">//Sets up arrays to store coordinates</span> </p><p class="western" style="font-family:courier new;"> <span style="font-size:85%;">float[]x = new float[5];</span> </p><p class="western" style="font-family:courier new;"> <span style="font-size:85%;">float[]y = new float[5];</span> </p><p class="western" style="font-family:courier new;"><span style="font-size:85%;">//sets up 2D array to group together coordinates</span> </p><p class="western" style="font-family:courier new;"> <span style="font-size:85%;">float [][]xy = {x, y};</span> </p><p class="western" style="font-family:courier new;"><span style="font-size:85%;">//Creates a starting point from which to run</span> </p><p class="western" style="font-family:courier new;"> <span style="font-size:85%;">float pointsX = width*0.1;</span> </p><p class="western" style="font-family:courier new;"> <span style="font-size:85%;">float pointsY = height*0.9;</span> </p><p class="western" style="font-family:courier new;"><span style="font-size:85%;">//sets the starting points</span> </p><p class="western" style="font-family:courier new;"> <span style="font-size:85%;">xy[0][0] = pointsX;</span> </p><p class="western" style="font-family:courier new;"> <span style="font-size:85%;">xy[1][0] = pointsY;</span> </p><p class="western" style="font-family:courier new;"><span style="font-size:85%;">//iterates over each of the positions in the array's to assign </span> </p><p class="western" style="font-family:courier new;"><span style="font-size:85%;">//coordinates dependent on the previous coordinates</span> </p><p class="western" style="font-family:courier new;"> <span style="font-size:85%;">for (int i = 1; i</span><<span style="font-size:85%;">xy[o].length; i++){</span><style type="text/css">!-- @page { margin: 2cm } P { margin-bottom: 0.21cm } --> </style><span style="font-size:85%;"><xy[0].length;i++){></xy[0].length;i++){></span></p><p class="western" style="font-family:courier new;"> <span style="font-size:85%;">if(i ==1){</span> </p><p class="western" style="font-family:courier new;"> <span style="font-size:85%;">pointsX +=width*0.4;</span> </p><p class="western" style="font-family:courier new;"> <span style="font-size:85%;">pointsY -=height*0.8;</span> </p><p class="western" style="font-family:courier new;"><span style="font-size:85%;"> xy[0][i] = pointsX;</span> </p><p class="western" style="font-family:courier new;"> <span style="font-size:85%;">xy[1][i] = pointsY;</span></p><p class="western" style="font-family:courier new;"> <span style="font-size:85%;">}</span> </p><p class="western" style="font-family:courier new;"> <span style="font-size:85%;">if(i==2){</span> </p><p class="western" style="font-family:courier new;"> <span style="font-size:85%;">pointsX +=width*0.4;</span> </p><p class="western" style="font-family:courier new;"> <span style="font-size:85%;">pointsY +=height*0.8;</span> </p><p class="western" style="font-family:courier new;"> <span style="font-size:85%;">xy[0][i] = pointsX;</span> </p><p class="western" style="font-family:courier new;"> <span style="font-size:85%;">xy[1][i] = pointsY;</span> </p><p class="western" style="font-family:courier new;"> <span style="font-size:85%;">}</span> </p><p class="western" style="font-family:courier new;"> <span style="font-size:85%;">if(i==3){</span> </p><p class="western" style="font-family:courier new;"> <span style="font-size:85%;">pointsX -= width*0.8;</span> </p><p class="western" style="font-family:courier new;"> <span style="font-size:85%;">pointsY -=height*0.55;</span> </p><p class="western" style="font-family:courier new;"> <span style="font-size:85%;">xy[0][i] = pointsX;</span> </p><p class="western" style="font-family:courier new;"> <span style="font-size:85%;">xy[1][i] = pointsY;</span></p><p class="western" style="font-family:courier new;"> <span style="font-size:85%;">}</span> </p><p class="western" style="font-family:courier new;"> <span style="font-size:85%;">if(i==4){</span></p><p class="western" style="font-family:courier new;"> <span style="font-size:85%;">pointsX +=width*0.8;</span> </p><p class="western" style="font-family:courier new;"> <span style="font-size:85%;">xy[0][i] = pointsX;</span> </p><p class="western" style="font-family:courier new;"> <span style="font-size:85%;">xy[1][i] = pointsY;</span> </p><p class="western" style="font-family:courier new;"> <span style="font-size:85%;">}</span> </p><p class="western" style="font-family:courier new;"> <span style="font-size:85%;">}</span> </p><p class="western" style="font-family:courier new;"> <span style="font-size:85%;">star(xy);</span> </p><p class="western" style="font-family:courier new;"><span style="font-size:85%;">}</span> </p><p class="western" style="font-family:courier new;"><span style="font-size:85%;">//function called to plot a star and join the points.</span> </p><p class="western" style="font-family:courier new;"><span style="font-size:85%;">void star(float[][]pts){</span> </p><p class="western" style="font-family:courier new;"> <span style="font-size:85%;">stroke(255);</span> </p><p class="western" style="font-family:courier new;"> <span style="font-size:85%;">smooth();</span></p><p class="western" style="font-family:courier new;"> <span style="font-size:85%;">for(int i = 0; i<pts[0].length;></pts[0].length;></span><<span style="font-size:85%;"><pts[0].length;>pts[0].length; i++){ </pts[0].length;></span></p><p class="western" style="font-family:courier new;"> <span style="font-size:85%;">strokeWeight(5);</span> </p><p class="western" style="font-family:courier new;"><span style="font-size:85%;">//Plot the points from the input arrays</span> </p><p class="western" style="font-family:courier new;"> <span style="font-size:85%;">point(pts[0][i], pts[1][i]);</span> </p><p class="western" style="font-family:courier new;"> <span style="font-size:85%;">strokeWeight(0.5);</span> </p><p class="western" style="font-family:courier new;"><span style="font-size:85%;">//Join the points together with a thin line</span> </p><p class="western" style="font-family:courier new;"> <span style="font-size:85%;">if(i>0){</span> </p><p class="western" style="font-family:courier new;"> <span style="font-size:85%;">line(pts[0][i],pts[1][i],pts[0][i-1], pts[1][i - 1]);</span> </p><p class="western" style="font-family:courier new;"> <span style="font-size:85%;">}</span> </p><p class="western" style="font-family:courier new;"><span style="font-size:85%;">//If the last position in the array join to the first point.</span> </p><p class="western" style="font-family:courier new;"> <span style="font-size:85%;">if(i == pts[0].length-1){</span> </p><p class="western" style="font-family:courier new;"> <span style="font-size:85%;">line(pts[0][i], pts[1][i], pts[0][0], pts[1][0]);</span> </p><p class="western" style="font-family:courier new;"> <span style="font-size:85%;">}</span> </p><p class="western" style="font-family:courier new;"> <span style="font-size:85%;">}</span> </p><p class="western" style="font-family:courier new;"><span style="font-size:85%;">}</span> </p></pre><p></p><p class="western"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiF-tZJxzV-lxeblnQhN_RqivR8yR2Hye2mN7XHScpEZ15SSKreTId5sNhUvqaabHC7VS2ao7lsgSn7arWwgJXK4_2YqXE78UhiDEqzhPoXrDIIXQk58pwxr1OB8UmL9HOAa9GKmQvcoyIF/s1600-h/plotter_figure3.png"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 202px; height: 197px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiF-tZJxzV-lxeblnQhN_RqivR8yR2Hye2mN7XHScpEZ15SSKreTId5sNhUvqaabHC7VS2ao7lsgSn7arWwgJXK4_2YqXE78UhiDEqzhPoXrDIIXQk58pwxr1OB8UmL9HOAa9GKmQvcoyIF/s320/plotter_figure3.png" alt="" id="BLOGGER_PHOTO_ID_5324505828175665058" border="0" /></a></p> <p style="text-align: center;" class="western"><span style="font-weight: bold;font-size:85%;" >Figure 3: Star Plotter Sketch</span><br /></p><p class="western">At first glance the code may look quite daunting, however as we go through it you will find the majority familiar with what has previously been covered. </p> <p class="western">First off, the function <span style="">setup</span><span style="font-family:Liberation Serif,serif;">() which is used to setup the </span>display size, the colour is set and several array's are created and then populated. As we can recall the use of magic numbers is considered poor coding technique, so each position in the array has been setup as a percentage of the width and height assigned to the x and y coordinates. In this example consider if we had used magic numbers and the size of the display is changed. The output sketch in the display will be the same size regardless of the box size, however with the use of percentages dependent on the initial setup size, the sketch will always be proportional in size to the size of the display.</p>Ian Welchhttp://www.blogger.com/profile/10505279500693891681noreply@blogger.com0tag:blogger.com,1999:blog-815525933388928766.post-91953677704446361542009-04-14T03:41:00.000-07:002009-04-14T04:15:20.126-07:00Vertex Functions Part 1<style type="text/css">!-- @page { margin: 2cm } P { margin-bottom: 0.21cm } --> </style> <p style="text-align: center;" class="western"><span style="font-size:100%;"><b>Vertex Functions</b></span></p> <p class="western"><span style="font-size:100%;">A vertex is basically another word for a point. Yet the syntax of a </span><span style="font-size:100%;">vertex()</span><span style="font-size:100%;"> function is notably different to that of the </span><span style="font-size:100%;">point() </span><span style="font-size:100%;">function.</span></p> <p class="western"><span style="font-size:100%;">For example in order to draw two points on a display screen using the </span><span style="font-size:100%;">point()</span> function you could call a similar code to that shown in code 1.. </p> <pre><span style="font-size:100%;"><span style="font-weight: bold;">Code 1;</span><br /><br /></span><span style="font-size:100%;">size(200,200);</span><span style="font-size:100%;"><br /></span><span style="font-size:100%;">background(0);<br /></span><span style="font-size:100%;">strokeWeight(10);</span><span style="font-size:100%;"><br /></span><span style="font-size:100%;">stroke(255);<br /></span><span style="font-size:100%;">smooth();</span><span style="font-size:100%;"><br /></span><span style="font-size:100%;">point((width*0.2),height/2);<br /></span><span style="font-size:100%;">point((width*0.8),height/2);</span><span style="font-size:100%;"> </span><p class="western"><span style=""><span style="font-size:85%;"><br /></span></span></p><p style="font-weight: bold; text-align: center;" class="western"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2P68PYHuedNWfbvgL6548RodtCzjrmWGupczmp_B4h_6XUIg3CpIbo3YxBgx4GQDJCaOcyc5hN9OGvzQHrMx7CeLRKfjspQ71W03VtxWUetSULNyxSIIgYGQUBwKsRl1L9BUI-NklIxU9/s1600-h/figure1.png"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 202px; height: 197px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2P68PYHuedNWfbvgL6548RodtCzjrmWGupczmp_B4h_6XUIg3CpIbo3YxBgx4GQDJCaOcyc5hN9OGvzQHrMx7CeLRKfjspQ71W03VtxWUetSULNyxSIIgYGQUBwKsRl1L9BUI-NklIxU9/s320/figure1.png" alt="" id="BLOGGER_PHOTO_ID_5324498092425766274" border="0" /></a><span style="font-size:100%;">Figure 1: vertex() and point() examples Sketch.</span><br /></p></pre><pre><pre><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" figure="" 1=""></a></pre><span style=""><span style="font-size:85%;"><span style="font-weight: bold;"><span style="font-size:100%;">Code 2 ;</span><br /><br /></span><span style="font-size:100%;">size(200,200);</span></span></span><span style="font-size:100%;"><br />background(0);<br /></span><span style="font-size:100%;">strokeWeight(10);</span><span style="font-size:100%;"><br /></span><span style="font-size:100%;">stroke(255);<br /></span><span style="font-size:100%;">smooth();<br /></span><span style="font-size:100%;">beginShape(POINTS);<br /></span><span style="font-size:100%;">vertex((width*0.2), height/2);<br /></span><span style="font-size:100%;">vertex((width*0.8), height/2);<br /></span><span style="font-size:100%;"><a name="DDE_LINK4"></a></span><span style="font-size:100%;">endShape();</span><p></p></pre><br /><p></p> <p class="western"><i>Code 2</i> shows how the use of a <span style="">vertex() </span>function would produce the same outcome (See <i>figure 1</i>) as using the <span style="">point()</span> function. The display area is broken down into coordinate locations (200 in width by 200 in height for this example) each of these references a point location or vertex, which are the arguments taken by each of the two functions. </p> <p class="western">You will probably have noticed that there is an inclusion of <span style=""><span style="font-size:100%;">beginShape()</span></span> function, and <span style=""><span style="font-size:100%;">endShape()</span></span> function, which the <span style=""><span style="font-size:100%;">vertex()</span></span> function can be found nestling in. The<span style="font-size:100%;"> </span><span style=""><span style="font-size:100%;">beginShape()</span></span> function has predefined mode arguments, these are<span style=""> </span><span style=""><span style="font-size:100%;">POINTS, LINES, TRIANGLES, TRIANGLE_STRIP, TRIANGLE_FAN, QUADS</span></span>, and <span style=""><span style="font-size:100%;">QUAD_STRIP</span></span>, if no mode is defined line strip is used instead. The <span style="">beginShape()</span> function essentially begins the recording of the drawing instructions and<span style=""> endShape()</span> stops the recording. The benefit of this is that the data can be plotted based on different drawing algorithms, using the different modes within the <span style="">beginShape()</span> and <span style="">endShape()</span> functions</p> <p class="western">The <span style="">vertex()</span> functions we saw above are specifically for displaying 2D coordinates where two arguments are fed to the function. The <span style="">vertex()</span> function also allows for displaying 3D coordinates with the use of three arguments and a display renderer such as P3D or opengl. The syntax of both are as follows;</p> <pre><p></p><p class="western"><span style="font-size:100%;">vertex(x, y);</span></p><p class="western"><span style="font-size:100%;">vertex(x, y, z);</span></p><p class="western"></p></pre><p></p> <p class="western">Just to take a moment out in order to see some<span style=""> vertex()</span> functions in action, we have seen a simple use of the <span style="">POINTS</span> mode (<i>code 2</i>) so this time lets have a look at the mode <span style="">TRIANGLES</span> (<span style="font-size:100%;"><i>code 3 and figure 2</i></span>)</p> <p class="western"><span style="font-size:85%;"><i></i></span></p><pre><span style="font-size:100%;"><span style="font-weight: bold;">Code 3;</span><br /><br /></span><span style="font-size:100%;">size(200,200);<br /></span><span style="font-size:100%;">background(0);<br /></span><span style="font-size:100%;">stroke(255);<br /></span><span style="font-size:100%;">strokeWeight(4);<br /></span><span style="font-size:100%;">smooth();<br /></span><span style="font-size:100%;">noFill();</span><span style="font-size:100%;"><br />beginShape(TRIANGLES);<br />strokeJoin(ROUND);<br />vertex((width*0.2), height*0.8);<br /></span><span style="font-size:100%;">vertex((width*0.8), height*0.8);<br /></span><span style="font-size:100%;">vertex(width/2, (height*0.2));<br /></span><span style="font-size:100%;">endShape();</span><p></p><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiD3n76fbbCU42ybvmJmEQyQ6B2fR4FxxOmqcw5t8XDiP4DQAKtbznvzTsN_6wf5njeS3d5C6R2CJdd9hu04muZIQvvTOm0hHtZ9tCyZRg3TzeA-Lud2P5NoEkMMGo0Obd_zzVT0F8Fne_3/s1600-h/triange_fig_2.png"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 202px; height: 197px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiD3n76fbbCU42ybvmJmEQyQ6B2fR4FxxOmqcw5t8XDiP4DQAKtbznvzTsN_6wf5njeS3d5C6R2CJdd9hu04muZIQvvTOm0hHtZ9tCyZRg3TzeA-Lud2P5NoEkMMGo0Obd_zzVT0F8Fne_3/s320/triange_fig_2.png" alt="" id="BLOGGER_PHOTO_ID_5324501810884857538" border="0" /></a></pre><p></p><span style="font-weight: bold;font-size:85%;" ></span><br /><div style="text-align: center;"><span style="font-weight: bold;font-size:85%;" >Figure 2: TRIANGLE mode sketch example.</span><br /></div><p></p><p class="western">You should be familiar by now with the <span style="">size()</span> and <span style="">background()</span> functions. The <span style="">stroke()</span> function takes an argument from 0 to 255, with 0 being black and white being 255. The <span style="">strokeWeight()</span> function is the thickness of the line. The <span style="">noFill()</span> function ensures that the area enclosed within the shape isn't automatically filled. For example if the <span style="">noFill() </span>function were to be omitted then the display would be that of a solid white triangle. </p> <p class="western">There were two functions that I purposely left out as they require slightly more detail, the <span style="">smooth()</span> function and the <span style="">strokeJoin()</span> function. </p>Ian Welchhttp://www.blogger.com/profile/10505279500693891681noreply@blogger.com0tag:blogger.com,1999:blog-815525933388928766.post-42046886349046098622008-10-27T10:56:00.000-07:002008-10-27T14:40:25.520-07:00Hello..........My name is Ian, I am currently a Student at the Open University studying (Hard!!) for a Degree in Computing. I am also a service Desk engineer up at Panasonic on an Intern-ship for a year, where they will hopefully give me a job at the end of it!!!! (Fingers crossed.)<br /><br />I am here to help complete the Mass writing project for the Open University about Java and computer Art, of which I am looking forward to as I enjoy coding (for some bizarre reason) and hope to both bring something to the project as well as learning along the way.Ian Welchhttp://www.blogger.com/profile/10505279500693891681noreply@blogger.com0