Wrapping up

The lectures are coming to an end an next it’s time for you to do the assignment. Just some final notes, recap and further pointers for you left. First a little cheat sheet of what the things we’ve learned so far are good for:

  • Variables: storing single values for calculations, temporary use, loop counters, and other program states
  • Arrays (and lists): storing multiple values, collections of variables
  • Conditional statements (if, if-else): doing things conditionally, when something is true or false
  • Loops (for, while): repeating things, such as walking through an array or drawing multiple shapes
  • Functions: pieces of code that independently do a well-defined task, breaking down programs into smaller parts, useful across programs
  • Comments: keeping the program human-readable, documentation, temporarily taking out parts
  • (Objects: logical wholes containing both data and functionality – we only scratched the surface during this course)

The instructions, deadlines and requirements for the assignment can be found on their respective page. Markku tutors the Processing works and Jukka the JavaScript ones. Just to make sure: you can choose which language to use and will do only one project, not one in both. Start early on now that you still remember the content well, and also ask us if you’re unsure whether your idea is too easy or difficult to implement.

If you really want to get into programming, there are many more programming courses offered both at our department and at the School of Science. Most of our programming-related courses from our curriculum:

  • From Data to Pixels – Pretty much continues where we left off here
  • Multitouch Interaction
  • Generative Media Coding
  • Bodily Interaction
  • Electronics for Artists
  • Composing with Data Flow Programming
  • Physical Interaction Design
  • Procedural Audio
  • Computational Intelligence in Games

And as the last thing, remember to send course feedback through Oodi so that we can improve the parts that didn’t work and keep the ones that did.

We can be reached through email, but consider using the MyCourses discussion forum, because then others can see the solution too.

Posted in Uncategorized | Comments Off on Wrapping up

JS files for day 5

https://we.tl/zsJpI9Z3Lf

Posted in Uncategorized | Comments Off on JS files for day 5

Sound file

https://we.tl/ojc8ePkDSB

Posted in Uncategorized | Comments Off on Sound file

JS files for day 4

https://we.tl/gqb2QVxYma

Posted in Uncategorized | Comments Off on JS files for day 4

JS files for day 3

https://we.tl/Yl3ofwRSGu

Posted in Uncategorized | Comments Off on JS files for day 3

JS files for day 2

https://we.tl/Q9njLqO5au

More or less what we had at the end of day 1, plus library bug fix.

Posted in Uncategorized | Comments Off on JS files for day 2

Introduction to Javascript

JS, ie. JavaScript, is in a lot of ways quite similar to Processing…

…But not quite.

JS is a general-purpose web programming language with dynamic “duck” typing, leaning heavily towards object-oriented paradigm, with a C-like syntax.

This is going to get a bit jargon-heavy, no matter which way we slice the cake here, sorry about that. We’ll talk about all this, so no need to try to absorb everything from here.

1) General-purpose, meaning that the language is suited for pretty much any kind of programs, ranging from simple interactions on a web page, to 2D and 3D games and desktop programs.

2) Web programming, in the sense that most of the JS still runs in the browser, on a web page. These days, you can use JS to build desktop applications, too.

3) Dynamic typing, meaning that the types of variables are not bound to what they were originally. You can declare a variable as an integer, and later on use that exact same variable as a, say, string, without converting it manually. This is both a burden and a joy, depending on how you think. The “duck” part comes from the expression: “If it walks like a duck and it quacks like a duck, then it must be a duck” – basically, when it comes to variables, this means that if we can use a shoe to hammer in a nail, to JS that shoe is a hammer.

4) Programming language, in the sense that it is a language we use to program computers.

5) Object-oriented, meaning that the language has built-in capabilities for *objects*. We’ll talk about that a bit later on this course, but for now it suffice to say that OOP – object-oriented programming – tends to be the most common way of conceptualizing software development these days. An *object* in OOP is just an aggregation of data and functionality. Don’t worry, it’s going to make more sense soon.

6) C-like syntax means just that the conventions with respect to delineating things like control flow, code blocks, et cetera, resemble the C language. This means we’ll be using a lot of curly braces and semicolons.

