Category: Assignments

Game Mod


pongDue date Monday December 7
Turn your game into something novel.
Here are some possibilities:
Autism – turn a single player into multi player game
Militarism – turn a shooting game into a “pacifist” game
Frenemies – turn a competitive game into a co-operative game
Fix – turn a dull game into a more satisfying game
Flow – turn a hard, stressful game into a “nicer” game
Update – add a contemporary computational system to an old game (swarms, physics, etc)
Artify – turn a game into a compelling audiovisual experience
Analog/Digital – switch a digital control system (arrow keys) to analog (mouse) or vice versa
Mash-up – combine two games into one
Twist – add an extra mechanic that completely changes the experience

Comments Off on Game Mod Posted in

Game Mod


pongDue date Monday December 7
Turn your game into something novel.
Here are some possibilities:
Autism – turn a single player into multi player game
Militarism – turn a shooting game into a “pacifist” game
Frenemies – turn a competitive game into a co-operative game
Fix – turn a dull game into a more satisfying game
Flow – turn a hard, stressful game into a “nicer” game
Update – add a contemporary computational system to an old game (swarms, physics, etc)
Artify – turn a game into a compelling audiovisual experience
Analog/Digital – switch a digital control system (arrow keys) to analog (mouse) or vice versa
Mash-up – combine two games into one
Twist – add an extra mechanic that completely changes the experience

Assignment: Sound Toy


Make an interactive musical application. It can function like an instrument/noisemaker, a music visualization app, or a music game depending on your skills and interests.

-You must design it before implementing it
-It must work full window
-The audio, visual, and interactive aspects should be meaningfully integrated (synesthesia, consistent “feel”)

Try the examples shown in class: soundToys.zip

Find sounds on Freesounds.org

You can also download sounds from youtube

Get a good free sound editor like Audacity

Due date: Wednesday November 4th

Comments Off on Assignment: Sound Toy Posted in

Assignment: Hypnotic circle


Make an animated mandala/hypno-disc composition using the rotational symmetry algorithms covered last week.

Make an animated zip by merging it with this example:
Download a zip file with gif making functionality built in, here.

Some examples

13

12

11

10

9

8

7

6

5

4

3

2

1

Comments Off on Assignment: Hypnotic circle Posted in

Rotational symmetry – sin cos


Here’s how to use basic trigonometry to position things in a circle:

var numObjects = 10;
var centerX;
var centerY;
var angle = 0;
var distance = 100;

function setup() {
createCanvas(600, 600);
centerX = width/2;
centerY = height/2;

noStroke();
ellipseMode(CENTER);
}

function draw() {
background(0);

//divide the circle 360 degrees according to the number of objects
var angleObject = 360/numObjects;

for (var i=0;i<numObjects ;i++)
{
//you can have a circular motion if you sum the same angle to all objects
//angle = frameCount;
//and the speed can be also linked to the object number
//angle = frameCount*i / 2;

//fun with trigonometry and oscillations
//distance = sin(radians(frameCount))*150;

//the sin(angle) cos(angle) has to be
//multiplied by the distance from the center
//because trigonometric functions assume a circle with radius=1
//centerX and centerY is the offset from the top left corner
//remember to convert in radians
var posX = centerX + distance *cos( radians(angleObject*i + angle) );
var posY = centerY + distance *sin( radians(angleObject*i + angle) );

fill(255);
ellipse(posX, posY, 10, 10);
}
}

Doing more or less the same without trigonometry and with push/pop transformations


var numObjects = 10;
var centerX;
var centerY;
var angle = 0;
var distance = 100;

function setup() {
createCanvas(600, 600);
centerX = width / 2;
centerY = height / 2;

noStroke();
ellipseMode(CENTER);
}

function draw() {
background(0);
angle++;

var angleObject = 360 / numObjects;
for (var i = 0; i < numObjects; i++) {

push();
translate(centerX, centerY);
rotate(radians(i * angleObject + angle));
//or you can draw at 0,0 and translate again
//translate(distance,0);
ellipse(distance, 0, 10, 10);
pop();
}
}

Make an animated mandala/hypno-disc composition using the rotational symmetry algorithms below.

*You have to use at least two .png images with transparency loaded from an external file.
*You can mix bitmap and processing-generated images.
Bonus: use nested for-loops to give the illusion of a 3D tunnel.

Comments Off on Rotational symmetry – sin cos Posted in

Assignment: Order vs. Disorder


Make a composition with controlled randomness which depicts “order” when the mouseX is on the left side of the canvas, and chaos (randomness) when it is on the right side. The degree of order/chaos should vary gradually with the position of the mouse.

-Use for loops
-Check the example below for reference but don’t make a variation of it. The grade will be mostly based on the originality of your sketch.
-Try using noise instead of random.

This is a simple (boring) example.

