Afaq Ahmed Karadia @afaqahmed - Tumblr Blog

Blog final

After all classes, I am at the end of submitting my final project. The project is more about what I have learned in class. My purpose of doing this project to show a step by step progress within programming language and platforms. Also, to understand how javascript works and what are main components of Java which allows you to make things happened within your browser and other platforms. Personally, I found java interesting and helpful to understand the logic behind complex structures.

Concept Initial concept of the project was to create a web-based music production system where audience will be able to create their own music and they can use it to perform it live but this idea seems to be a big idea for this class I think this was not possible as I am a starter with JavaScript so I decided to make this idea simple and possible to do so I came up with idea of using some device which I can trigger and use it to produce sound within web browser. where I can generate sound through gestures. and this is my first step towards learning how we can generate sound using body gestural movements. However, gestures can be defined in different ways but typ of gesture which I am using is hand gestures, One of the main reason of using hand gestures is because I am using MYO hand band.

What is MYO

\The Myo armband is a gesture recognition device worn on the forearm and manufactured by Thalmic Labs. The Myo enables the user to control technology wirelessly using various hand motions. It uses a set of electromyographic (EMG) sensors that sense electrical activity in the forearm muscles, combined with a gyroscope, accelerometer, and magnetometer to recognize gestures. The Myo can be used to control video games, presentations, music and visual entertainment. It differs from the Leap Motion device as it is worn rather than a 3D array of cameras that sense motion in the environment.

Process

The process involves 6 weeks in which we start with basic understanding and learning of javascript within webs Brower.

The first week was all about HTML/CSS/JS where we learn basic web system and its architecture

HTML <html>

<body>

var thing1= document.getElementById('thing'); thing1.onclick=function(){ console.log('clicked');

};

var divs = document.getElementsByTagName('div'); console.log(divs);

//string delimiter fun console.log("hello I'm adam"); console.log('"hello" said adam');

based on this code next 3 weeks were all about adding thing into it such as button and next was click the button to generate sounds. How to use web music API their I learn a new concept of APIs within web browser.

after 3 weeks of learning. We get into a new thing which is CHUCK

ChucK is a programming language for real-time sound synthesis and music creation. It is open-source and freely available on MacOS X, Windows, and Linux. ChucK presents a unique time-based, concurrent programming model that's precise and expressive (we call this strongly-timed), dynamic control rates, and the ability to add and modify code on-the-fly. In addition, ChucK supports MIDI, OpenSoundControl, HID device, and multi-channel audio. It's fun and easy to learn, and offers composers, researchers, and performers a powerful programming tool for building and experimenting with complex audio synthesis/analysis programs, and real-time interactive music.

While exploring chuck I learn a lot as I am interested in music and sound and this platform was all about sound so I took advantage of this class and try to build my own sounds.

Such as in chuck there are 3 things common which are

SqrOsc TriOsc SawOsc

And here I tried to merge all these values to see what sound it creates this experiment was pretty much successful

SinOsc s => dac;

0.6 => s.gain; 220 => s.freq; 1::second => now;

0.5 => s.gain; 440 => s.freq; 2::second => now;

0.3 => s.gain; 330 => s.freq; 3::second => now;

on the next step I started working on my final project first I decide to my final project within a web browser but unfortunately, I was not able to run MYO with a web browser. Then I decided to my project with another platform which Is processing.

processing which is a java based platform. Which is a really good platform to write the interactive scripts. for the sound part I tried using CHUCK But due to some issues with OSC-I was not able to make my Chuck talk with processing so I ended up using pre-made sound I found this easy to understand how I put sound in my script.During my process, I also did some experiments with flocking.js which is another javascript library to deal with sound production in the browser. But since I decided not to use web browser so I can’t use flocking.js for this purpose.

What is Flocking.js Flocking is a JavaScript audio synthesis framework designed for artists and musicians who are building creative and experimental Web-based sound projects. It runs in Firefox, Chrome, Safari, and Node.js on Mac OS X, Windows, Linux, iOS, and Android. Flocking is different. Its goal is to promote a uniquely community-minded approach to instrument design and composition. In Flocking, unit generators and synths are specified declaratively as JSON, making it easy to save, share, and manipulate your synthesis algorithms. Send your synths via Ajax, save them for later using HTML5 local data storage, or algorithmically produce new instruments on the fly. So is started my final project with importing library

import ddf.minim.*; import ddf.minim.analysis.*; import ddf.minim.effects.*; import ddf.minim.signals.*;

// processing sound library and Myo Library

import de.voidplus.myo.*;

Minim minim;

//minim library object, we will call function of this library using this object.

AudioPlayer play0,play1,play2,play3,play4; //this is the variable to produce sound Myo myo;

