Help in creating a "Guess the Gibberish" filter

I’m an intern working on a filter to promote a product on Tiktok. We want to create a filter similar to the viral “Guess the Gibberish” filter from a few years back. I was able to create the filter in another program, but I am having trouble replicating it in Effect House. Basically, we have a pool of “gibberish” phrases and their corresponding answers. After a 2-second delay upon video recording, we want the gibberish to display on screen for several seconds with a countdown timer, then disappear and show the answer, and we want at least 5 rounds of different random phrases. I’ve figured out how to do one round, but in the successive rounds, my answers get mixed up even though I have the image files named the same between gibberish and answer. I would also like to program the phrases to be random without any repeats during a recording. I’ve been trying to build this from scratch, but would it be easier to start with a template or modify an interaction such as the “Tap Screen to Cycle Image Textures”? Any advice or suggestions would be appreciated. Thank you.

5 Likes

Hey! I will be happy to give a hand would you please message me for more info?

2 Likes

Hi there! I see you’re working on a “Guess the Gibberish” filter and having some trouble with multiple rounds and randomization. Here are some steps and tips that might help you:

Steps to Create the Filter

  1. Start with the Randomizer 2D Template:
  • Open Effect House and select the “Randomizer 2D” template. This template is ideal for creating effects that display random images or text sequences.
  • You can find a detailed tutorial on how to use this template here: 2D Randomizer Template on Effect House
  1. Import Your Images:
  • Prepare your “gibberish” phrases and corresponding answers as image files. Ensure that the images are of the same size to avoid errors.
  • Import these images into Effect House by right-clicking in the Assets panel and selecting “Import New Folder” to import a texture sequence
  1. Set Up the Animation Sequence:
  • In the template, locate the “Animation Sequence” component. Load your images into this sequence, ensuring that each “gibberish” phrase is followed by its corresponding answer.
  • Adjust the timing so that the “gibberish” phrase displays for a few seconds before switching to the answer. You can do this by setting the delay and duration in the Inspector panel
  1. Handle Multiple Rounds:
  • To manage multiple rounds without repeats, you can use a script to randomize the selection of phrases. Ensure that each phrase is only used once per recording session.
  • This tutorial on creating multiple randomizers might be helpful: How To Create Multiple Randomizers in TikTok Effect House
  1. Test and Refine:
  • Test your filter to ensure that the phrases and answers are displayed correctly and that there are no repeats within a single recording.
  • Make any necessary adjustments to improve the user experience.

Additional Tips

  • Use a Timer Node: To control the timing of the display, you can use a “Wait for Seconds” node to delay the appearance of the answer after the “gibberish” phrase

  • Randomization Logic: Implement logic to ensure that each phrase is selected randomly and not repeated. This can be done using a list to track used phrases and removing them from the pool once displayed

I hope these steps help you create your filter! If you have any more questions or need further assistance, feel free to ask. Good luck with your project!

I am open to a collaboration, if you want to collaborate with me, please send me a DM!

1 Like

Hi, thanks for the suggestion! I just wanted clarification on importing the “gibberish” and corresponding answers. Right now I have the gibberish and answers in separate folders and named with corresponding numbers. Should I combine them into one folder and name them numerically in ascending order (i.e. first gibberish phrase is named “1”, it’s corresponding answer “2”, and so on)? Or should the filenames be the same as the phrase displayed? Also, how would I go about creating a list to track used phrases? Would I need to create a variable that records strings? Thanks.

Hi hawaiiverse!

for managing “gibberish” phrases and their corresponding answers, it’s essential to streamline the process for efficiency and ease of use during development. Here’s a structured approach to handle your files and track used phrases:

Organizing Gibberish Phrases and Answers

  1. Combine into One Folder: It’s a good practice to keep all related assets in one folder for easier management. This way, you won’t have to navigate through multiple folders to find pairs of gibberish phrases and their answers.

  2. Naming Convention: Naming files numerically (e.g., “1_gibberish”, “1_answer”, “2_gibberish”, “2_answer”, etc.) is a straightforward approach that keeps related files together and ensures a clear relationship between each gibberish phrase and its corresponding answer. This method is preferred over using the actual phrase as the filename, which could become cumbersome due to length, special characters, or duplicates.

To track which phrases have been used, you can implement a simple system within your Effect House project, I’m thinking about the easiest method I can think of and I’ll write it here shortly…

Organizing Gibberish Phrases and Answers

  1. Combine Files in One Folder: Place all your gibberish phrases and corresponding answers in a single folder for easier management. Name them using a consistent naming convention, such as 1_gibberish, 1_answer, 2_gibberish, 2_answer, etc., to keep related files together.
  2. Use JSON for Storing Phrases and Answers: Consider storing your gibberish phrases and answers in a JSON file. This approach simplifies accessing and managing pairs of data. Your JSON structure could look like this:

json :point_down:

