The History of Interaction 1


No Comments

Sorry, the comment form is closed at this time.

The History of Interaction 1


Slides Arduino GPS Data Logging Session 070314

Reviewing And Plotting The Data Logs Back At The Lab

Download the PowerPoint Slides from the session here:

Arduino gps2 060314 from Benjamin Freeth
Images From The Session:

Capturing GPS Data On Northumberland Street

Data Logging In Newcastle CIty Centre

 

First Processing Session Material

(on 27 Jan 2014)

Projects developed with Processing

  1. Digital Natives and Glitched Realitiesby Matthew Plummer-Fernandez
  2. City Symphoniesby Mark McKeague
  3. Continuumby Mary Huang
  4. Process Compendium 2004-2010by Casey Reas
  5. Platonic Solidsby Michael Hansmeyer
  6. Cell Cycle by Nervous System

The Very Basic

1. My first code: Make a canvas!

  1. Canvas is a coordinate system
  2. x and y = (500, 400)
  3. size();
// my first code!!

size(500,400);

2. Create some Shapes (2D primitives)

Rectangle function = “ Rect + ( parameters ) + ;

// function name + parenthesis + semicolon

// to draw a rectangle on the screen starting on (100,50)

// with 200 in width and 50 in height

rect(100,50,200,50);

  1. rect();
  2. ellipse();
  3. line();
  4. point();

3. RGB Colors:

  • Red + Green = Yellow
  • Red + Blue = Purple
  • Green + Blue = Cyan (blue-green)
  • Red + Green + Blue = White
  • no colors = Black
  1. backgound();
  2. stroke();
  3. noStroke();
  4. fill();
  5. noFill();
  6. Tools – Color Selector
  7. random();
  8. println();

4.Introduction of structures and functions

http://processing.org/reference/

Useful Drawing Tool: For loop

5. for loop

  1. Controls a sequence of repetitions.
  2. A basic for structure has three parts: init,test, and update.
// draw a few ellipses with ” for ” loop

for (int i= 0; i<5; i+=1) { // i = 0 1 2 3 4

ellipse(50+i*50, 150, 30, 30);

}

Easy Interaction

6. Interact

  1. setup() v.s. draw()
  2. Think about: how do we animate things?
  3. setup(): initialization, only runs once
  4. draw(): loop again and again
// my first interactive code!

void setup() {

size(600, 600);

}

voiddraw() {

ellipse(mouseX, mouseY, 100, 100);

}

mouseX is a variable to hold X position of your mouse

7. Variable:

  1. Variable is a word that holds a value
  2. = (ASSIGN) and == (EQUALS TO)
  3. int
  4. float
  5. color
  6. boolean
  7. PImage

8.Conditionals

  1. if()
  2. True and False
  3. || (logical OR)
  4. && (logical AND)
  5. != (logical NOT EQUAL TO)
int x = 100;

if(x >10){

ellipse(150,150,50,50);

}

// YES! The ellispe will be drawn

 

9. Work with images !

  1. PImage is a variable that can hold a picture
//declare an image data type

PImage myPic;

void setup() {

size(500,500);

// load and assign image data to your image variable

myPic=loadImage(“XXXX.png“); // can be jpg, png, gif

}

voiddraw() {

//draw the image at the top left with 400 in with and 300 in height

image(myPic,0,0,400,300);

}

 

Menu

Theory/ Practice

Research/ Enterpirse

Live Electronic Performance

Digital Media

Curriculum