PImage[] img; boolean[] active;

void setup() { size(800, 200); background(255);

myo = new Myo(this); //lockingPolicy = new String("none"); myo.setLockingPolicy(Myo.LockingPolicy.NONE); myo.unlock(Myo.Unlock.TIMED); myo.setFrequency(10);

// loading pre-define gestures from MYO

img = new PImage[5]; img[0] = loadImage("data/double_tab.png"); img[1] = loadImage("data/spread_fingers.png"); img[2] = loadImage("data/wave_right.png"); img[3] = loadImage("data/wave_left.png"); img[4] = loadImage("data/make_a_fist.png");

active = new boolean[5]; resetImages();

minim = new Minim(this); play0 = minim.loadFile("data/snare1.mp3"); play1 = minim.loadFile("data/martin.mp3"); play2 = minim.loadFile("data/kick.mp3"); play3 = minim.loadFile("data/hip_hop_bass_line.mp3"); play4 = minim.loadFile("data/hihat-open.mp3"); }

void resetImages(){ for(int i = 0; i<5; i++){ active[i] = false; } }

void draw() { background(255); // ...

for (int i = 0; i<5; i++) { tint(255, (active[i]) ? 100 : 50); image(img[i], ((140*i)+(i*10))+30, 30, 140, 140); } }

