Processing 1.0 - Processing Discourse

francescalyn

Processing remix
Apr 7^th, 2010, 8:43am

Hi.

I'm an artist studying new media. I want to show how the artistic process is one of mutation. I'm writing about how the artistic process is viral and what better way to track the evolution of something with code?

For example, I took a very simple example and edited it only slightly to create flower painter.

All I did was change the colors and the size.

Code:

int angle = 0; 
 
void setup() { 
  size(300, 500); 
  background(150,200,200); 
  smooth(); 
  noStroke(); 
   
  fill(0, 102); 
} 
 
 
void draw() { 
  // Draw only when mouse is pressed 
  if (mousePressed == true) { 
    angle += 10; 
    float val = cos(radians(angle)) * 20.5; 
    for (int a = 0; a < 360; a += 75) { 
      float xoff = cos(radians(a)) * val; 
      float yoff = sin(radians(a)) * val; 
      fill(227,15,150); 
      ellipse(mouseX + xoff, mouseY + yoff, val, val); 
    } 
    fill(227,203,16); 
    ellipse(mouseX, mouseY, 4, 4); 
  } 
}

My idea is to have someone else change some element in this and then I change another element, and then it just continues. These could be small changes or radical ones! If anyone is interested please message me or email me at opheliasswimteam@gmail.com

Giles

Re: Processing remix
Reply #1 - Apr 7^th, 2010, 9:27am

Interesting idea. When I was at art school I had to do a group project and we did the same thing, but using any medium we wanted. The objects/drawings etc. were documented with photographs which we assembled into a book for the "final product". I still have the book - it's interesting to flip through and see how each work inspired the one after it.