function setup() {
  createCanvas (400, 400);
  fill(255, 255, 255);
  smooth();
  noStroke();
}
 
 
function draw() {
 
  background(255, 255, 255);
  fill(0, 0, 0);
 
  var xPos;
  var yPos;
  var circleSize = 5;
  var circleDistance = 20;
 
  //defines the x-coordinate 
  for (var x=10; x<=width; x=x+circleDistance) {
    //defines the y-coordinate   
    for (var y=10; y<=height; y=y+circleDistance) {
 
      //the position is mostly determined by a grid but it also
      //has a component of randomness
      xPos = x + random(mouseX/50);
      yPos = y + random(mouseX/50);
 
      //80 is a "magic number" I figured out by trial and error
      //it reduces the amount of randomness
 
      //you can use the functions map and constrain for similar purposes
 
      ellipse(xPos, yPos, 10, 10);
    }
  }
}

Comments Off on Assignment: Order vs. Disorder Posted in

Exercises (drawing, for loops, variables)



Exercise 1

Reproduce the drawing below using one for loop:


10 lines, 500×500 px canvas.

Tips:
.Don’t start coding! Break down the problem on paper first
.Consider using a variable for the lines coordinates like startX, startY and endX, endY.
.Try to draw parallel lines first

Exercise 2

Reproduce the dynamic sketch below:

20 lines on each side, 500×500 px canvas.

Exercise 3

Reproduce the drawing below using nested for loops:


9×9 circles. 50px of distance between the centers, 500×500 px canvas.
The circles gradually fade to black.

Tips:
. break down the problem in different sub-problems
. make a tiling of identical circles first
. implement a variable diameter and figure out a relation with the index variable
. do the same with the alpha channel

ADVANCED EXERCISE

Exercise 4

Reproduce the drawing below using nested for loops and appropriate variables for every quantity (eg. number of concentric circles):

Canvas 500x500px. Rows 4, columns 4, target diameter 80px, distance between centers 100px, target inner circles: 10.

Exercise 5

Reproduce the pattern using nested loops and random:


Anni Albers Second Movement – 1978

Exercise 6

Reproduce this animation by psychedelic gif artist dvdp. You’ll need arc(), degrees() and radians() may help:

Comments Off on Exercises (drawing, for loops, variables) Posted in

Assignment: P5 Face Tracking


If your “face” assignment was super simple, with one or two shapes moving, redo it.

Alternatively, you can make a screen saver using random and noise that produces interesting looking visuals.

For advanced students and whoever completed the “face” assignment successfully. Make a virtual mask with the face tracking system below and prepare a short performance with it.

p5Face

This example uses p5 and a face recognition library called clmtrackr

These are the points in the array returned by ctracker.getCurrentPosition():

image_reference

If you want to track the tip of the nose, these are the coordinates:

var noseX = positions[37][0]; 
var noseY = positions[37][1];

Comments Off on Assignment: P5 Face Tracking Posted in

Assignment: sound responsive face


faces

Draw a stylized face in Processing. Requirements:

– A canvas size of 600 x 600

– Front view, not profile

– Use at least 10 graphic elements. Use the drawing functions I covered in class but also try something new from the reference.

– Use colors that don’t suck.
You can steal color palettes from here.
Create a new one with Kuler
Generate one from a picture with this tool

Making faces is easy. We are hardwired to recognize them.
faces.0
Faces in things twitter

PART 2: Make it Responsive

For this assignment, you’ll add sound-interactivity using the audio add-on.

Include the audio component by adding this line to index.html just after the p5.js inclusion.
<script src="addons/p5.sound.js"></script>

Start from a sketch.js like this (don’t worry if you don’t understand the audio setup part).

var input;
var analyzer;
var volume = 0;

function setup() {
  createCanvas(600, 600);

  // Create an Audio input
  mic = new p5.AudioIn();

  // start the Audio Input.
  // By default, it does not .connect() (to the computer speakers)
  mic.start();
}

function draw() {
  background(200);

  // Get the overall volume (between 0 and 1.0)
  var v = mic.getLevel();
  // "Smooth" the volume variable with an easing function
  volume += (v-volume)/3;
  
  fill(0);
  noStroke();
  
  ellipse(200, 200, 100,100);
  ellipse(400, 200, 100,100);
  
  // Draw an ellipse size proportionally to the volume
  var mouthSize = map(volume, 0, 1, 10, 300);
  
  ellipse(300, 300, mouthSize, mouthSize/2);
}

Or just download the template p5Sound

Comments Off on Assignment: sound responsive face Posted in

Assignment: Drawing with code


Starting from a non-digital artist or artwork for inspiration, create an abstract or semi abstract image with code, using more than 10 drawing commands + at least one function that we didn’t cover in class (see the reference).

The “inspiration” can be very loose: a color scheme, a theme, the overall composition, the concept. It doesn’t have to look like a painting.

Advanced option
Same as above, make a static image but add an element of randomness.

Comments Off on Assignment: Drawing with code Posted in

Instructional Drawings


