[ Processing 作品开源 ] sketch_aug18a_2011_colloidTextBasic

[RavenKwok]

Colloid Text 是俺上个星期构思，编写的一个基于Processing 的创意互动字体生成小程序。下图是生成的字体样本。



大家也可以在Youku 上观看我抓取剪辑的视频效果。

http://v.youku.com/v_show/id_XMjk4MjI2NDQ0.html

有翻墙能力的童鞋也可以观看Colloid Text 在Vimeo HD 的视频效果。

http://vimeo.com/28228896

目前俺已在openP5 社区开源了作品基本功能的代码。

http://openprocessing.org/visuals/?visualID=34978

在这里也贴一下代码，大家对于代码内容若有不解处，可以跟帖提问。

请见三楼更新后的代码。简化了testKey() 函数，改用Processing 的默认字体显示提示。Thank vinjn XD

程序代码

//Raven Kwok | 郭锐文
//Email: raystain@gmail.com
//Blog: the-moor.blogbus.com
//Vimeo: vimeo.com/ravenkwok
//Weibo: weibo.com/ravenkwok
 
import geomerative.*;
 
RFont font;
PFont p;
RGroup grp;
RPoint[] pnts;
float [] iniPntxs;
float [] iniPntys;
float [] iniPntxsT;
float [] iniPntysT;
char [] targetKeys = {
  'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h',
  'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p',
  'q', 'r', 's', 't', 'u', 'v', 'w', 'x',
  'y', 'z'
};
float xOffset, yOffset;
 
void setup()
{
  background(255);
  size(600, 480);
  RG.init(this);
  p = loadFont("Corbel-BoldItalic-14.vlw");
  font = new RFont( "Corbel Bold Italic.ttf",250, RFont.CENTER);
  frameRate(30);
  xOffset = width/2;
  yOffset = height/4*3;
  grp = font.toGroup("c");
  RCommand.setSegmentLength(1);
  RCommand.setSegmentator(RCommand.UNIFORMLENGTH);
  grp = grp.toPolygonGroup();
  pnts = grp.getPoints();
  iniPntxsT = new float[pnts.length];
  iniPntysT = new float[pnts.length];
  iniPntxs = new float[pnts.length];
  iniPntys = new float[pnts.length];
  for ( int i = 0; i < pnts.length; i++ )
  {
    iniPntxsT[i] = pnts[i].x+xOffset;
    iniPntysT[i] = pnts[i].y+yOffset;
    iniPntxs[i] = iniPntxsT[i]*1.1+random(-50, 50);
    iniPntys[i] = iniPntysT[i]*1.1+random(-50, 50);
  }
  smooth();
}
 
void draw()
{
  noStroke();
  fill(255,30);
  rect(0,0,width,height);
  strokeWeight(0.5);
  stroke(0);
  fill(255,20);
  beginShape();
  for ( int i = 0; i < pnts.length; i++ )
  {
    iniPntxs[i] += (iniPntxsT[i]-iniPntxs[i])/5;
    iniPntys[i] += (iniPntysT[i]-iniPntys[i])/5;
    float x0 = pnts[i].x;
    float y0 = pnts[i].y;
    float a = mouseX-x0;
    float b = mouseY-y0;
    float r = sqrt(a*a+b*b);
    float quer_fugir_x = pnts[i].x-(a/r)*200/r;
    float quer_fugir_y = pnts[i].y-(b/r)*200/r;
    float quer_voltar_x = (iniPntxs[i]-x0)/3;
    float quer_voltar_y = (iniPntys[i]-y0)/3;
    pnts[i].x = quer_fugir_x+quer_voltar_x;
    pnts[i].y = quer_fugir_y+quer_voltar_y;
    curveVertex(pnts[i].x, pnts[i].y);
  }
  endShape();
  textFont(p);
  fill(0,40);
  text("* Colloid Text Basic *",50,50);
  text("Type among a-z and move your cursor within the letter's range to see the effect.",50,80);
}
 
void keyPressed() {
  for (int i=0;i<targetKeys.length;i++) {
    testKey(targetKeys[i]);
  }
}
 
void testKey(char keyInput_) {
  if (key == keyInput_) {
    String targetLetter = str(keyInput_);
    grp = font.toGroup(targetLetter);
    RCommand.setSegmentLength(1);
    RCommand.setSegmentator(RCommand.UNIFORMLENGTH);
    grp = grp.toPolygonGroup();
    pnts = grp.getPoints();
    iniPntxsT = new float[pnts.length];
    iniPntysT = new float[pnts.length];
    iniPntxs = new float[pnts.length];
    iniPntys = new float[pnts.length];
    for ( int i = 0; i < pnts.length; i++ )
    {
      iniPntxsT[i] = pnts[i].x+xOffset;
      iniPntysT[i] = pnts[i].y+yOffset;
      iniPntxs[i] = iniPntxsT[i]*1.1+random(-50, 50);
      iniPntys[i] = iniPntysT[i]*1.1+random(-50, 50);
    }
  }
}

[ChocolateUniverse]

赞！支持开源，原创。马上把代码试一试。

[RavenKwok]

程序代码

//Raven Kwok | 郭锐文
//Email: raystain@gmail.com
//Blog: the-moor.blogbus.com
//Vimeo: vimeo.com/ravenkwok
//Weibo: weibo.com/ravenkwok

import geomerative.*;

RFont font;
RGroup grp;
RPoint[] pnts;
float [] iniPntxs;
float [] iniPntys;
float [] iniPntxsT;
float [] iniPntysT;
float xOffset, yOffset;

void setup()
{
  background(255);
  size(600, 480);
  RG.init(this);
  font = new RFont( "Corbel Bold Italic.ttf", 250, RFont.CENTER);
  frameRate(30);
  xOffset = width/2;
  yOffset = height/4*3;
  grp = font.toGroup("c");
  RCommand.setSegmentLength(1);
  RCommand.setSegmentator(RCommand.UNIFORMLENGTH);
  grp = grp.toPolygonGroup();
  pnts = grp.getPoints();
  iniPntxsT = new float[pnts.length];
  iniPntysT = new float[pnts.length];
  iniPntxs = new float[pnts.length];
  iniPntys = new float[pnts.length];
  for ( int i = 0; i < pnts.length; i++ )
  {
    iniPntxsT[i] = pnts[i].x+xOffset;
    iniPntysT[i] = pnts[i].y+yOffset;
    iniPntxs[i] = iniPntxsT[i]*1.1+random(-50, 50);
    iniPntys[i] = iniPntysT[i]*1.1+random(-50, 50);
  }
  smooth();
}

void draw()
{
  noStroke();
  fill(255, 30);
  rect(0, 0, width, height);
  strokeWeight(0.5);
  stroke(0);
  fill(255, 20);
  beginShape();
  for ( int i = 0; i < pnts.length; i++ )
  {
    iniPntxs[i] += (iniPntxsT[i]-iniPntxs[i])/5;
    iniPntys[i] += (iniPntysT[i]-iniPntys[i])/5;
    float x0 = pnts[i].x;
    float y0 = pnts[i].y;
    float a = mouseX-x0;
    float b = mouseY-y0;
    float r = sqrt(a*a+b*b);
    float quer_fugir_x = pnts[i].x-(a/r)*200/r;
    float quer_fugir_y = pnts[i].y-(b/r)*200/r;
    float quer_voltar_x = (iniPntxs[i]-x0)/3;
    float quer_voltar_y = (iniPntys[i]-y0)/3;
    pnts[i].x = quer_fugir_x+quer_voltar_x;
    pnts[i].y = quer_fugir_y+quer_voltar_y;
    curveVertex(pnts[i].x, pnts[i].y);
  }
  endShape();
  fill(0, 40);
  text("* Colloid Text Basic *", 50, 50);
  text("Type among a-z and move your cursor within the letter's range to see the effect.", 50, 80);
}

void keyPressed() {
  if (key>= 'a' && key<= 'z') {
    testKey(key);
  }
}

void testKey(char keyInput_) {
  String targetLetter = str(keyInput_);
  grp = font.toGroup(targetLetter);
  RCommand.setSegmentLength(1);
  RCommand.setSegmentator(RCommand.UNIFORMLENGTH);
  grp = grp.toPolygonGroup();
  pnts = grp.getPoints();
  iniPntxsT = new float[pnts.length];
  iniPntysT = new float[pnts.length];
  iniPntxs = new float[pnts.length];
  iniPntys = new float[pnts.length];
  for ( int i = 0; i < pnts.length; i++ )
  {
    iniPntxsT[i] = pnts[i].x+xOffset;
    iniPntysT[i] = pnts[i].y+yOffset;
    iniPntxs[i] = iniPntxsT[i]*1.1+random(-50, 50);
    iniPntys[i] = iniPntysT[i]*1.1+random(-50, 50);
  }
}

[vizinsight]

import geomerative.*;
将军！这个geomerative的库哪里下？

[vinjn]

just google it

[RavenKwok]

import geomerative.*;
将军！这个geomerative的库哪里下？

http://www.ricardmarxer.com/geomerative/

[vizinsight]

谢谢

[石涧]

支持支持，上次在微博上看到了，的确很棒啊！！！

[RavenKwok]

支持支持，上次在微博上看到了，的确很棒啊！！！

THX !