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.
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.
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
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.
Please follow and like us:
