Multiple-target-Cycling-Colours-Openframeworks/index.html at master · alecesana/Multiple-target-Cycling-Colours-Openframeworks · GitHub

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
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<!doctype html>

<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">


<style>

* {
    font-family: 'Roboto', sans-serif;

 color:black;
}

body{
  background:#ffffff;
  align-content: center;
  overflow-x: hidden;

}

header{
  justify-content: center;
  position:relative;
  text-align:center;
}

iframe{
  max-width:600px;
  min-width:170px;
  z-index:0;
}

.videodiv{
  z-index:0;
  text-align:center;
  justify-content:center;
}


.section{
  width:100%;
  position:relative;
  margin:1%;
  justify-content: center;
  text-align:center;
}
.sectionparagraph{
  display:inline-block;
  font-size:21px;
  font-weight: 500;
  line-height: 30px;
  color:black;
  width:62%;
  text-align:left;
}

h1{
  font-size:35px;
  font-weight: bold;
}

@media (max-width: 1100px)
  {

h1{
  font-size:30px;
}


.sectionparagraph{
  width:90%;
}
iframe{
  min-width:80px;
  width:90%;
}

}
</style>

<body>
    <header>
      <h1>Multi Target Cycling Colours with Openframeworks</h1>
    </header>
    <div class="section">


    <p class = "sectionparagraph">I wrote this code to share the principles behind the smooth colour changing function used in my interactive work.


            </p>

            <div class = "videodiv">
                <iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/MnovAtLpakw?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

              </div>
              <p class = "sectionparagraph">
                  The code in the repository is a non general version of the code written for the Australian Open 2017 interactive installation, restricting the blending across three colours.
                  The main source files to look at are <a href = "https://github.com/alecesana/Multiple-target-Cycling-Colours-Openframeworks/blob/master/src/MultiTargetColourCycling.h">MultiTargetColourCycling.h</a> and <a href = "https://github.com/alecesana/Multiple-target-Cycling-Colours-Openframeworks/blob/master/src/MultiTargetColourCycling.cpp">MultiTargetColourCycling.cpp</a>.
              </br></br>
                  The core of the colour swap happens in the update() section of MultiTargetColourCycling.cpp, using <a href = "https://openframeworks.cc/documentation/types/ofColor/#show_lerp">lerp()</a>, <a href = "https://en.cppreference.com/w/c/numeric/math/fmod">fmodf()</a>, <a href = "https://openframeworks.cc/documentation/utils/ofUtils/#show_ofGetElapsedTimef"> OfGetElapsedTimef()</a> to blend the three chosen colors
                  between sub-groups of three objects in a timely manner, and can be virtually applied to any number of objects .
            </br></br>
           Applying some simple object oriented programming iteration (also shared in the repository) the resulting output will be:

                  </p>

            <div class = "videodiv">
            <iframe width="560" height="315" src="https://www.youtube.com/embed/87YJURlgRxY" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
            </div>


        </br>

        <p class = "sectionparagraph">
                The resulting  visual effect is the color shades "moving" across groups
                of objects .
                Observing a single circle object will reveal the cycling nature of the
                effect in blending the colours in a distributed way.
                The effect can be also noticed choosing one shade of the colour currently on screen
                and observing it blending along to the other objects.
      </br></br>
              If your goal is to iterate between more than three colours or affect the timing of the swap
              you'll need to modify the function (shared under MIT Licence).</br></br>

              Adding a third dimension, iterating across different objects, using <a href = "https://openframeworks.cc/documentation/3d/ofNode/" >ofNode</a>,some rotations and adding sound reactivity could result in something more interesting, like these 3D mandala shapes
                    </p>

                    <div class = "videodiv">
                    <iframe width="560" height="315" src="https://www.youtube.com/embed/TfCKxHwxRm0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
                    </div>


    <p class = "sectionparagraph">


            In more general terms, these concepts can be used to apply properties comprised of multiple(>2) steps to groups of objects
            in a cycling and distributed way.
    </br></br>
    Go to the <a href = "https://github.com/alecesana/Multiple-target-Cycling-Colours-Openframeworks/tree/master/src">full source code</a>
  </br></br>
    Go <a href = "https://github.com/alecesana"> back to Github profile</a>
  </p>


            </div>