Coding / Session 3

October 16, 2013 § Leave a comment

[Add and watch video on UniLearn when it’s added, noting down what certain code does]

In this session with Spencer we developed on the previous session’s output, doing so by creating brush strokes though the image giving an effect similar to a painting of sorts, and also making the jumbled shapes (from the last code) actually form the original image, which I wanted to actually do last week. Instead of using the same passport image, I decided to add my own image of my bottle cap collection (mirrored) for a little customisation, tweaking the code to gain slightly different effects, such as changing the size, shape, colour and opacity of the paint brushing effects.

 

import processing.opengl.*;

PImage face;
int pos;
  //these can be seen as ‘boxes’ of which information will be put in
float brushx;
float brushy;
float brushsize;
  // using float so we can use fractional values, because we want the speed to divide into fractions
float brushtargx;
float brushtargy;
 //brush’s target
int ampainting;
 //something that will let us know we’re in the middle of the [watch video]
 //all of the above (excluding ‘PImage’) are variables, these are always declared at the start of program

void setup(){
 
  face=loadImage(“source.jpg”);
  size(face.width,face.height,OPENGL);
 
brushx=random(face.width);
brushy=random(face.width);
  // here we’ve given values to the variables (float+int brush stuff)
brushsize=1+random(50);
  // the brush has a variable stroke size – ‘5+random(50)’
brushtargx=random(face.width);
brushtargy=random(face.width);

// ‘cur’ stands for current, ‘curx’ and ‘cury’ indicate the current coordinates for the brushstroke

// ‘targ’ stands for target, ‘targx’ and ‘targy’ indicate the target coordinates for the brushstroke
ampainting=1;

}

void draw(){
  // try and animate a brush stroke
  fill(0,155,200);
  ellipse(brushx,brushy,brushsize,brushsize);
    // draw a ellipse, plotted at brush x & y, using brush sizes for height
  fill (150,10,0);
  ellipse(brushtargx,brushtargy,brushsize,brushsize);
  brushx=brushx+((brushtargx-brushx)/7);
  brushy=brushy+((brushtargy-brushy)/7);
    //takes the distances and divides by 7 (‘/’ means divide), making it move a little bit of the way
 
  if(brushtargx-brushx<10){
  // getting close on the x axis
  if(brushtargy-brushy<10){
  // getting close on the y axis
  brushx=random(face.width);
  brushy=random(face.width);
  brushsize=5+random(10);
  brushtargx=random(face.width);
  brushtargy=random(face.width);
    
  }
  }
 
   // this is to render the full image
  for(int lop=0;lop<80;lop=lop+1){
    //this ^^ sticks the pixel in the ‘pos’ box
  pos=int(random(face.width*face.height));
    // here we’re picking a random pixel from a ‘filing cabinet’
    // we need to be able to store this draw number from the ‘filing cabinet’ so we can map the pixel back to the image, in this case a face.
  color x=face.pixels[pos];
  stroke(red(x),green(x),blue(x),0);
  fill(red(x),green(x),blue(x),40);
    // these make the ellipses have the fade effect
  //rect(random(face.width),random(face.height),10,10);
    // random width & height, then drawing a 10×10 block
  int ypos=pos/face.width;
  int xpos=pos-(ypos*face.width);
    //as far as the pc is concerned, the image is just pixels, the computer just sees one line of pixels, so we need to slice this data up. (watch video on Uni Learn)

ellipse(xpos,ypos,5,5);

  }
 
  }

screenshot

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

What’s this?

You are currently reading Coding / Session 3 at Leo Patterson.

meta

%d bloggers like this: