Tuesday, December 19, 2017

Scripting for the Web Final

I spent a lot of time working on my updated portfolio website this semester. Here's an excerpt of the reflection post I wrote (because the actual post is really long):

"Originally, this whole redesign was done to satisfy requirements for a professional development class I was taking. I didn’t intend to change as much as I did, but rather make some minor adjustments. However, I didn’t account for the fact that there were two major things have changed since I last redesigned my portfolio. First, my main focus has changed from attempting to acquire commercial work to getting a full-time job. Second, photography has grown from something I was dabbling in to a real hobby. I needed an aesthetic that would better show off my modern and professional design sense and a system to naturally integrate my photography."

The full post may be viewed here: http://emilyserven.net/2017/12/19/blog-development-3.html

Saturday, December 16, 2017

Scripting for the Web

Hi Everyone,

Over the past few months, I have been working on a number of projects that incorporate scripting for the web.

I contribute to multiple private repositories as well as my personal public repository which can be found at github.com/mtgagliano.

Live examples of my design and development work can be found at Veritonic and my personal website MattGagliano.com.

Feel free to browse my work and reach out via the social channels posted on my website!

Matt

Monday, December 11, 2017

Tuesday, December 5, 2017

SFTW - Final Project - Castillo

Github link --- With README

THIS LINK ABOVE is for submission requirement part 2 of the email Pat sent out for SFTW
 --- Submit an link of your site ON THE BLOG.

Thursday, November 16, 2017

Procedural City made in 100 lines of Javascript

http://jeromeetienne.github.io/threex.proceduralcity/examples/demo.html A city procedurally generated using three.js I was originally going to procedurally generate terrain for my midterm using the plerin-noise function. I found the method used here an interesting alternative.

Saturday, October 21, 2017

REINFORCE JS

http://cs.stanford.edu/people/karpathy/reinforcejs/http://cs.stanford.edu/people/karpathy/reinforcejs/

About

REINFORCEjs is a Reinforcement Learning library that implements several common RL algorithms supported with fun web demos, and is currently maintained by @karpathy. In particular, the library currently includes:

Dynamic Programming

For solving finite (and not too large), deterministic MDPs. The solver uses standard tabular methods will no bells and whistles, and the environment must provide the dynamics.

Right: A simple Gridworld solved with a Dynamic Programming. Very exciting. Head over to the GridWorld: DP demo to play with the GridWorld environment and policy iteration.

Tabular Temporal Difference Learning

Both SARSA and Q-Learning are included. The agent still maintains tabular value functions but does not require an environment model and learns from experience. Support for many bells and whistles is also included such as Eligibility Traces and Planning (with priority sweeps).

Deep Q Learning

Reimplementation of Mnih et al. Atari Game Playing model. The approach models the action value function Q(s,a) with a neural network and hence allows continuous input spaces. However, with a fixed number of discrete actions. The implementation includes most of the bells and whistles (e.g. experience replay, TD error clamping for robustness).

Policy Gradients

The implementation includes a stochastic policy gradient Agent that uses REINFORCE and LSTMs that learn both the actor policy and the value function baseline, and also an implementation of recent Deterministic Policy Gradients by Silver et al. To make a lot of this happen (e.g. LSTMs in particular), the library includes a fork of my previous project recurrentjs, which allows one to set up graphs of computations over matrices and perform automatic backprop.
I do not include the demo for policy gradient methods because the current implementations are unfortunately finicky and unstable (both stochastic and deterministic). I still include the code in the library in case someone wants to poke around. I suspect that either there are bugs (It's proving difficult to know for sure), or I'm missing some tips/tricks needed to get them to work reliably.

Example Library Usage

Including the library (currently there is no nodejs support out of the box):
<script type="text/javascript" src="lib/rl.js"></script>
For most applications (e.g. simple games), the DQN algorithm is a safe bet to use. If your project has a finite state space that is not too large, the DP or tabular TD methods are more appropriate. As an example, the DQN Agent satisfies a very simple API:

// create an environment object
var env = {};
env.getNumStates = function() { return 8; }
env.getMaxNumActions = function() { return 4; }

// create the DQN agent
var spec = { alpha: 0.01 } // see full options on DQN page
agent = new RL.DQNAgent(env, spec); 

setInterval(function(){ // start the learning loop
  var action = agent.act(s); // s is an array of length 8
  //... execute action in environment and get the reward
  agent.learn(reward); // the agent improves its Q,policy,model, etc. reward is a float
}, 0);
In other words, you pass the agent some vector and it gives you an action. Then you reward or punish its behavior with the reward signal. The agent will over time tune its parameters to maximize the rewards it obtains.
The full source code is on Github under the MIT license.

Monday, October 16, 2017

Google Maps API using Javascript.

For some reason the map loads (very quickly) but then crashes. But here is what I did using a youtube tutorial. Link below

https://www.youtube.com/watch?v=9gA0O8hE5bc

and HERE is my html file.


CONNECT Nexus UI/UX to Tone.js

https://tonejs.github.io/docs/r11/GrainPlayer
https://nexus-js.github.io/ui/
https://github.com/nexus-js/ui/



Tone.GrainPlayer implements granular synthesis. Granular Synthesis enables you to adjust pitch and playback rate independently. The grainSize is the amount of time each small chunk of audio is played for and the overlap is the amount of crossfading transition time between successive grains.

CONSTRUCTOR

new Tone.GrainPlayer ( 
url
 , [ 
callback
 ] )
url
The url to load, or the Tone.Buffer to play.
TYPE: String OR Tone.Buffer
callback
The callback to invoke after the url is loaded.
TYPE: Function
OPTIONAL

DEFAULTS

{
onload : Tone.noOp ,
overlap : 0.1 ,
grainSize : 0.2 ,
playbackRate : 1 ,
detune : 0 ,
loop : false ,
loopStart : 0 ,
loopEnd : 0 ,
reverse : false
}

MEMBERS

.buffer

  Tone.Buffer #
The audio buffer belonging to the player.

.detune

  Cents #
Adjust the pitch independently of the playbackRate.

.grainSize

  Time #
The size of each chunk of audio that the buffer is chopped into and played back at.

.loopEnd

  Time #
The loop end time.

.loopStart

  Time #
The loop start time.

.overlap

  Time #
This is the duration of the cross-fade between sucessive grains.

.playbackRate

  Positive #
The playback rate of the sample

.reverse

  Boolean #
The direction the buffer should play in
INHERITED FROM Tone.AudioNode

.context

  Tone.Context READONLY #
Get the audio context belonging to this instance.
INHERITED FROM Tone.Source

.fadeIn

  Time #
The fadeIn time of the amplitude envelope.
INHERITED FROM Tone.Source

.fadeOut

  Time #
The fadeOut time of the amplitude envelope.
INHERITED FROM Tone.Source

.mute

  Boolean #
Mute the output.

EXAMPLE

//mute the output
source.mute = true;
INHERITED FROM Tone.Source

.state

  Tone.State READONLY #
Returns the playback state of the source, either “started” or “stopped”.
INHERITED FROM Tone.Source
 

.volume

  Decibels #
The volume of the output in decibels.

EXAMPLE

source.volume.value = -6;

METHODS

.dispose ( )

 #
↪ RETURNS Tone.GrainPlayer
this
Clean up

.seek ( )

 #
offset
The offset to jump to.
TYPE: Time
time
When to make the jump.
TYPE: Time
OPTIONAL
↪ RETURNS Tone.GrainPlayer
this
Jump to a specific time and play it.

.start ( )

 #
startTime
When the player should start.
TYPE: Time
DEFAULT: now
offset
The offset from the beginning of the sample to start at.
TYPE: Time
DEFAULT: 0
duration
How long the sample should play. If no duration is given, it will default to the full length of the sample (minus any offset)
TYPE: Time
OPTIONAL
↪ RETURNS Tone.GrainPlayer
this
Play the buffer at the given startTime. Optionally add an offset and/or duration which will play the buffer from a position within the buffer for the given duration.
INHERITED FROM Tone.AudioNode

.connect ( )

 #
unit
TYPE: Tone OR AudioParam OR AudioNode
outputNum
optionally which output to connect from
TYPE: Number
DEFAULT: 0
inputNum
optionally which input to connect to
TYPE: Number
DEFAULT: 0
↪ RETURNS Tone.AudioNode
this
connect the output of a ToneNode to an AudioParam, AudioNode, or ToneNode
INHERITED FROM Tone.AudioNode

.disconnect ( )

 #
output
Either the output index to disconnect if the output is an array, or the node to disconnect from.
TYPE: Number OR AudioNode
↪ RETURNS Tone.AudioNode
this
disconnect the output
INHERITED FROM Tone.AudioNode

.toMaster ( )

 #
↪ RETURNS Tone.AudioNode
this
Connect ‘this’ to the master output. Shorthand for this.connect(Tone.Master)

EXAMPLE

//connect an oscillator to the master output
var osc = new Tone.Oscillator().toMaster();
INHERITED FROM Tone.Source

.stop ( )

 #
time
When the source should be stopped.
TYPE: Time
DEFAULT: now
↪ RETURNS Tone.Source
this
Stop the source at the specified time. If no time is given, stop the source now.

EXAMPLE

source.stop(); // stops the source immediately
INHERITED FROM Tone.Source

.sync ( )

 #
↪ RETURNS Tone.Source
this
Sync the source to the Transport so that all subsequent calls to start and stop are synced to the TransportTime instead of the AudioContext time.

EXAMPLE

//sync the source so that it plays between 0 and 0.3 on the Transport's timeline
source.sync().start(0).stop(0.3);
//start the transport.
Tone.Transport.start();

 

EXAMPLE

//start the transport with an offset and the sync'ed sources
//will start in the correct position
source.sync().start(0.1);
//the source will be invoked with an offset of 0.4
Tone.Transport.start("+0.5", 0.5);
INHERITED FROM Tone.Source

.unsync ( )

 #
↪ RETURNS Tone.Source
this
Unsync the source to the Transport. See Tone.Source.sync

Scripting for the Web Final

I spent a lot of time working on my updated portfolio website this semester. Here's an excerpt of the reflection post I wrote (because t...