Computational Media
Week 12 - FINAL PRESENTATION
For my final assignment, I decided to expand a project that I’ve worked on earlier this semester. For our synthetic media project for hypercinema, Anna and I created fake images of our friends using AI. To make it more interactive, I turned it into a game using p5. Otherwise, we would have to print out cards and design a whole game. Doing it by p5 sounded much more logical and more accessible. I wanted to use code so that other people can also play the game just by clicking the link. Back then, we didn’t know what callback functions were, so, I hard coded the results and the game sequence by hand.
The main problem with the initial code was it printed out the color of the answer during the next round. So, people were confused about what the colors meant. They would first get the image on the left. The buttons said “real” and “fake”. If they pressed “real”, the next image would appear with a red background because their answer would be false (see middle). And if they pressed “fake” they would get an image with a green background (see right).
To play the old version, click here!
![]()
![]()
![]()
WHAT’S YOUR SCORE?
![]()
![]()
![]()
For the most part, I used the array.map() function to make things more clear and more compact.For example, to sort ouf if an image is real or fake
this is what I did in the old version: (I hard coded the answers one by one and wrote it down in the same sequence as the image sequence.)
this is what I did in the new version: (by using one line of code, I created a boolean. If an element x of the array includes “real”, isReal becomes true.)
Therefore, I had the chance to randomize the order of the images and the game became more interesting.
I created so many functions to separate the states and the actions:
function showQuestionButtons()
function hideQuestionButtons()
function showQuestion()
function showAnswer(isCorrect)
function onRealClick()
function onFakeClick()
function showResult()
function onNext()
For my final assignment, I decided to expand a project that I’ve worked on earlier this semester. For our synthetic media project for hypercinema, Anna and I created fake images of our friends using AI. To make it more interactive, I turned it into a game using p5. Otherwise, we would have to print out cards and design a whole game. Doing it by p5 sounded much more logical and more accessible. I wanted to use code so that other people can also play the game just by clicking the link. Back then, we didn’t know what callback functions were, so, I hard coded the results and the game sequence by hand.
The main problem with the initial code was it printed out the color of the answer during the next round. So, people were confused about what the colors meant. They would first get the image on the left. The buttons said “real” and “fake”. If they pressed “real”, the next image would appear with a red background because their answer would be false (see middle). And if they pressed “fake” they would get an image with a green background (see right).
To play the old version, click here!
WHAT’S YOUR SCORE?
I cleaned up the code and made it more clear by making it more organized, modular and re-usable: Different functions are recalled multiple times, and it’s easy to turn functions on/off.
What changed my life was using callback functions! Now, when you click on an answer, your result appears as text and there’s a “next” button. By adding this state, I solved the problem that I mentioned above.
What changed my life was using callback functions! Now, when you click on an answer, your result appears as text and there’s a “next” button. By adding this state, I solved the problem that I mentioned above.
this is what I did in the old version: (I hard coded the answers one by one and wrote it down in the same sequence as the image sequence.)
- let tf = [ false, false, true, true, false, true, true, false, false, false, true, false, false, true, true, false, true, false, true, true,];
this is what I did in the new version: (by using one line of code, I created a boolean. If an element x of the array includes “real”, isReal becomes true.)
- imageURLs.map((x) => {isReal: x.includes('real')
Therefore, I had the chance to randomize the order of the images and the game became more interesting.
I created so many functions to separate the states and the actions:
function showQuestionButtons()
function hideQuestionButtons()
function showQuestion()
function showAnswer(isCorrect)
function onRealClick()
function onFakeClick()
function showResult()
function onNext()
Lipsum™
Integer turpis massa, varius ultricies est sed, aliquet feugiat enim. Nulla facilisi. Ut in justo in ex faucibus ultricies. Proin id erat quis lorem vehicula commodo. Phasellus pharetra libero pretium ultricies aliquam. Vivamus eleifend, ligula ut venenatis aliquet, massa elit efficitur lorem, fermentum molestie elit ligula in ex. Duis mauris tellus, pharetra et orci a, aliquam imperdiet augue. Pellentesque elit neque, tincidunt sit amet imperdiet eget, porta ut metus. Nulla id leo tortor. Donec elementum ac sapien eget feugiat. Donec lorem dui, vestibulum quis nisl et, feugiat mattis massa.
Phasellus Rez
Praese
Praese
Suspendía
©MMXXI
Integer turpis massa varius