1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78

//==============================================================================
// References
// https://fb.me/timemodule
// https://fb.me/audiomodule#audio-playback-controller
// https://fb.me/tiled-sdf-patch
// https://fb.me/bridging
// Project setup:
// 2D-3D audio visualizer that retrieves scalar signal values from the patch editor 
// and with a Signed Distance Field creates a texture that modifies the scale of the 
// pattern based on the audio input 
// there is a pulsing color as background image 
// there is a gradient color the generated SDF texture and on the user profile 
// remove the comments if you use it for personal project. 
// this script handles the audio shader 
//==============================================================================
// REQUIRED MODULES 
const Materials = require('Materials');
const Reactive = require('Reactive');
const Shaders = require('Shaders');
const Time = require('Time');
const Patches = require('Patches');
const Scene = require('Scene');
//==============================================================================
// assignments 
// get the audio value from the patch editor 
let myAudioValue = Patches.getScalarValue('AudioValue');
// get the material value from the patch editor 
(async function() {
  // Targeted Material
  var [material] = await Promise.all([
    Materials.findFirst('material0'),
  ]);
//==============================================================================
  // PARAMETERS 
  // SDF circle parameters starter 
  const center = Reactive.pack2(0.05,0.05);
  // set interactive radius 
  let radius = 0.05;
  // 
  radius = myAudioValue;
  // adjust the radius 
  var radius2 = Reactive.mul(myAudioValue,0.07);
  // create a sdf circle with the previous center and radius 
  const halfSize = Reactive.pack2(radius2,radius2);
  var sdfRect = Shaders.sdfRectangle(center,halfSize,{sdfVariant: Shaders.SHARP});
  // COLOR 
  // assign color to circle with mix sdf 
  const sdfMix = Shaders.sdfMix(sdfRect,0,0.993);
  // set the repating parameters 
  const pivot = Reactive.pack2(0.05,0.05);
  const size = Reactive.pack2(0.09,0.09);
  // repeat the circle using repeat sdf 
  const sdfRepeat = Shaders.sdfRepeat(sdfMix,pivot,size);
  // create a step parameter 
  const step = Reactive.step(sdfRepeat,0);
  // create the gradient
  const gradient = Shaders.gradient({"type" : Shaders.GradientType.VERTICAL});
  // create two colors 
  var color1 = Reactive.pack4(1,0.57,0,1);
  var color2 = Reactive.pack4(1,0.25,1,1);
  // create a mix of the two colors using a gradient 
  const mix1 = Reactive.mix(color1,color2,gradient);
  // create a third color 
  const color3 = Reactive.pack4(0.5,0,3,1);
  // set time parameters 
  // PULSE
  const ct = Reactive.mul (Time.ms ,0.001);
  const curve = Reactive.abs (Reactive.sin(ct));
  // Coordinate modulation of color based on time r,g,b,a
  const modulationColor = Reactive.pack4(0,0,curve,1);
  const finalColor = Reactive.mul (color3 ,modulationColor);
  // Create the second mix
  var mix2 = Reactive.mix(mix1,finalColor,step);
  // ASSIGN
  //==============================================================================
  const textureSlot = Shaders.DefaultMaterialTextures.DIFFUSE;
    material.setTexture(mix2, {textureSlotName: textureSlot});
})();

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

// Set random date and update Text Object 
//==============================================================================
// REQUIRED MODULES
const Scene = require('Scene');
const Patch = require('Patches');
export const Diagnostics = require('Diagnostics');
//==============================================================================
// ASSIGNMENTS
var textToUpdate= Scene.root.child('Device').child('Camera').child('Focal Distance').child('faceTracker0').child('baseCanvas').find('textUpdate');
var updatePulse = Patch.getPulseValue('updatePulse');
var day,month,year;
// GET VALUES FROM PATCH 
day = Patch.getScalarValue('day');
month = Patch.getScalarValue('month');
year = Patch.getScalarValue('year');
//
var finalDay, finalMonth, finalYear;
finalDay = 0;
finalMonth = 0;
finalYear = 0;
//
var textFinal  = "";
//==============================================================================
// SUBSCRIBE SINGLE VALUES 
day.monitor().subscribe(
	val =>{
		finalDay = val.newValue;
})

month.monitor().subscribe(
	val =>{
		finalMonth = val.newValue;
})

year.monitor().subscribe(
	val =>{
		finalYear = val.newValue;
})
//==============================================================================
// UPDATE 
updatePulse.subscribe( function (e) {
	textFinal = finalDay + "   " + finalMonth + "   " + finalYear;
	textToUpdate.text = " " + textFinal;
});