One thing you might want to think about is whether you want to start with something very simple (like this), or get some much more complex work that someone has released and start playing with that (there's heaps of stuff on openprocessing). Though I quite like the idea of the program building organically from something simple. You will get chaotic/messy code (and I like that, as an artist!).

I'd be interested in taking part... the more people the better. And make sure we document all the versions.....

Chrisir

colors
Reply #2 - Apr 7^th, 2010, 9:28am

Greetings!

Chrisir Wink

Quote:

int angle = 0;

void setup() {
  size(300, 500, P2D);
  background(150,200,200);
  smooth();
  noStroke();
  fill(0, 102);
}

void draw() {

  // Draw only when mouse is pressed

  float posX=0.0;
  float posY=0.0;

  float mouseXSave=0.0;
  float mouseYSave=0.0;

  if (mousePressed == true) {
    angle += 10;

    mouseXSave=mouseX;
    mouseYSave=mouseY;

    stroke(0,253,2);
    line (mouseXSave, mouseYSave,mouseXSave-5, mouseYSave+46);
    noStroke();

    float val = cos(radians(angle)) * 20.5;
    for (int a = 0; a < 360; a += 75) {
      float xoff = cos(radians(a)) * val;
      float yoff = sin(radians(a)) * val;
      fill(mouseYSave,15,150);
      posX=mouseXSave + xoff;
      posY=mouseYSave + yoff;
      ellipse(posX, posY, val, val);
    }
    fill(227,mouseXSave,16);
    ellipse(mouseXSave, mouseYSave, 4, 4);
  }
}

Bejoscha

Re: Processing remix
Reply #3 - Apr 7^th, 2010, 10:22am

Taking on the task... (are we allowed to "return" at a later point or should everyone only make a change once?)

Drawing is now only achieved with the pressed LEFT mouse button while clicking RIGHT will clear the window. This should open up the sketch for more interactivity...

Quote:

int angle = 0;
boolean drawNow = false;
color backCol = color(155,200,200);

void setup() {
  size(300, 500, P2D);
  background(backCol);
  smooth();
  noStroke();
  fill(0, 102);
}

void draw() {

  // Draw only when mouse is pressed

  float posX=0.0;
  float posY=0.0;

  float mouseXSave=0.0;
  float mouseYSave=0.0;

  if (drawNow) {
    angle += 10;

    mouseXSave=mouseX;
    mouseYSave=mouseY;

    stroke(0,253,2);
    line (mouseXSave, mouseYSave,mouseXSave-5, mouseYSave+46);
    noStroke();

    float val = cos(radians(angle)) * 20.5;
    for (int a = 0; a < 360; a += 75) {
      float xoff = cos(radians(a)) * val;
      float yoff = sin(radians(a)) * val;
      fill(mouseYSave,15,150);
      posX=mouseXSave + xoff;
      posY=mouseYSave + yoff;
      ellipse(posX, posY, val, val);
    }
    fill(227,mouseXSave,16);
    ellipse(mouseXSave, mouseYSave, 4, 4);
  }
}

void mouseReleased()
  {
     if (mouseButton==LEFT) drawNow=false;
  }
void mousePressed()
  {
     if (mouseButton==LEFT) drawNow=true;
     if (mouseButton==RIGHT) background(backCol);
  }

Giles

Re: Processing remix
Reply #4 - Apr 7^th, 2010, 1:16pm

Code:

int angle = 0; 
int currcol=214;
color backCol = color(200,200,255);

void setup() { 
  size(300, 500, P2D); 
  background(backCol); 
  smooth(); 
  noStroke(); 
  fill(0, 102); 
} 

void draw() { 

  // Draw only when mouse is pressed 
  if (mousePressed) { 
    angle += 10; 
    float val = cos(radians(angle)) * 20.5; 
    for (int a = 0; a < 360; a += 75) { 
	float xoff = random(0, 5)*cos(radians(a)) * val; 
	float yoff = random(0, 5)*sin(radians(a)) * val; 
	colorMode(HSB, 360, 255, 255, 255);
	fill(currcol,random(255),random(255), random(100, 255)); 
	rect(mouseX+ xoff, mouseY + yoff, val, val); 
    } 
    currcol+=random(-20,20);
  } 
}

void mouseReleased()
{
     if (mouseButton==RIGHT) background(backCol);
}

Giles Senior Member Offline Posts: 252	Re: Processing remix Reply #5 - Apr 7^th, 2010, 1:34pm @bejoscha... Just jump back in when someone else has had a turn I guess... or what did you have in mind, francescalyn?

francescalyn YaBB Newbies Offline Posts: 6	Re: Processing remix Reply #6 - Apr 8^th, 2010, 5:18pm I am so happy people have responded. I am going to blog on this and then come back, the research/experiments can be found here : http://www.processingprogress.blogspot.com/ Um, it's a pretty "basic" website, I'm planning on migrating to something a little more professional and polished eventually.

francescalyn YaBB Newbies Offline Posts: 6	Re: Processing remix Reply #7 - Apr 8^th, 2010, 5:39pm And please feel free to keep going!

PhiLho

Re: Processing remix
Reply #8 - Apr 11^th, 2010, 1:01am

Amusingly, the concept of remixing is at the core of the philosophy of Scratch.
This is a (rather primitive...) language which is graphically composed (ie. you move graphical blocks representing programming units) allowing to move sprites, play Midi notes, etc.
I looked at it because it seemed a good way to teach programming to my son (9yrs old) showing some interest to create games. Moreover, Scratch exists in localized versions (ie. we can program in French).

Anyway, people can upload their project directly from the Scratch application to the Scratch Web site, and it is automatically open sourced (with a Creative Commons license) and can be commented, receive love, etc. And the interesting part is that they encourage to download projects and remix them (hence the same of the software), favoring a community spirit. Another interesting part is that Scratch automatically keeps track of each contributor to the remix...

Another amusing fact: the IDE is coded in Smalltalk (its variant Squeak) but they export to Java to show applets on the site. There are some compatibility issues (apparently they would want to switch to Flash Sad

) but the first project I made (inspired from a sketch I made yesterday) ran faster in Java than in the IDE...

Cedric God Member Offline Posts: 1838	Re: Processing remix Reply #9 - Apr 11^th, 2010, 5:45am there was a project a while ago calles SHARE that dealed with the topic of sharing code. The goal was to make it vissible who used whos code and so one. here are some nice examples, take a look at the gallery and the documentation http://share.media.mit.edu/
	twitter.com/CedricKiefer

francescalyn YaBB Newbies Offline Posts: 6	Re: Processing remix Reply #10 - Apr 11^th, 2010, 6:55pm Oh my God, you guys are awesome. I am familiar with Scratch, I think it would be great to see it used in elementary schools. I wonder what they are teaching kids in computer science these days?

Bejoscha Full Member Offline Posts: 120	Re: Processing remix Reply #11 - Apr 12^th, 2010, 9:02am !! @Cedric: I should have come to Processing sooner... So many interesting people here. I was looking for something like Scratch for a while (same purpose: Teaching/interesting youngsters to programming), so thanks a lot for the link!

Bejoscha Full Member Offline Posts: 120	Re: Processing remix Reply #12 - Apr 12^th, 2010, 9:08am One more thought: I just realized the top-right link on open.processing.com http://adreameroftheday.com/archives/430 Is this related

Bejoscha

Re: Processing remix
Reply #13 - Apr 12^th, 2010, 9:24am

Oh, but we should go on with the code... I hope somebody else hops on as well..

Quote:

int angle = 0;
int objectMode=1;
int currcol=214;
color backCol = color(200,200,255);

void setup() {
  size(300, 500, P2D);
  background(backCol);
  smooth();
  noStroke();
  fill(0, 102);
}

void draw() {

  // Draw only when mouse is pressed
  if (mousePressed) {
    angle += 10;
    float val = cos(radians(angle)) * 20.5;
    for (int a = 0; a < 360; a += 75) {
float xoff = random(0, 5)*cos(radians(a)) * val;
float yoff = random(0, 5)*sin(radians(a)) * val;
colorMode(HSB, 360, 255, 255, 255);
fill(currcol,random(255),random(255), random(100, 255));
        drawShape(new PVector(mouseX+xoff,mouseY+yoff),objectMode,val);
    }
    currcol+=random(-20,20);
  }
}

void mouseReleased()
{
     if (mouseButton==RIGHT) background(backCol);
}

void keyReleased()
{
  switch(key)
  {
    case 'm':
     objectMode++;
     if (objectMode>3) objectMode-=3;
    break;
  }
}

void drawShape(PVector Pos, int mode, float param1)
  {
    switch (mode)
    {
    case 1:
      rect(Pos.x,Pos.y,param1,param1);
      break;
    case 2:
      ellipse(Pos.x,Pos.y,param1,param1);
      break;
    case 3:
      float start=random(0,TWO_PI);
      arc(Pos.x,Pos.y,param1,param1,start,random(start,TWO_PI));
      break;
    }
  }

francescalyn YaBB Newbies Offline Posts: 6	Re: Processing remix Reply #14 - Apr 13^th, 2010, 5:28pm If anyone has any interest in other graphical programming languages their is always pure data (pd). Pd is incredibly powerful. One of my professors uses it to make large scale reactive works of art. http://puredata.info/