skjermbilder - Grab

For å kunne ta skjermbilder må dere åpne et program som heter Grab. Gå inn på ta bilde som ligger øverst i menyen, deretter velger dere markert område. Deretter merker området dere vil ha bilde av og lagre. For å laste opp filen til wikien må dere inn i Photoshop og endre format. Dere vet selv hvilket format dere må bruke for å kunne laste opp i wiki.

interaktiv kunst

Her ligger noen linker til kunsteren Marius Wats, hvor dere selv kan være med på å skape de ulike kunstverkene. Det vil stå en veiledning på engelsk på hver av sidene. Dere påvirker ved hjelp av bevegelse og klikk med mus.
Med interaktiv kunst menes det som gjelder eller bygger på interaksjon (som vil si samhandling, vekselvirkning og gjensidig påvirkning); som skjer i samspill mellom bruker og datamaskin.

AmoebaAbstract01  

AmoebaAbstract=1_variant

AmoebaAbstract02

randomUgly1

C_Drawer


Bezierhorn

youtube

I de to øverste filmene er musikk blitt visualisert. Den 3. videoen viser en annen måte å bruke Processing på, ved å tegne. Den siste og 4. filmen er er det interaktive kunstverket dere skal jobbe med. Bildet blir påvirket av bevegelser foran wec cam, og størrelsen på sirklene endres ettersom hvor raske bevegelsene er.

koder

Koder finner dere i programmet Processing på blandt annet disse sidene:

file - examples - GettingStartedBook
Under examples vil det ligge flere koder.

Help - getting started - reference (gå inn via programmet eller bruk linken nedenfor).
Her må dere selv kopiere og lime inn i en ny sketch (file - new).
http://processing.org/reference/

Nedenfor ligger det en kode som dere kan kopiere inn i en ny sketch. Trykk på play flere ganger, og se hvordan bildet endrer seg.

float NoiseScale = 0.005;
float NoiseOffsetX, NoiseOffsetY;

void setup() {
  size(800, 600, P2D);
  background(255);
  smooth();
  noFill();
  stroke(0, 0, 0, 32);
  for (int i= 0; i<300; i++) {
    NoiseOffsetX += 5;
    NoiseOffsetY += 7.1;
    drawOneStream();
  }
}

void drawOneStream() {
  float px = 0;
   float py = height/2.0;
    float vx = 1;
     float vy = 0;
     int pcnt = 0;
     while ((px>=0) && (px<width) && (py<height) && (py>=0)) {
       point (px, py);
       float xNoise = noise((pcnt+NoiseOffsetX) * NoiseScale);
        float yNoise = noise((pcnt+NoiseOffsetY) * NoiseScale);
        vx = ((2*vx) + 1 + map (xNoise, 0, 1, -1, 1))/4.0;
        vy = ((3*vy) + map (yNoise, 0, 1, -1, 1))/4.0;
        px += vx;
        py += vy;
        pcnt++;
     }
}

      

Interaktiv kunst - oppgave

Her ligger kodene til det interaktive kunstverket. Ved å kopiere og lime disse inn i en ny sketch i processing vil dere selv være med på å påvirke det som skjer på skjermen. Dere kan hele tiden begynne på nytt ved å trykke på play knappen. Ønsker dere å sammenligne resultatene dere får, limer dere inn koden i flere sketcher. Ta deretter stillbilder av det dere ønsker å lagre. Alle skal ha minimum 2 stillbilder som legges ut i wikien dere laget forrige uke. Hver elev skal reflektere over hvorfor akkurat hans/hennes kunstverk ble som det ble, og hva som ble gjort for å påvirke kunstverket. 

import processing.video.*;
Capture video;

int numPixels;
int[] previousFrame;
int[][] diffPoints;
int diffAmount = 0;

int particleMin = 2;
int particleAlpha = 100;

void setup()
{
  size(640, 480);
  background (255);
  noStroke();
  frameRate(30);
  fill(100);
  smooth();
  video = new Capture(this, width, height, 30);
  numPixels = width * height;
  previousFrame = new int[numPixels];
  diffPoints = new int[height][width];
}

void captureEvent(Capture video) {
  video.read();
}

void draw()
{
  diffAmount = 0;
  for (int i = 0; i < numPixels; i++)
  {
    diffPoints[abs(i / width)][i % width] = 0;
    color currColor = video.pixels[i];
    color prevColor = previousFrame[i];
    // Extract the red, green, and blue components from current pixel
    int currR = (currColor >> 16) & 0xFF; // Like red(), but faster
    int currG = (currColor >> 8) & 0xFF;
    int currB = currColor & 0xFF;
    // Extract red, green, and blue components from previous pixel
    int prevR = (prevColor >> 16) & 0xFF;
    int prevG = (prevColor >> 8) & 0xFF;
    int prevB = prevColor & 0xFF;
    // Compute the difference of the red, green, and blue values
    int diffR = abs(currR - prevR);
    int diffG = abs(currG - prevG);
    int diffB = abs(currB - prevB);
    // Render the difference image to the screen
    color diff = color(diffR, diffG, diffB);
    int isPointDiff = 0;
    if (diff > -15000000)      //-16777216
    {
      isPointDiff = 1;
      ++diffAmount;
    }
    diffPoints[abs(i / width)][i % width] = isPointDiff;
  }
  checkForNewPoint(diffAmount);
 
  arraycopy(video.pixels, previousFrame); 
}

void checkForNewPoint(int diffAmount)
{ 
  if(diffAmount > 100000)
  {
    return;
  }
  float milliseconds = millis();
  if (milliseconds < 1000) return;
  if (diffAmount < 40) return;
  int blocks = 0;
  for (int i = 0; i < height; i++)
  {
    for (int j = 0; j < width; j++)
    {     
      if(i > 1 && j > 1 && diffPoints[i][j] == 1)
      {
        if(diffPoints[i - 1][j] == 1 && diffPoints[i - 2][j] == 1
            || diffPoints[i][j - 1] == 1 && diffPoints[i][j - 2] == 1)
        {
          ++blocks;
          int randNum = 10;
          int randX = int((randNum / 2) - random(randNum));
          int randY = int((randNum / 2) - random(randNum));
          color c = previousFrame[(i * width) + j];
          fill(c, particleAlpha);
          int particleSize = diffAmount / 700;
         
          if(random(particleSize) > (particleSize - (.9999999 / particleSize)))
          {
            ellipse(j, i, particleMin + particleSize, particleMin + particleSize);
          }
        }
      }
    }
  } 
}

void mousePressed() {
  fill(255);
  rect(0, 0, width, height);
}
 

processing.org

Programmet Processing er et kodet programmeringsspråk,  hvor man kan lage lage bilder, animasjoner, og interaksjoner. Språket i programmet heter API og blir kalt The Processing language. Programmet ble utviklet for å fungere som en programvare skissebok, for å lære grunnleggende programmering i en visuell sammenheng. 

Processing har utviklet seg til et verktøy for å generere profesjonelt arbeid. I dag er det titusenvis av studenter, kunstnere, designere, forskere og amatører som bruker Processing. Med interaksjoner menes interaktiv kunst, som er kunst som gjelder eller bygger på interaksjon; noe som skjer i samspill mellom bruker og datamaskin.

Last ned programmet Processingen her.
I et innlegg som heter koder vil dere få vite hvordan dere begynner.