Week7 Workshop

svgSave2

SVG Control 

SVG

Scalable Vector Graphics (SVG) is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation. The SVG specification is an open standard developed by the World Wide Web Consortium (W3C) since 1999. (wikipedia)

1) Installing Geomerative Library

Geomerative is a library for Processing. It extends 2D geometry operations to facilitate generative geometry. Includes a TrueType font and an SVG interpreters. This library exposes the shapes (such as vector drawings or typographies) in a more approchable way. Geomerative makes it easy to access the paths, the handles and the points, making it easy to develop generative typography and geometry pieces in Processing (ricardmarxer.com). Today’s tutorial is based on the HelloSplitShapes example 1.

Step A Download the Geomerative Library from here

Step B Create your own art in illustrator and save as SVG file.

Download the processing sketch from here.

import geomerative.*;
RShape shp;
int first = 0;

void setup(){
size(600, 600);
smooth();
// VERY IMPORTANT: Allways initialize the library before using it
RG.init(this);

shp = RG.loadShape("bot2.svg");
shp = RG.centerIn(shp, g, 100);
}

void draw(){
translate(width/2, height/2);
background(255);

noFill();
stroke(255, 200);
float splitPos = map(mouseX, 0, width, 0, 1);
RShape[] splitShapes = RG.split(shp, splitPos);

RG.shape(splitShapes[first]);
}
void mousePressed(){
first = (first + 1) % 2;
}

 

2) Scrub SVG through arduino analog input. Download the processing sketch from here.

import cc.arduino.*; //arduino
import processing.serial.*; //arduino
import geomerative.*;

RShape shp;
Arduino arduino; //ardiono

int first = 0;

void setup(){
  arduino= new Arduino(this, "/dev/tty.usbmodem1411", 57600);
  
  size(600, 600);
  smooth();

  RG.init(this);
  
  shp = RG.loadShape("bot2.svg");
  shp = RG.centerIn(shp, g, 100);
}

void draw(){
  translate(width/2, height/2);
  background(255);

  noFill();
  stroke(255, 200);
  //float splitPos = map(mouseX, 0, width, 0, 1);
  float splitPos = map(arduino.analogRead(0), 0, 1023, 0, 1);
  RShape[] splitShapes = RG.split(shp, splitPos);
  RG.shape(splitShapes[first]);
}
void mousePressed(){
  first = (first + 1) % 2;
}

Resources

http://issuu.com/jpagecorrigan/docs/type-code_yeohyun-ahn/20

http://caligraft.com

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

https://github.com/rikrd/geomerative

http://freeartbureau.org/fab_activity/geomerative-tutorial-part-1/

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

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