void myoOnPose(Device myo, long timestamp, Pose pose) {

if (!pose.getType().toString().equals("REST")) { resetImages(); }

switch (pose.getType()) { case REST: // resetImages(); break; case FIST: active[4] = true; myo.vibrate(); play0.loop(); break; case FINGERS_SPREAD: myo.vibrate(); active[1] = true; play1.loop(); break; case DOUBLE_TAP: active[0] = true; myo.vibrate(); play2.loop(); break; case WAVE_IN: active[2] = true; myo.vibrate(); play3.loop(); break; case WAVE_OUT: active[3] = true; myo.vibrate(); play4.loop(); break; default: break; } }

void myoOnLock(Device myo, long timestamp) { resetImages(); }

void myoOnUnLock(Device myo, long timestamp) { resetImages(); }

so, on every hand gestures, I am generating a sound and this sound is automatically looped in the code so it will play on loop since I am a new user to MYO so I don’t have a good command on it but this was fun to use MYO to produce music in this way.

Future Integrations

For future, I would like to explore the same area but adding more features in it such as using MYO with the web browser and doing same music production thing with MYO. But also I am very interested in Playing around with CHUCK and how I can use chuck code in such process.

Best team #chinese #pingpong #cfc #ocad #toronto (at Canadian Film Centre (CFC))

#ocad #cfc #toronto #chinese #pingpong

Some crazy shittt #montreal #toronto #mutek #nanomutek #ocad #led #dj #vj @mutekmontreal (at SPiN Toronto)

#nanomutek #vj #mutek #led #montreal #ocad #dj #toronto

Big shot coming in august #nanomutek #mutek #toronto #montreal @mutekmontreal (at SPiN Toronto)

#toronto #montreal #mutek #nanomutek

BLOG 6 Future Development “The End”

As far as the future development is concerned, I fully wish to experience the entirety of the children's story with our technological 'Sandbox' interpretation. Such that, the pigs create their structures with their limited materials and waiting times for their 3D printers, and the wolf creates their weapons in the same manner. I see this perhaps, as a 2D side scrolling platform with the use of split screen and single screen gameplay. Whereby players will have their own respective screens whilst creating their structures/weapons, and as the face-off takes place to which they defend and attack each other, for this to be on a single screen. I feel this use of screen-switching would be an interesting take on the gameplay as this form is not usually made in this manner. For one, most games use this system for when displaying their menu and then use their split-screens when engaging in multiplayer gameplay.I hope to take every angle possible to redefine mainstream uses of game mechanics. Albeit, as it currently stands, it is hard to interpret if this game is experimental or expanded, however, when developed further I would like to say it would represent both factors.

BLOG 4 – Game World "The End"

This was my attempt at creating a game environment. Here, an early prototype before the elements of the wolf and the three little pigs was a story between a pig in the wilderness and a Lumber Jack. This was a simple platform game for which the Lumber Jack would create weapons using a laser cutter to destroy materials that the pig would throw down. The idea originally was that the pig would try to cave in the Lumber Jack in building materials. It was the role of the Lumber Jack to prevent this scare the pig away from hurting it with his projectiles. This was just a demonstration for understanding how to create this scene in Unity with the following: * 2D Rigid Body* Scripting a Game Controller* Character movement using Sprites* Character movement using Speed variables * Understanding Node based coding

BLOG 5

before getting into game i would like to give credit to a youtube channel from where i learn how to develop this game

Pixel Game elements

https://www.youtube.com/channel/UC3z-2bxKzLXlavLK0zlAcPA

Unity - 2D Space Shooter

Here we did a redevelopment of idea as we make it more simple to execute and we try to make it as a playable prototype in this prototype there is a pig and wolf they both have their own assets to kill each other but instead of pig building house pig is actually throwing building material such as rock towards wolf and wolf have to try to save himself from the rock in order to kill pig, wof have his own weapon which is axe saw which he is throwing towards pig to kill him.

game environment is pretty simple

with the help of Youtube channel i was able to write scripts for that game

sound design for the game was inspired by Stranger thing

visual identity for the game

here are few future idea that how we could develop this game

BLOG 3 Visual Thought Process

the project reverses the relationship of the traditional fairy tale of the “Three Little Pigs” popularized by folklorist and publisher, Joseph Jacobs

the wolf is always presented as the antagonist where he “blows down” the house of straw and the house of sticks and depending on the version either eats each pig who built their respective home or chases them to their brother’s brick home. Ultimately, the wolf is either killed when he confronts the brick house and slides down the chimney into a cauldron of boiling water, or runs away and never returns

in “The End” the wolf and pigs are equally antagonist and protagonist. In the beta version that was demonstrated in class, the pig actively assaults the wolf and the wolf has to take measures to defend himself. In our speculated expanded version, taking Emma’s suggestion, the game play would alternate so the player would have to play both the wolf and the pig; similar in principle to solo chess play

often the story of the 3 Little Pigs is interpreted as a parable that cautions against hubris, with each pig absolutely certain that they could successfully confound the wolf. In “The End”, the story is interpreted as relating to architecture, materiality, and construction. The architecture is foregrounded as the conceptual focus of the game with the narrative being supplementary

BLOG 2 Take me out of you

Take Me Out of You is a public game to which people can play in outdoor spaces. The main idea was based on projection mapping techniques for which we wanted to explore urban spaces and the ability to understand how these spaces could be used as part of a game world. The story is about exploring one’s self and how we as an individual could identify our purposes in life.

Inspiration “Conference of Birds”

n the poem, "Conference of Birds", the birds of the world gather to decide who is to be their king, as they have none. The hoopoe, the wisest of them all, suggests that they should find the legendary Simorgh, a mythical Persian bird roughly equivalent to the western phoenix. The hoopoe leads the birds, each of whom represents a human fault which prevents man from attaining enlightenment. From the many birds that begin the journey, only thirty birds are left that finally reach the dwelling place of the Simorgh. There, the birds see the Simorgh in the reflection of their faces of an implicit lake.

BLOG 1 Augmenting Environments for public Games

The premise of these games is to entice users to experience a different visual connection to video games. Here users, instead of playing on flat surfaces like most screen based games, understand how to utilize the physical space around us as a means of projecting games onto it. Therefore, innovating the use of our existing space, limitlessly branching out further to explore how we as game designers could make use of the world around us. Much like augmenting our reality, but more so augmenting our ‘environment’.

Examples

Video 1 – Description

https://vimeo.com/32161590

EELS is a multiplayer game developed by B-Reel London and produced by Leo Seeley. Brought to life through projection mapping onto three-dimensional surfaces, the game brings the virtual worlds and the real worlds together. Using a smart phone, the user controls the left or right direction of an eel as it moves across the 3D surfaces. Not only is the real world space augmented with projection mapping technology, the game is fully interactive. The EELS game has taken some important steps to bringing interactive projection mapping to the masses. Video 2 – Description

https://www.youtube.com/watch?v=2Ed-0nxdSig

This is a good example of a public game in a physical space. PlayStation used a building as their urban screen. 'Building Breakdown' is an interactive projection mapping game where the display is a three-story high building encompassing as the entire game’s surface. Whereby users are engaged to destroy bricks and windows; a simple brick breaker scenario. It is a single player game in which the user uses a default PlayStation handheld controller to control the paddle across the building and guide their bouncing projectile to destroy their obstacles. Video 3 – Description

https://www.youtube.com/watch?v=_bZw-ZefpO8

Project "RunningMan" is a simple multiplayer game prototype made in Unity, for the purpose of experimenting with Projection mapping!

Video 4 – Description

https://www.youtube.com/watch?v=nMM-xukGjJw

FRAMEWORKS is an interactive installation based on the principle of mixed reality, which tries to enhance the meaning of an architectural space. We tried achieving it by developing a game, where a virtual character plays with the real space, walls and depth. Suggested Architectural buildings Union Station (Toronto) The former Bank of Montreal building at Yonge and Front Streets

Idea can be proposed to canada 150 as a public art project. Also this could be done at ocadu creative city campus for launch of campus