Javascript guidance

mattgolsen's picture

So I primarily come from a graphic design background, which is one of the things that's attracted me to QC so much. I'm quickly coming to the realization that I need to flex my analytical side a bit more, and teach myself something a bit complex.

So I decided to start with Javascript because it would have the most use and immediate utility for my projects. I need someone assistance in finding tutorials and the like for someone that doesn't think like a programmer. If that makes any sense.

Any ideas?

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.

gtoledo3's picture
Re: Javascript guidance

Matt, I know Cybero has a QC-centric reference at his site. Mozilla's developer pages has some decent info, and I'll refer to it from time to time.

I really prefer texts when it comes to things like coding, while I think that tutorial and video can be very good for software or GUI driven stuff... as a nice addition, because in so many cases a picture is worth a thousand words. In coding, it doesn't seem like that's the case too often. A text seems to help me absorb it better.

I find the Missing Manual series to be ok, as well as the For Dummies series. Many times, after I've learned or digested whatever it was, I may go "well, I could have read this online from A, B and C," but the fact is that both series will regularly get me over the hump on the beginning of a new technology, and they usually have a well ordered ramp up on difficulty or complexity of concepts from start to finish.

I'm going to come out on the side of, why not pick up a book on Cocoa and start checking out App Kit examples as well :) Not everything cool in Cocoa is going to make your brain snap off the bat... a good text will get you through well. A good amount of Apple examples are well commented too.

mattgolsen's picture
Re: Javascript guidance

But Cocoa is scary! :D

I've messed around a little bit with it, but it quickly skyrocketed from "Here's a TextEdit clone" to "Welcome to full application development, we assume you know what the heck we're talking about!"

I've also had trouble finding up to date information for beginners that's pertinent. I really should pick up a book and hammer through it.

I have so much trouble trying to express most of the things I'd like to do with QC, when it's so easy for me to pick up a pen and paper and just draw (well static) version of what I want. I also feel somewhat intimidated coming on here and asking what I'm pretty sure are dumb questions :)

Thanks for the advice though, I'll probably head to the bookstore this weekend, or poke around on Amazon.

cybero's picture
Re: Javascript guidance

If you want to get into some of the real meat and potatoes of JavaScript within Quartz Composer you're going to find loads of useful stuff, Quartz Composer on the web, in this forum and also within the developer's examples.

The inbuilt QC template for a music visualizer utilises JavaScript within it's standard default for smoothing the spectrum input to output, you could examine that at some greater length.

Programming within QC can be broken down into JS, GLSL and CI patch types, and one should not ever forget that the inbuilt structural facilities , sans any given programming patch, can and shall give some really excellent results.

I always point students of QC [programming or otherwise] directly to the Developer's folder examples, wherein various possibilities for the visualization of data [data here can, amongst many others, even be a video, an image or an audio input, as well as more conventionally understood data types [ for example static files of ordered structures and data tables].

I also point those interested in finding out more about JS in QC to the Jelly visualizer, about which I would love to post more, but I am still awaiting confirmation of Apple's AOK to publish up about the JS used extensively within that composition.

Finally, Cocoa programming, always something worthwhile getting one's head around, is arguably rather more useful for the production of standalone items incorporating Cocoa.

toneburst's picture
Re: Javascript guidance

If you're not familiar with basic programming concepts, it might also be worth starting from scratch, and finding a good book on C. All the programming languages used in QC are heavily based on C, so knowing how to use variables, functions, conditionals etc. in C will give you a flying start not only with JavaScript, but also if you decide to give GLSL or CIKernel language a go.


toneburst's picture
Re: Javascript guidance

And Objective-C (the 'native' programming language for OS X applications) is also, as the name suggests, based on C (with a load of other stuff tacked on, obviously).


cybero's picture
Re: Javascript guidance

Spot on fella, C has had many offspring and been of influence upon many another [ostensibly] unique computing language indeed.

dust's picture
Re: Javascript guidance

i have found that and one of the reason i love qc is that most things can be accomplished using just the patches. i find myself using java script logical things that well sometimes make more since to me in the traditional C style. cybero has a lot of the java stuff on his site. i to come from a designers background and study inter disciplinary research right now at a university, my focuses are art. first and foremost i like to think of my self as an artist, next discipline is new media (time based graphics stuff mostly) and computer science. C + java etc... you see i use a computer to make my new media art. so it seems fit to me to learn how to make the tools that can make my art. like a classically trained painter from the classical time period was taught one hot to mix colors and paint but also how to make paper canvas and paint, so i look at it like that in a digital fashion i guess. random stochastic and generative algorithmic art took me a bit of time to grasp the concepts because i used to focus on the aesthetic principles.

here is something i find invaluable for any programming language, it is equivalent to an iterator patch. its called a for loop. basically in computer science you need to loop things in order to wait for commands or to count and or retrieve information basically it is the most essential part of programming and im a novice as well.

first you have a variable. in java script it is like qc a virtual variable meaning that it is loose with data types and you don't have to declare your variables type "string" "int" "float" etc... so first you will want to make a variable that can be used for a conditional statement and count/index.