Class Exercise: Blind Drawing

  • Divide students into pairs. Call one person of each pair X, the other Y.
  • X students get drawing 1.
  • Y students get drawing 2.
  • Distribute blank paper and pens if necessary.
  • Pairs sit back to back without looking at the other’s drawing
  • X student describes his drawing to Y; Y tries to draw it from his instructions.
  • Switch at a reasonable time.
  • Y student describes her drawing to X; X tries to draw it from her instructions.
  • Pin up the drawings at the end, so people can see. Group by X/Y.
  • Discuss the results

Class Exercise: reverse engineering

This image is procedurally generated (Click to zoom):

1) Analyze it and try to “reverse engineer” the algorithm that produces similar images (only the lines, colors are not important). Describe the process using the minimum amount of clear, non ambiguous instructions.

2) Give the instructions to a person who has not seen the image and ask him/her to “execute” the process using a pen or pencil and a ruler, without giving him/her additional feedback – like in the exercise we did in class.

Warning: I don’t want exactly the same image line by line, but a universal set of instructions that can produce infinite variations of the pattern.

Here’s another image produced by the same algorithm:

Assignment: Drawing Algorithm

conditional drawings

1) Take a look at the videos and the materials on the conditional design website and manifesto. Also check peg programming for pseudo-code examples.

2) Create a set of instructions able to generate an infinite set of different drawings. The instructions can be for more than one drawer.

3) Without showing the previous results ask three (or more) people to execute them. You are not allowed to communicate verbally during the execution.

4) Post the results on the blog.

Requirements:

The executer(s) must be provided with all the necessary tools and media.

Your rules must contain an element of iteration. There should be “loops” in the execution that create repetition, seriality, fractal structures.

If there is repetition in the process you may have to devise an ending condition. You can verbally stop the execution, set up a timer, or prescribe a certain amount of iterations.

Your rules should be as specific as possible but also able to generate different results every time, so you should include at least one element of randomness or ambiguity.

Most importantly: the goal is to create a recipe for interesting drawings, not arbitrary doodles. Can you embed style and composition in a set of rules?

Comments Off on Instructional Drawings Posted in

Readings: Program or be programmed + Dads


PadulaTechMen-1024x1024
Read
Program or Be Programmed – Introduction by Douglas Rushkoff
and
The Dads of Tech by Astria Taylor and Joanne McNeil

And leave a thought in the comment section below relating the two texts. I want more than a summary or a personal reaction (I agree/I disagree).
You can start from these questions:


Can you think of an example of a computational system or artifact that “programs” our lives or deeply affect our society? What are its bias and problems (if any)? Can you envision a better alternative?

How do you think your gender affected your relation to technology and programming?

Astria Taylor’s and Joanne McNeil’s article is full of references to people, events, and controversies you may not be familiar with. Pick one and do some research around it.
Example: “telephone girls”

Assignment: Branching story


Using Twine write a branching story with one or more of the following features:

Non-human (or better, non-animal) main character
Events out of chronological order
Multiple characters

Possibly avoid: life choices, choose your own adventure tropes (moving, fighting, dying etc.).

Due Wednesday September 9th

Some tips:

Try to limit each block of text to one or two paragraphs

Don’t provide many choices, provide interesting choices

Don’t just think about the content, think about how it could be narrated:
spatial?
metaphysical?
puzzle?
self-aware / self referential?
fist, second, third person?
multiple endings?
multiple beginnings?
Do you control an avatar?
Does it have graphics? What’s the relation between graphics and text?

Examples

Queers in Love at the End of the World

HIGH END CUSTOMIZABLE SAUNA EXPERIENCE

A Kiss

HorseMaster

Destroy/wait

Even Cowgirls Bleed

The Matter of the Monster (not Twine but similar)

With Those we love alive

Here are some other good collections:
https://itch.io/games/tag-twine
http://www.freeindiegam.es/?s=twine
http://aliendovecote.com/intfic.html
http://twinehub.weebly.com/

Here are some very short examples from a game jam

Comments Off on Assignment: Branching story Posted in

Digital Self Portrait


Screen Shot 2015-08-31 at 5.16.56 PM

Explore the platform Newhive and make a “self portrait” using heterogeneous digital material.

Don’t be literal: you don’t have to reproduce your features or make a collage of your hobbies and interests. Try to convey something deeper about you, your personality, your obsessions. Feel free to lie.

Comments Off on Digital Self Portrait Posted in

Reading: Remix and remixability



Brian Jungen - prototypes for new understanding. Aboriginal masks made with deconstructed Nike shoes
Brian Jungen – prototypes for new understanding. Aboriginal masks made with deconstructed Nike shoes

PDF Manovich – Remixing and remixability

This is a short essay by Lev Manovich a prominent media theorist. Read it and write some thoughts in the comments section below. Here are some starting points:

* We live in a ‘remix’ culture. Are there limits to remixing? Can anything be remixed with anything? Shall there be an ethics of remixing?

* Can you think of some non-digital artist (besides DJs) using sampling and remixing as core strategy in their practice?

* Can you imagine a form of remix that doesn’t exist now but may exist in 5, 10 or 20 years?