{"id":349,"date":"2010-02-03T12:22:44","date_gmt":"2010-02-03T18:22:44","guid":{"rendered":"http:\/\/www.tamarziv.com\/itp\/?p=349"},"modified":"2010-02-03T19:34:32","modified_gmt":"2010-02-04T01:34:32","slug":"w02-pixel-x-pixel","status":"publish","type":"post","link":"https:\/\/www.tamarziv.com\/itp\/w02-pixel-x-pixel\/","title":{"rendered":"W02-Pixel x Pixel"},"content":{"rendered":"

Triangles<\/a> | Download the apps<\/a><\/p>\n

PXP<\/p>\n

Basically starting off the animated circles example, but using triangles, a random position for one vertex, and two animated vertexes shared by all triangles, when the two shared vertexes combine, the triangle becomes a line and therefore create a gradation and shift into white.
\n<\/br>
\n<\/br><\/p>\n

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<\/div><\/td>
\/*      ITP Pixel by Pixel
\n        circles
\n        move mouse to interact
\n        Danny Rozin 2009
\n*\/<\/span>
\n
\n#include "testApp.h" <\/span>
\n
\n\/\/**** if you are lazy you can put some global variables here, but it is bad practice and will not work for complex data types (put in testApp.h)  ********<\/span>
\nconst<\/span> int<\/span> numOfCircles=<\/span>1000<\/span>;<\/span>                                        \/\/ creating a constant integer and giving it a value, <\/span>
\n                                                                    \/\/ In C when you create an array you have to give it a constant not a variable<\/span>
\nint<\/span> positionsX[<\/span>numOfCircles]<\/span>, positionsY[<\/span>numOfCircles]<\/span>;<\/span>             \/\/ two arrays to hold the locations of our circles<\/span>
\nfloat<\/span> angle =<\/span> 0<\/span>;<\/span>
\n\/\/ ofTriangle(float x1, float y1, float x2, float y2, float x3, float y3)<\/span>
\n
\n\/\/************** Everything you want to happen once in the begining, but don't draw anything to the screen here a it will not work ****************<\/span>
\nvoid<\/span> testApp::<\/span>setup<\/span>(<\/span>)<\/span>{<\/span>   
\n    ofBackground(<\/span>255<\/span>,255<\/span>,255<\/span>)<\/span>;<\/span>                                          \/\/ background color <\/span>
\n    ofSetColor(<\/span>0<\/span>,0<\/span>,0<\/span>,10<\/span>)<\/span>;<\/span>                                                   \/\/ color of lines and fills<\/span>
\n    ofEnableAlphaBlending(<\/span>)<\/span>;<\/span>  
\n    ofEnableSmoothing(<\/span>)<\/span>;<\/span>  
\n    ofSetLineWidth(<\/span>2<\/span>)<\/span>;<\/span>  
\n   
\n    for<\/span>(<\/span>int<\/span> i =<\/span> 0<\/span>;<\/span>i<<\/span> numOfCircles;<\/span>i++<\/span>)<\/span>{<\/span>                                 \/\/ we want our random positions to stay the same, so we put them into our <\/span>
\n        positionsX[<\/span>i]<\/span>=<\/span> ofRandom(<\/span>-<\/span>ofGetWidth(<\/span>)<\/span>*<\/span>2<\/span>,ofGetWidth(<\/span>)<\/span>*<\/span>2<\/span>)<\/span> ;<\/span>                       \/\/ global arrays, otherwise, the circles would randomize every frame and it would flicker<\/span>
\n        positionsY[<\/span>i]<\/span>=<\/span> ofRandom(<\/span>-<\/span>ofGetHeight(<\/span>)<\/span>*<\/span>2<\/span>,ofGetHeight(<\/span>)<\/span>*<\/span>2<\/span>)<\/span> ;<\/span>
\n    }<\/span>
\n}<\/span>
\n
\n
\n
\n\/\/********************************************* Code in draw() executes every frame,  **********************************************************<\/span>
\nvoid<\/span> testApp::<\/span>draw<\/span>(<\/span>)<\/span>{<\/span>  
\n   
\n    if<\/span> (<\/span>angle <=<\/span> 360<\/span> )<\/span> {<\/span>
\n    float<\/span> r =<\/span> 30.0f<\/span>;<\/span>
\n    float<\/span> theta =<\/span> angle;<\/span>
\n    float<\/span> radians =<\/span> (<\/span>angle *<\/span> pi)<\/span>\/<\/span>180.0<\/span>;<\/span>
\n    float<\/span> offSetCenterX =<\/span> r *<\/span> cos<\/span>(<\/span>radians)<\/span>;<\/span>
\n    float<\/span> offSetCenterY =<\/span> r *<\/span> sin<\/span>(<\/span>radians)<\/span>;<\/span>
\n   
\n   
\n    \/\/ float offSetCenterX = 20 ;<\/span>
\n    for<\/span>(<\/span>int<\/span> i=<\/span>0<\/span>;<\/span>i<<\/span>numOfCircles;<\/span>i++<\/span>)<\/span>{<\/span>   
\n    float<\/span> distance =<\/span> sqrt<\/span>(<\/span>(<\/span>positionsX[<\/span>i]<\/span>-<\/span> mouseX)<\/span>*<\/span> (<\/span>positionsX[<\/span>i]<\/span>-<\/span> mouseX)<\/span>  +<\/span>   (<\/span>positionsY[<\/span>i]<\/span>-<\/span> mouseY)<\/span>*<\/span> (<\/span>positionsY[<\/span>i]<\/span>-<\/span> mouseY)<\/span>)<\/span> ;<\/span>
\n       
\n        ofFill(<\/span>)<\/span>;<\/span>                                                           \/\/ turn the fill on, we want black circles<\/span>
\n        ofSetColor(<\/span>0<\/span>,0<\/span>,0<\/span>)<\/span>;<\/span>
\n        \/\/ ofSetColor(255-distance\/3,255-distance\/3,255-distance\/3);        \/\/ just for fun, make the circles darker as they grt distant<\/span>
\n        \/\/ofCircle(positionsX[i] ,positionsY[i],distance\/ 10);          <\/span>
\n       
\n        ofTriangle(<\/span>positionsX[<\/span>i]<\/span>, positionsY[<\/span>i]<\/span>, ofGetWidth(<\/span>)<\/span>\/<\/span>2<\/span>-<\/span>offSetCenterX-<\/span>r\/<\/span>2<\/span>, ofGetHeight(<\/span>)<\/span>\/<\/span>2<\/span>-<\/span>offSetCenterX-<\/span>r\/<\/span>2<\/span>, mouseX, mouseY)<\/span>;<\/span>
\n        \/\/ofTriangle(positionsX[i], positionsY[i], ofGetWidth()\/2, ofGetHeight()\/2, mouseX, mouseY);<\/span>
\n
\n        ofNoFill(<\/span>)<\/span>;<\/span>                                                         \/\/ turn the fill of, we want to draw a white line around each circle<\/span>
\n        ofSetColor(<\/span>255<\/span>,255<\/span>,255<\/span>,255<\/span>)<\/span>;<\/span>                                               
\n        ofTriangle(<\/span>positionsX[<\/span>i]<\/span>, positionsY[<\/span>i]<\/span>, ofGetWidth(<\/span>)<\/span>\/<\/span>2<\/span>-<\/span>offSetCenterX-<\/span>r\/<\/span>2<\/span>, ofGetHeight(<\/span>)<\/span>\/<\/span>2<\/span>-<\/span>offSetCenterX-<\/span>r\/<\/span>2<\/span>, mouseX, mouseY)<\/span>;<\/span>
\n        \/\/ofTriangle(positionsX[i], positionsY[i], ofGetWidth()\/2, ofGetHeight()\/2, mouseX, mouseY);<\/span>
\n        \/\/ofTriangle(positionsX[i], positionsY[i], ofGetWidth()\/2, ofGetHeight()\/2, mouseX, mouseY);<\/span>
\n       
\n        \/\/ofCircle(positionsX[i] ,positionsY[i],distance\/ 10);      <\/span>
\n       
\n        angle +<\/span>=<\/span> 0.001<\/span>;<\/span>
\n    }<\/span>}<\/span> else<\/span> {<\/span>angle =<\/span> 0<\/span>;<\/span>}<\/span>                                                                                                   
\n                                                                                               
\n                                                                                                                                                                                                                                                                                                                                                \/\/ display the result on the screen <\/span>
\n    printf<\/span>(<\/span>"%f \\n<\/span>"<\/span>, ofGetFrameRate(<\/span>)<\/span>)<\/span>;<\/span>                                      \/\/ put the frame rate into the console <\/span>
\n}<\/span>
\n
\n
\n
\n
\n\/\/**************** Code in update() execute every frame, but don't draw anything here cause it won't work, in general put most stuff into draw() *************<\/span>
\nvoid<\/span> testApp::<\/span>update<\/span>(<\/span>)<\/span>{<\/span>}<\/span>
\n
\n\/\/--------------------------------------------------------------<\/span>
\nvoid<\/span> testApp::<\/span>keyPressed<\/span>  (<\/span>int<\/span> key)<\/span>{<\/span> }<\/span>
\n
\n
\n\/\/--------------------------------------------------------------<\/span>
\nvoid<\/span> testApp::<\/span>keyReleased<\/span>(<\/span>int<\/span> key)<\/span>{<\/span>  }<\/span>
\n
\n\/\/--------------------------------------------------------------<\/span>
\nvoid<\/span> testApp::<\/span>mouseMoved<\/span>(<\/span>int<\/span> x, int<\/span> y )<\/span>{<\/span> }<\/span>
\n
\n\/\/--------------------------------------------------------------<\/span>
\nvoid<\/span> testApp::<\/span>mouseDragged<\/span>(<\/span>int<\/span> x, int<\/span> y, int<\/span> button)<\/span>{<\/span>}<\/span>
\n
\n\/\/--------------------------------------------------------------<\/span>
\nvoid<\/span> testApp::<\/span>mousePressed<\/span>(<\/span>int<\/span> x, int<\/span> y, int<\/span> button)<\/span>{<\/span>   }<\/span>
\n
\n\/\/--------------------------------------------------------------<\/span>
\nvoid<\/span> testApp::<\/span>mouseReleased<\/span>(<\/span>)<\/span>{<\/span>  }<\/span><\/div><\/td><\/tr><\/tbody><\/table><\/div>\n","protected":false},"excerpt":{"rendered":"

Basically starting off the animated circles example, but using triangles, a random position for one vertex, and two animated vertexes shared by all triangles, when the two shared vertexes combine, the triangle becomes a line and therefore create a gradation and shift into white.<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"ngg_post_thumbnail":0,"footnotes":""},"categories":[12],"tags":[],"class_list":["post-349","post","type-post","status-publish","format-standard","hentry","category-pxp"],"_links":{"self":[{"href":"https:\/\/www.tamarziv.com\/itp\/wp-json\/wp\/v2\/posts\/349","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.tamarziv.com\/itp\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tamarziv.com\/itp\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tamarziv.com\/itp\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tamarziv.com\/itp\/wp-json\/wp\/v2\/comments?post=349"}],"version-history":[{"count":17,"href":"https:\/\/www.tamarziv.com\/itp\/wp-json\/wp\/v2\/posts\/349\/revisions"}],"predecessor-version":[{"id":386,"href":"https:\/\/www.tamarziv.com\/itp\/wp-json\/wp\/v2\/posts\/349\/revisions\/386"}],"wp:attachment":[{"href":"https:\/\/www.tamarziv.com\/itp\/wp-json\/wp\/v2\/media?parent=349"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tamarziv.com\/itp\/wp-json\/wp\/v2\/categories?post=349"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tamarziv.com\/itp\/wp-json\/wp\/v2\/tags?post=349"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}