Table Contents show

How to get Day of The Week Filter on Instagram

This is a Spark AR template for getting the day of week—Sunday, Monday, Tuesday…in the patch editor.

We are going to retrieve the weekday value from script and deliver it to the Patch Editor as a String (text) and a Scalar Value (number) using the script Producer Patch.

We can use the weekday values to trigger elements and events that only happen on whichever day of the week someone uses the effect.

For example: if it’s Monday, we will see the Heart Emoji; if it’s Tuesday, we see the Crying Emoji…etc. This is the filter template we will create in this tutorial; however you can use the values to trigger any event.

You can download the project for free here.

Free Download Day of Week Template

Scene Setup

Create an rectangle element for each day of the week. These will be the objects we show based on day of week.
Create Materials and Textures for those elements.
Assign names to the Materials and Textures that correspond to the days of the week. We will look for Textures by their name in the script file.

Script Bridge

Add script by pressing + Add Asset and select Script
Select the script.js and edit it’s properties in the right panel.
Add the variables we will get From Script. Make sure the type corresponds to the value we get. Text is for Strings, Number is for Scalar Values.
Click Create to add the Producer Patch to the Patch Editor. This purple object will make the dates available in the Patch Editor.

When you click Create next to Producer Patch, you should see this purple object in the Patch Editor. Now we need to hook it up in script.

Easy Day of week Filter Spark AR Template: 10 minutes 1

Script Code

Hooray JavaScript! This code goes with the variables and textures we created in the first two steps.

// How to load in modules
const Scene = require('Scene');

// Use export keyword to make a symbol available in scripting debug console
export const Diagnostics = require('Diagnostics');
const Patches = require('Patches');
const Textures = require('Textures');
const Materials = require('Materials');
const Locale = require('Locale');

// Store the unedited locale string (made up of the language_territory)
const languageAndTerritory = Locale.fromDevice;

// Log the locale string to the Console


Promise.all([

    // Find Textures with these names in Assets Panel if you want to update the DynamicWeekdayMaterial
    Textures.findFirst('Sunday'),
    Textures.findFirst('Monday'),
    Textures.findFirst('Tuesday'),
    Textures.findFirst('Wednesday'),
    Textures.findFirst('Thursday'),
    Textures.findFirst('Friday'),
    Textures.findFirst('Saturday'),

    // Material of the object whose texture we want to change
    Materials.findFirst('DynamicWeekdayMaterial'),

    // Text Object to display today as text if you want to do it in script
    Scene.root.findFirst('Weekday_Text'),


]).then(function (results) {

    // Create variables to store the results of the elements we found in the results array
    const SundayTexture = results[0];
    const MondayTexture = results[1];
    const TuesdayTexture = results[2];
    const WednesdayTexture = results[3]
    const ThursdayTexture = results[4]
    const FridayTexture = results[5];
    const SaturdayTexture = results[6];

    const DynamicWeekdayMaterial = results[7];
    const WeekdayText = results[8];

    // Load the textures in the scene into an array named textures
    // .slice will cut between the [6] and [7] index in results array
    var textures = results.slice(0, 7);

    // Get Date
    var now = new Date();

    const localeAsArray = languageAndTerritory.split('_');

    // Store the first element in the array (the language)
    const language = localeAsArray[0];
    var dayOfWeek = [];
    // Use a switch statement to say hello in the Console in the correct language
    switch (language) {
        // English
        case 'en':
            dayOfWeek[0] = 'Sunday';
            dayOfWeek[1] = 'Monday';
            dayOfWeek[2] = 'Tuesday';
            dayOfWeek[3] = 'Wednesday';
            dayOfWeek[4] = 'Thursday';
            dayOfWeek[5] = 'Friday';
            dayOfWeek[6] = 'Saturday';
            break;
        // Spanish
        case 'es':
            dayOfWeek[0] = 'domingo';
            dayOfWeek[1] = 'lunes';
            dayOfWeek[2] = 'martes';
            dayOfWeek[3] = 'miércoles';
            dayOfWeek[4] = 'jueves';
            dayOfWeek[5] = 'viernes';
            dayOfWeek[6] = 'sábado';
            break;
        // French
        case 'fr':
            dayOfWeek[0] = 'lundi';
            dayOfWeek[1] = 'mardi';
            dayOfWeek[2] = 'mercredi';
            dayOfWeek[3] = 'jeudi';
            dayOfWeek[4] = 'vendredi';
            dayOfWeek[5] = 'samedi';
            dayOfWeek[6] = 'dimanche';
            break;
        case 'pt':
            dayOfWeek[0] = 'Domingo';
            dayOfWeek[1] = 'Segunda-feira';
            dayOfWeek[2] = 'Terça-feira';
            dayOfWeek[3] = 'Quarta-feira';
            dayOfWeek[4] = 'Quinta-feira';
            dayOfWeek[5] = 'Sexta-feira';
            dayOfWeek[6] = 'Sábado';
            break;
        case 'ru':
            dayOfWeek[0] = 'Воскресенье';
            dayOfWeek[1] = 'Понедельник';
            dayOfWeek[2] = 'Вторник';
            dayOfWeek[3] = 'Среда';
            dayOfWeek[4] = 'Четверг';
            dayOfWeek[5] = 'Пятница';
            dayOfWeek[6] = 'Суббота';
            break;
        // Other
        default:
            Diagnostics.log('Device language is neither English, Spanish nor French');
            break;
    }

    // Weekday as a string (text)
    // .split will cutup the date parts into an array based the delimiter ","
    const fullDateArray = now.toDateString().split(",").join("").split(" ");

    var weekdayNumber = now.getDay();
    var monthNumber = now.getMonth();
    var dateNumber = now.getDate();
    var yearNumber = now.getFullYear();

    // Declare dates as strings
    var weekdayString = dayOfWeek[weekdayNumber]; 
    var monthString = fullDateArray[1];
    var dateString = fullDateArray[2];
    var yearString = fullDateArray[3];

    // Print the strings in the console
    //Diagnostics.log(weekdayString.concat(" ", monthString," ",dateString," ",yearString));

    // Optional: Use DynamicWeekdayMaterial Texture on objects to set texture dynamically
    DynamicWeekdayMaterial.diffuse = textures[weekdayNumber];

    // Optional: Set the WeekDayText to the dayString
    //WeekdayText.text = dayString;

    // Send values to Patch Editor script.js producer patch
    Patches.inputs.setString('WeekdayString', weekdayString);
    Patches.inputs.setScalar('WeekdayNumber', weekdayNumber);

    Patches.inputs.setString('MonthString', monthString);
    Patches.inputs.setScalar('MonthNumber', monthNumber);

    Patches.inputs.setString('DateString', dateString);
    Patches.inputs.setScalar('DateNumber', dateNumber);

    Patches.inputs.setString('YearString', yearString);
    Patches.inputs.setScalar('YearNumber', yearNumber);
});

Effect Result

Day of the Week Spark AR Template Result

We can use the numbers we set from the script to trigger events.

In the patch above, if the weekday number—which is a number 0-6—Equals Exactly the value we test against, then a boolean signal is true. We can use the boolean signal to control visibility of objects and trigger events.

Ideas

Create an effect variation for each day of the week to surprise fans.
Create seasonal variations using months; an iconic character could wear a Santa Claus hat in December and straw hat in August, for example.
Outfit or look of the day that changes day to day.