xyScope Library

Processing Libraries
#1

I’m trying to use the xyScope Library: https://teddavis.org/xyscope/ .
I’d like to build something like the video demo of the library: https://vimeo.com/226597331
I managed to use an already written example from the library (the one called xtra_type) but i can’t figure out how to change the color, dimension ecc… of my oscilloscope drawing.

For example in the video, i have a quite thick light blue line, while in my code i have a very thin green line.

How do i change those parameters? I looked everywhere in the code, but i can’t figure out where and how do i have to set those parameters.

Here’s the full code of the example:

/* 
 xtra_type
 Let's draw type on the scope! 
 ANYKEY - type out
 DELETE - clear text

 » Requires Geomerative library
 
 cc teddavis.org 2017
 */

// import and create instance of XYscope
import xyscope.*;
XYscope xy;

// minim is required to generate audio
import ddf.minim.*; 

// geomerative is required to generate text points
import geomerative.*; 
RShape grp; 
RPoint[][] pointPaths;

// store our text to draw
String txtString = "";

void setup() {
  size(512, 512);

  // initialize XYscope with default/custom sound out
  xy = new XYscope(this, "");

  // initialize Geomerative
  RG.init(this);
}

void draw() {
  background(0);

  // clear waves like refreshing background
  xy.clearWaves(); 

  // render type with Geomerative
  grp = RG.getText(txtString, "FreeSans.ttf", width/2, CENTER); 
  grp.centerIn(g, 30);
  RG.setPolygonizer(RG.UNIFORMSTEP);
  RG.setPolygonizerStep(10);
  pointPaths = grp.getPointsInPaths();

  pushMatrix();
  translate(width/2, height/2); 
  if (pointPaths != null) { // only draw if we have points 
    for (int i = 0; i < pointPaths.length; i++) { 
      xy.beginShape(); 
      for (int j=0; j < pointPaths[i].length; j++) { 
        xy.vertex(pointPaths[i][j].x, pointPaths[i][j].y);
      } 
      xy.endShape();
    }
  } 
  popMatrix();

  // build audio from shapes
  xy.buildWaves();

  // draw Wave + XY analytics
  xy.drawWave();
  xy.drawXY();
}

void keyPressed() {
  if (keyCode == 8) {
    xy.clearWaves();
    txtString = "";
  } else if (keyCode != 16 && keyCode != 17 && keyCode != 18 && keyCode != 157 && keyCode != 37 && keyCode != 38 && keyCode != 39 && keyCode != 40) {
    txtString += key+"";
  }
}
1 Like
#2

You want to change the line color of the drawing output? Did you try setting the processing line color with stroke() before calling xy.drawWave()?

#3

For dimension, what are you trying to change? Do you want to change the size of the Processing sketch, eg with size()?

#4

Hey @mattiasu96 – the reason it looks so different than the video demo, is in the video, the sketch is sending audio to an analog oscilloscope – that’s then being recorded. The thickness/color of the line etc, are all dependent on the quality of that oscilloscope, the color coating of the screen and sharpness and intensity of the beam of light. Within Processing, you will only see a dinky little preview for debugging what it will look like. I recommend trying it out with a real analog oscilloscope if you have access to one, but until then, setup something to route your computer audio within itself (if on a mac, check out Blackhole ) – then view the sketch using Hansi Raber’s Oscilloscope. It will get you very close to the real thing and must nicer results than the preview within Processing.

2 Likes
#5

whoah, thats really cool