Concept Algorithmic Place CONNECT THE DOTS Video Doc Demo Day Development Process Algorithmic Place We had a LOT of ideas & after sorting them we realised that we could group them into these 3 main groups. Further developments were then explored on the ideas that have potential while keeping in mind the short timeline. After a very long deliberation of what to work on, we quickly whip transition state diagrams to guide us as a form of checklist of what needs to be done. In general, we only had these 4 main items that needed to be coded out - which Wing & I split up to tackle different portions so as to speed things up while Mathieu helped us with creating the assets & compiling the x & y positions of all the buttons We finished up the project way earlier than expected, so I figured we could push it further. With the amount of free time we had, I pushed for us to tweak/ add these simple features to create a smoother experience! Fading effect Arc frame Progress Bar Colours 1 Interaction ideation stage 4 Coding time! 3 State transition diagram 2 Expansion on ideas 5 Further iterations Challenges Algorithmic Place Fading effect Figuring out 2-D array This was purely a cosmetic problem that was self inflicted... but I really wanted this fading effect and it was the toughest one to get through :”) I followed an example online but couldn’t get it for some reason and pras kindly explained to me how this opacity feature works <3 Our artworks before this appeared like BAM which to me was too harsh.. which led me to explore fading effect. We didn’t know how to remove the buttons before the picture appears without having the need to “remake” the points again. Hence we made a quick fix by shifting the buttons to be pressed way out of the canvas points to prevent users to see & accidentally activating the button. This way the artwork can appear without any unnecessary distractions. Can’t remove buttons... While we figured out the interaction quite easily, we had quite a hard time connecting the different array sets together. After a long SOS session, we solved this problem by having the following variables: äæ currentAr which indicate which set of points & painting it is calling.Û âæ buttonIndex which indicate which point is being called. Improvements | Next Steps! Algorithmic Place I think it would be interesting to explore incorporating brushstokes into the project, so instead of just a normal line stroke, the artworks are “drawn” or “revealed” with the actual brush stroke of the painting. This way it raise awareness of not just the artwork but the painter’s style as well. Knowing that this project is highly doable to be an actual thing, if I were to actually create this project I would feel that adding an extra feature of “See others” like a compiled data after they play instead of forcing user to keep playing to find new info would be great to prevent fatigue in interaction :D i.e after finishing one connect the dot there is a “See others” like a summary for visitors to get info quickly :D I think that one last thing to explore in my opinion would be to explore machine learning that could create & store xy values of points automatically regardless of whether the input is a picture or any other kind of visuals! This way the same code can be reused easily yay :D In general, this time round I am much happier with the work distribution and I would not have done anything differently. So this page would be what I would add on to further improve the project if I had more time and resources.