var i; i is commonly used and i think it is a reference to integer but not sure might be some math stuff from back in the day.

next you want to assign or initialize the variables value.

var i = 0; now java script knows i is a reference to an integer.

next you will want a conditional and you loop. conditionals are like english if i is greater than another variable then do something.

so lets do another variable for this sake.

var j = 127;

now we have both i and j initialized.

lets do the loop. the for loop is common but there is also a while loop like do something while this variable is not equal to another variable.

lets use a for loop.

somtimes you can declare your i index integer or whatever i is standing for inside the for loop conditional.

so lets show you that.

for(i=0;i<=j;i++){ do some work like print value }

now i=0 is initializing i to 0; i<=j means while i is less than equal to j it will loop over an over. i++ stands for increment. this means each pass of the loop i will add 1 to itself.

so if inside the brackets you are out putting your number.

result.ouputnumber = i;

at the top of your function you declare a variable result as your object. an object is like a box that has stuff inside that you are mailing what is inside is what you want not the box.

so var result = new object; means the variable result is your box that will pass or mail out the contents.

the function decleration at the top you clarified a data type for output lets say __number outputnumber

so inside the for loop

for(i=0;i<=j;i++){result.outputnumber = i; return result;}

now the dot is basically giving you access or linking i guess you box to a address where as i is your mails content or the letter you wrote.

return is telling the computer to mail the letter he is the post master.

remember this is a loop.

so i gets incremented by one so the out put of this code will count from 0 to 127. if you did i<j or i less than j it would output 0 to 126 cause 127 is = to j.

once this process is done it will jump out of the brackets and start executing any code below the for loop.

for(i=0;i<=j;i++){result.outputnumber = i; return result;}

at anytime you can break; a break will jump you out of a loop it is commonly used for switch statements which are basically else if ( i <= j ) do something else if (j==i) do something. == is equivalency and used a lot. != stands for not equal etc...

so that is the basics next lesson would be an array. that should get you started understanding what is going on when you see fors and i's all over the place.

again like mentioned above this is standard C stuff but in C you would declare a data type like int i = 0; meaning int is integer not double or float which would be 0.0;

honestly i had a hard time teaching myself C. i took a logic class in predicate calculous and semantical logic etc.. basically learned about sets and stuff and then when i took a C class all of a sudden all the math stuff really clicked into being applicably to daily life.

cybero's picture
Re: Javascript guidance

Go dust , go. Spot on fella :-)

dust's picture
Re: Javascript guidance

thanks cybero. im not as good with java script like you are i often tend to look at your examples and tb's cause im more of a object oriented java guy i guess and i forget the limitations of java script inside of QC your website helps me keep in bounds of qc and not trying to do web related javascript with qc although i believe coges plugin lets you do some of that web related java script as well. haven't really played with it much. i have been doing the content management stuff as of late and honestly think qc makes wicked websites with the exceptions of the audio and video etc...'s picture
Re: Javascript guidance

JS come into it's own in QC for logic oriented problems and parsing or processing structured objects which can be feed to KinemeGL patches (and Kineme3D but I don't have it yet). These are the two primary uses for me.

In terms of doing logic sequences (ie. if this and that are true then do something this many times to this other object or until I say stop) it's just way more efficient with my time than stringing patches in my short experience. And in terms of generating data for point or line clouds it's just much more straight forward to my mind although with Kineme structure maker patch other methods are obviously available.

I'm also a (sometimes) graphic designer (taking a year off Sagmeister style hopefully) but did lots of Basic, Pascal and Fortran programming in my distant youth (plus had a passion for mathamatics) and a little OOP much later but nothing useful. So I have the basic concepts down enough for JS but not CI yet. I think once you get over the huddles it's not so complicated as JS is only a scripting language (compared to a programming one which involves sooo much other stuff). In QC Javascript is simple (if not forgiving as most programming and scripting languages are by nature quite literal). Just start small with little problems I often bite off too much then spend ages breaking the code down to smaller tasks to find the error. Commenting out parts of your code so they don't execute so as to focus on one area of the code is invaluable here. // denotes a comment and gets grey-out.

Once you have loops (iteration) and conditionals (if/then statements) down the next big hurdle is how you talk to structures like Arrays (an indexed collection of like objects with unique number identifier for each element), and QCObjects (classes in JS terminology). QCObjects can be referenced by indexed with (unique) numbers sort of like seats in a theatre or items can have there data 'keyed' with a label sort of like everybody sitting in each theatre seat has their own name, age and gender etc. A QCObject can contain these these (non-unique) keyed values that can be asked for by the label name (eg "Gender" or "First Name") which is called the 'key'.

Also JS is good to learn b/c all the Adobe apps can be scripted with JS and Adobes extended JS library. Comes in very handy on repetitive tasks.

Also there's the possibility of Applescript getting replaced with JS one day (somebody just made a library for programmers to include in there apps in the way applescript dictionaries are) as it's much easier to learn the grammar and has more widespread user base.