[
  {
    "id": 1,
    "gibberish": "Example gibberish phrase",
    "answer": "Corresponding answer"
  },
  {
    "id": 2,
    "gibberish": "Another gibberish example",
    "answer": "Its answer"
  }
]

Tracking Used Phrases

To ensure phrases are not repeated during a recording, implement a tracking system:

  1. Initialize a List or Array:

javascript :point_down:

let usedPhrases = [];
  1. Record Usage:

javascript :point_down:

function markPhraseAsUsed(id) {
    if (!usedPhrases.includes(id)) {
        usedPhrases.push(id);
    }
}
  1. Check Before Use:

javascript :point_down:

function isPhraseUsed(id) {
    return usedPhrases.includes(id);
}
  1. Resetting the List:

javascript :point_down:

function resetUsedPhrases() {
    usedPhrases = [];
}

Implementing the Filter Logic

  1. Load Phrases and Answers: At the start of your Effect House script, load the JSON file containing your gibberish phrases and answers. Parse this file to access the data.
  2. Display Gibberish and Answers: For each round, randomly select a phrase-answer pair from your JSON data that hasn’t been used yet. Use the markPhraseAsUsed function to track its usage.
  3. Implementing Rounds: Implement a counter to track the number of rounds. After displaying a gibberish phrase and its answer, increment this counter. Once it reaches 5 (or your desired number of rounds), you can reset the game or end the filter experience.
  4. Dynamic Content Loading: If possible, dynamically load content based on user interaction or other triggers to enhance the experience. Ensure to handle loading states and errors gracefully.

Additional Tips

  • Testing: Thoroughly test your filter to ensure that phrases and answers display correctly and that no phrase is repeated during a single recording session.
  • Optimization: Optimize your script for performance to ensure a smooth user experience, especially when loading and parsing data.

By following these detailed instructions, you can create an engaging and functional “Guess the Gibberish” filter in Effect House for TikTok, providing users with a fun and interactive challenge.

@Reality.Life Can I ask you about your usgae of javascript above was just for pure explanation or there is a way in effect house to use it?

Yes @Monsieur_Ganga, you are right, the usage of JavaScript mentioned in the previous response was purely for explanatory purposes, this can be understood from the example suggested to @hawaiiverse that it’s using images onlly without text.

Currently, Effect House does not support JavaScript or any other text-based scripting languages directly within its platform. Effect House primarily utilizes a node-based scripting system, which allows creators to build effects through visual scripting. This method involves arranging and connecting blocks called nodes to create flows of logic without writing traditional code… but this is like a sort of remember for the Managing Tik Tok Team where the community discussions and feature requests on the Effect House forum indicate a strong desire among users for the inclusion of JavaScript or other written scripting languages to enhance the platform’s capabilities. Many users believe that written scripting would significantly reduce the time it takes to create scripts and make the platform more accessible to those with coding skills.

Perhaps I think that with the arrival of Tik Tok’s AI in the alpha phase something will change, who knows…

1 Like

Thank you for the great answer and I can’t agree more : any traditional code language especially the commonly used will be a plus for the effects creators

1 Like

Also, how would I go about creating a list to track used phrases? Would I need to create a variable that records strings?

This is another good tip for simulate the arrays…

1 Like

Last shot… keep an eye also to this :space_invader: example:

Thank you all for the replies and suggestions! The JavaScript method is a bit beyond the scope of my current abilities, but I will make note of it in case Effect House implements functionality for it down the line or if I decide to return to this project in another program that supports written code. Attached are screenshots at my first attempt to build this filter from scratch for reference:



It’s pretty rudimentary; I basically just have “Set Visibility”, “Timer”, “Animated Texture Player”, and “Set Animated Texture” nodes to toggle the visibility of the separate Head tracker planes and to control the frames of the texture sequences, with “Wait for Seconds” nodes used to stagger the execution between each visual asset. The main issue I was running into was the answer not matching the gibberish automatically. I suspected that since my gibberish and answer files were in separate folders and in separate texture sequences, that was the reason that my answers did not correspond to gibberish when testing the filter. However, I couldn’t think of a way to connect the two sequences together through an execution node. Putting both the gibberish and answers into one folder might help with that. I’ll try to play around with both my original attempt and with the 2D Randomizer template. If anyone has anymore ideas, please feel free to share them! I have to do a write-up of my process anyways so other interns can replicate this project, and I would like to share what I learned with others on this forum as well since I couldn’t find any tutorials online pertaining to this specific type of filter in Effect House. Thank you.

1 Like

You have done a great job, and your project will definitely serve as an excellent reference for everyone. Thank you for thinking about sharing your project once it is completed. The community truly needs contributions like this to help us all learn and improve our skills together. Good luck with your future endeavors! If I come across any tutorials or ready-made effects that have this kind of logic, I will definitely come back to report it! If you need further assistance or have more questions, feel free to ask!

2 Likes