The practical implications here are, then, respectively:
1) We need to be a bit more careful about which parts of the whole language to use. As a rather complicated general-purpose language, there are some parts that are outright scary.
2) Development of JS is a bit different: Instead of some sort of JS environment (compare: Processing IDE), we’ll be using a text editor and a web browser.
3) We don’t need to (and can’t!) declare variable types. This will inflict all sorts of horrible suffering upon you at some point, if you’re not careful. When you get used to it, though, it’s actually pretty nice.
4) We gon’ learn to program computers.
5) Processing is even more object-oriented than JS. A lot of the stuff you’ll learn here about objects is relevant also in Processing, as well as languages like Java, C++, C# (used in Unity), and openFrameworks.
6) It’s almost like writing two dialects of the same language. Once you get used to the semicolons, they’re equally useful here as in Processing or any other C-family languages.

Apart from the language differences, there’s also cultural differences, especially with respect to things like libraries. JS developers tend to rely heavily on libraries: No matter what you want to do, somebody has usually done something quite similar to that, and it’s often quick and easy to use some already existing code. Furthermore, the libraries themselves are often updated on a very fast pace. This is a good thing, in the sense that you get the newest developments almost immediately, but the drawback is that larger projects are a pain to manage.

Posted in JS | Comments Off on Introduction to Javascript

Code files for JS day 1

https://we.tl/VDBmwACaom

Posted in JS | Comments Off on Code files for JS day 1

Additional Processing exercises

More little Processing exercises. Not obligatory, just for rehearsing the topics we’ve covered. Example solutions included, but try first on your own.

  • Simple graphics. Create the familiar smiley face using the graphical capabilities offered by Processing. smileyface.pde
  • Variables. Declare two int variables with values 100 and 200. Print them, swap their values using a third variable and print again. swap.pde
  • Using the mouse. Make a crosshair that moves with the mouse. crosshair.pde
  • Loop and compare. Print all even numbers from 0 to 30, except 10 and 20. forbidden.pde
  • Animate and compare. Move a circle smoothly across the screen and change it to a rectangle in the middle. changemidway.pde
  • Arrays. For the first 100 frames, store the sum of mouse x and y coordinate in an array. savecoords.pde
  • Strings and arrays. Put five names into an array and print them on separate lines together with the line numer. names.pde
  • Functions. Turn the smiley face into a function that lets you plot it at any given location on the screen. Plot three of them to test it. smileys.pde
  • Return value. Make a function that takes two numbers as parameters and returns the bigger one. greater.pde
  • Random numbers, graphical text and type conversion. Create a font and load it. Each frame get a random number and display it at a random position. randomtext.pde
Posted in Processing | Comments Off on Additional Processing exercises

6. Types and conversions

Let’s start with a nice little trick: instead of running your sketch, present it to make it fullscreen (shift-command-r).

Decimal numbers (desimaaliluvut)

So far we’ve used only int type for our calculations. Often the precision is not enough: for example if you divide one by two you get zero instead of 0.5. For more precision we can employ floating point numbers (liukuluvut), which can store decimal numbers. Instead of int, declare your variable float:

float mynumber;

An example illustrating the difference between the two: intvsfloat.pde

Type conversion (tyyppimuunnos)

Processing is very strict about mixing variables and functions of different types. You can’t directly assign a variable of float into an int. For example random numbers in Processing are floats, and that’s why you can’t assign them to int variables without conversion. Fortunately, type conversion is easy to do:

int a=0;
float b;
b=float(a);

A few more conversions here: typeconversion.pde

One type more

Often it’s handy to have variables that contain yes/no values. For them we have type boolean, which can only have values true or false. You can’t do any mathematical calculations with booleans.

boolean truth=true;
truth=false;

Displaying text

We’ve output text with println already, but to display text inside the sketch window we need to use PFont together with loadFont, textFont and text. Processing has its own bitmap font format. Save your sketch first and then click Tools – Create Font. How to do all of it: graphicaltext.pde. A bit more advanced: graphicalnumbers.pde

Sample project

Finally, let’s make a complete program that puts everything we’ve learned so far into use. First, we start by thinking of the needs and requirements, then proceed to designing the overall structure of the sketch, and only after that we start typing anything — do the same with your exercise task! paintprogram.pde

Posted in Processing | Comments Off on 6. Types and conversions