Suggestions? :)

--Darin

import ddf.minim.*;

PImage img1, img2;
int trans ;
int vol = 1;
float transparency = 255;
AudioPlayer latido;
AudioPlayer pip;
Minim minim;


void setup() {

  size(500, 500);
  background(0);
  trans = 255;
  vol = 1;
  pipi = 3;
  img1 = loadImage("cora.jpg");
  minim = new Minim(this);
  pip = minim.loadFile("pip.mp3");
  latido = minim.loadFile("latido.mp3");
  // the audio "latido" in loop
  latido.loop();
}

void draw() {
  //i combine the audio with the transparency of the image
  int vol = int(latido.mix.level()*500);
  println(vol);
  int trans = int(map(vol,-100,200,80,200));
  tint(trans,100);
  image(img1, -30, -300); 

  if (transparency > 0) { transparency -= 10; }
  tint(0, transparency);
  image(img1, -30, -300);
}
_
**        void keyPressed(){
          //when you press any key the audio "latido" stop, and another audio(pip) starts and the image fade out with tthe last audio(here is my doubt)

          latido.pause();

          pip.setGain(-15);
          pip.play();
          pip.loop();

        }**_

the following code I draw a sine wave.

    float xValue;
    float yValue[];
    float yScale[];


    void setup() {
      size(800, 400);
      background(0);
      noLoop();
      yValue = new float[width];
      yScale = new float[height];
      for (int i=0; i<width; i++) {
        xValue = map(i, width,0, 0, 4*PI);
        yValue[i] = sin(xValue)*height/2+height/2;       //<-- Currently I help myself by multiplication with height/2.
        //yScale[i] = map(yValue[i],199,201,0,height);  // <-- I wanna use map() for rescaling the y values but There is always an error
      }
    }

    void draw() {
      background(0);
      stroke(255);
      strokeWeight(2);
      for (int i=0; i<799; i++) { //<-- The same problem here. Whenever I set the width as limit.
        line(i, yValue[i], i+1, yValue[i+1]);
        println("yValue:"+yValue[i]);
      }
    }

I wanted to know how does the map(); function actually works.

I did come across that for "variable2 = map(variable1, min1, max1, min2, max2);" we apply the formula "variable2 = min2+(max2-min2)*((variable1-min1)/(max1-min1))".

But how did we come to this?And does processing sole this by using matrices? If yes then how

Thanks a lot.

a while ago I followed this Coding Challenge video by Daniel Shiffman to create a moving 3D terrain:

I now want to map a 2D shape onto the terrain. Unfortunately I am a complete noob to programming and have no idea how to do this so I would really appreciate some help.

Can someone please point me in the right direction? :)

Many thanks and best regards!

https://docs.google.com/spreadsheets/d/1B6ezcmjntEI-nI6_miO6UQaOU78ZXnDep-qtyVUWmJ4/edit?usp=sharing

PImage mappa; 
Table dati;

void setup(){
  size(1000, 500); 
  mappa= loadImage("world.png"); 
  dati= loadTable("energydata.csv", "header"); 
}

void draw(){
image(mappa, 0, 0, width, height);


 for( int riga=0; riga < dati.getRowCount(); riga++){
float lat= dati.getFloat(riga,0); 
float lon= dati.getFloat(riga,1); 
/*String nome = dati.getString(riga,2);
String stato = dati.getString(riga,3);
float potenza= dati.getFloat(riga,4);
String tipo= dati.getString(riga,5);


float la=map(lat, 90, -90, 0, height);
float lo=map(lon, -180,180,0,width);
println(lon);

fill(#4AF2A1,80);
noStroke();
ellipse(lo,la,10,10);

noLoop();  }}

void setup() 
    {
      size(200, 200);
      stroke(255);

    }
    void draw()
    {
      background(34, 40, 20);
      fill(255, 255, 255);
      ellipse(width/2, height/2, width, height);

      pushMatrix();
      translate(width/2, height/2);
      rotate(radians(map(second(),0, 60, 0, 360)));
      fill(255, second()*2, second()*2);
      noStroke();
      rect(0, -50, 10, 10);
      popMatrix();

     pushMatrix();
     translate(width/2, height/2);
     rotate(radians(minute()*6));
     stroke(0);
     line(0, 0, 0, -50);
     popMatrix();

     pushMatrix();
     translate(width/2, height/2);
     rotate(radians(hour()*5));
     stroke(0);
     line(0, 0, 0, -50);
     popMatrix();
    }

tileShader.set("time", millis() / 1000.0);

If I try to modify this so that the tile will move at a speed according to my mouse,

float t =millis() / 1000.0; 
float pctX = map (mouseX, 0, width, 0, 1);
tileShader.set("time", t*pctX);

the shader will do this 'scrubbing' effect where the entire image moves very quickly, but then once you stop moving the mouse, it will go at the speed you want. Is there any way to avoid this scrubbing effect? What I'm trying to accomplish are smooth increases in speed of the tile movement.

I've been learning javascript over the last couple of months, teaching myself. I'm trying to expand how I think about javascript and learn how to interact with data. That led me to Schiffman's youtube videos and here I am!

Anyway, I'm hoping someone could help me figure out how to sort USGS earthquake data by time using a slider. Here's my Gist of the code, but below I'll include where I'm finding problems.

I can't figure out how to map the timestamps to something usable on the slider. Any help is welcome!

For starters, I'm not sure if I'm even mapping my slider correctly. Here's the** time function**:

function timeSlider(min, max) {

    //ms
    //slider = createSlider(minMS, currentTime, maxMS);
    //day in ms
    min = 86400000;
    //30 days in ms
    max = min * 30;
    //get 30 days ago timestamp
    min = currentTime - max;

    max = currentTime;
    //map slider from 1 day in ms to 30 days in ms
    var sliderMinMS = map(minMS, 0, min, 0, currentTime);
    var sliderMaxMS = map(maxMS, 0, (max - min), 0, currentTime);
    return sliderMinMS, sliderMaxMS;
}

Here's the setup function:

function setup() {
    createCanvas(1024, 512);
    translate(width / 2, height / 2);
    imageMode(CENTER);
    image(mapImg, 0, 0);

    timeSlider(minMS, maxMS);

    slider = createSlider(minMS, currentTime, maxMS);
    slider.size(900);
    slider.position(20, 450);

}

here's the draw function (is this the most efficient way to display the data?):

function draw() {
    var cx = webMerX(clon);
    var cy = webMerY(clat);


    for (var i = 1; i < earthquakes.length; i++) {
        data = earthquakes[i].split(/,/);

        date[i] = data[0];
        //convert quake time to ms
        var timeQuake = [];
        timeQuake = date[i].getTime();

        var lat = data[1];
        var lon = data[2];

        var mag = data[4];

        var x = webMerX(lon) - cx;
        var y = webMerY(lat) - cy;

        mag = sqrt(pow(10, mag));
        var magMax = sqrt(pow(10,10));

        var d = map(mag, 0, magMax, 0, 500);

        if(timeQuake[i] <= slider.value()) {

            fill(255, 130, 100);
            stroke(255);
            ellipse(x, y, d, d);
        }
    }

}

float easing = 0.01;
float xRed = 62, xGreen = 20, xBlue = 173;
float yRed = 207, yGreen = 1, yBlue = 106;
float rDiff, gDiff, bDiff, avgDiff;

void setup() {
 size(500, 500);
}

void draw() {
  background(0);

  rDiff = dist(0, xRed, 0, yRed);
  gDiff = dist(0, xGreen, 0, yGreen);
  bDiff = dist(0, xBlue, 0, yBlue);
  avgDiff = (rDiff + gDiff + bDiff) / 3;

  if(avgDiff > 1) {
  xRed += (yRed - xRed) * easing;
  xGreen += (yGreen - xGreen) * easing;
  xBlue += (yBlue - xBlue) * easing;

  fill(xRed, xGreen, xBlue);      
  ellipse(width/2, height/2, 300, 300);
  }

}

I'm trying convert a long CSV data into a sound track and I wrote this code, but I'm not able to generate a sound. It's just a beep.

It's CSV on meteor spotting and I got the values for longitude and latitude and I tried to map it down for tri values.

Please help me as I'm pretty new to Processing :)

In 3d sketches null of coordinares begins here (green number "1"), how to make it begin there (green number "2"), like in 2d sketches? I realize that mouseX and mouseY not working properly because beginning of coordinates is not in the upper left corner.

Cheers, H.

The following code will display the clock, and color the text, using the current clock(ss/mm/hh) as a hex value. I first wrote the code in processing where it works. Now I want to execute it as p5 however, after changing the syntax to fit the p5 language, it dosen't work. I can't figure out why, tho I suspect the "var" instead of "string" to be an possible issue?

Can you guys explain why it dosen't work?

p5.js code:

var s,m,h; 
function setup() {
  createCanvas(800,600);

}

function draw() {
 s = second();
 m = minute();
 h = hour(); 

background(30);
var s_ = nf(s,2);
var m_ = nf(m,2);
var h_ = nf(h,2);

var hex_ =  "FF" + s_+ m_+ h_;
var c = unhex(hex_);

fill(c);
textSize(30);
text("#",width/2-70,height/2); 
text(s_,width/2-40,height/2); 
text(m_,width/2,height/2); 
text(h_,width/2+40,height/2); 
}

Same programme, just written in processing and WORKS:

int s, m, h; 

void setup(){
  size(800,600);   
}

void draw(){
 s = second(); 
 m = minute();
 h = hour(); 

background(200);
String s_ = nf(s,2);
String m_ = nf(m,2);
String h_ = nf(h,2);

String hex_ =  "FF" + s_+ m_+ h_;
int c = unhex(hex_);


fill(c);
textSize(30);
text("#",width/2-70,height/2); 
text(s_,width/2-40,height/2); 
text(m_,width/2,height/2); 
text(h_,width/2+40,height/2); 
}

according to my understanding from the reference page of processing and also experimenting a bit, both lerp() and map() commands work always linearly.

What I mean about that is if I m mapping numbers between 1 and 100 to 1-2; 50 will be always 1.5

Is there a way -- rather a simple way to modify map() command so that is does not map numbers linearly but lets say with a hyperbolic curve?

Once you map values in grasshopper with a graph-mapper it lets you modify the curve. My aim is to understand and also use the map() command to generate different mapping methods.

If anyone did or knows how to edit the map() function like this, I would appreciate the help.

Best, Omer

I am trying to run the very basic "graph" tutorial off of an arduino. (https://www.arduino.cc/en/Tutorial/Graph). I have a simple circuit with a potentiometer.

When I run this processing code, I get the following error:

map(NaN, 0, 1023, 0, 300) called, which returns NaN (not a number)

Weird. But if I type "println(inByte)" after my map line, the console shows me changing potentiometer values just fine. No error. Also, I should say the pop-out window which is supposed to graph my moving values is black, and never shows any sort of graph. Thanks again for all your help -

Now the question is why a get small picture whatever i put in size() i get the same small picture and with this program DARKER the pixel is closer the object is. AND NOW the main question is how to invert grayscale , cause i want darker pixel farther.

Sorry for so many words and thank u.

This is the code in processing.

import processing.serial.*;

float pcolor = 0; // point color value
float xVal = 0;  // x value
float yVal = 0;  // y value

Serial myPort;

void setup() {

  size(400,200);

  printArray(Serial.list()); 

  myPort = new Serial(this, Serial.list()[0], 57600);

  myPort.bufferUntil('\n');   
  background(0);
}

void draw() {
  stroke(pcolor);    
  point(xVal,yVal);
}

void serialEvent(Serial myPort) {

  String inString = myPort.readStringUntil('\n');  

  if (inString !=null) {
    inString = trim(inString);    

    float[] colors = float(split(inString, ","));    

    if (colors.length >=3) {       
      xVal = colors[0];          
      yVal = colors[1];
      pcolor = map(colors[2], 0, 400, 0,255);
    }
  }
}

I am trying to figure out how this map() function works... but I just don't get it. Maybe you guys can help me out..

For example:

float a;

void setup(){
  size(300, 300);
}

void draw(){
  a= 50;
  a=map(a, -100, 100, 0, 2000);
}

How big wil "A" be after the mapping and why?

I get the following values, which are outside my canvas:

Example of the Json data:

pushMatrix(); // only adjusts translate/scale within matrix translate(width/2, height/2); // suggestion to draw from center out scale(.65); xrect(0,0,250,250); popMatrix();

void xrect(float x1, float y1, float w1, float h1) { rect(x1, y1, w1, h1); String shape = "rect"; float x1out = map(screenX(x1, y1), 0, width, 0, 1); float y1out = map(screenY(x1, y1), 0, height, 0, 1); float w1out = map(w1, 0, width, 0, 1); float h1out = map(h1, 0, height, 0, 1); // .. OSC message w/ these values sent after this }

perhaps i should just be grabbing the screenX of (x1+w1) to know where that xpoint is then check the distance between those points? Wondering if there's a better way to check for transformations and know if anything's being scaled.

I am currently trying to figure out the best way to tackle this and if you have any suggestions it would be most appreciated. I have an array of JSON objects retturned from an HTTP request that contain numerical values. These values can range from 100 to 100,000,000. Do you know of possible ways of scaling these particular values as points to a window? Would I have to get the highest possible value first to map it to the pixels of the window or are there other options? How would this be accomplished?

Thanks in advance for any help.

I am trying to solve how to do the following:

I have an array of numbers I want to map each value in the array between 15 and 60 I want to draw a number of rects side by side where each rect represents a number in the array of numbers The width of each rect will be the mapped value of it's corresponding number in the array.

How do I solve the Y position of each rect? I assume I need to find a way of saving the accumulative width of each rect and then place the new rect at the position?

float[] rectWidths = {12.5, 23.7, 22.9, 77.3, 62.1};

void setup() {
  size(500, 375);
}

void draw() {
  background(255);
  for (int i = 0; i<rectWidths.length; i++) {
    rect(H, height/2, map(rectWidths[i], min(rectWidths), max(rectWidths), 15, 60), 20); //H needs to be the accumulative width of each rect
  }
}

i even try this and nothing

valx = map(x, mouseX, mouseX, 0, 80);
valy = map(y, mouseY, mouseY, 0, 80); 

void setup(){

size(590, 590); background (20); }

void draw(){

int x = 10;

float s = map(second(),0,59,0,(width-x)); float m = map(minute(),0,59,0,(height-x));

noStroke(); rect(s, m, 10, 10); }

im very new to this and im quite sure it should be very easy to do this but i don't know how. i want to load a video in processing an control the displaying of the frames of the video through the mouseX position.

that is my code:

import processing.video.*;
Movie myMovie;

void setup() {
  frameRate(30);
  size(1244, 700);
  myMovie = new Movie(this, "Komp 1.mov");
  myMovie.play();    
}

void movieEvent(Movie myMovie) {
  myMovie.read();
}

void draw() {
  image(myMovie, 0,0);
}

I would like to represent interHalWos, the intersection between the two variable wos and hal, like on the image beside :

I have done this code below. But it doesnt work. in fact it seems to be more complex, because we might have to calc the coordinate of the two points at the intersection of the circles, and so to deal with area, whereas below I work with line ...

any suggestion ?

Table myData;
float wos, hal, scopus;
float rA, rB, rC ;
float interHalWos, interHalScopus, interScopusWos;
float ax, ay, bx, by;

void setup() {
  myData = loadTable("data.csv", "header, tsv");
  size(400, 400);
  background(100);

  purcentCalcul();

  ax = width/2; 
  ay = height/2 ;
  strokeWeight(1);stroke(255);point(ax,ay);

  rA = map(hal, 0, 100, 0, width/4);
  rB = map(wos, 0, 100, 0, width/4);

  bx = ax + map(100-hal,0,100,0,rA+rB);
  println(bx);
  by = ay;

  circle("hal", ax,ay, color(0, 255, 0), rA);
  circle("wos", bx,by, color(255, 0, 0), rB);

}

void purcentCalcul() {
  TableRow findTotal = myData.findRow("total", "name");
  TableRow findWos = myData.findRow("wos", "name");
  TableRow findHal = myData.findRow("hal", "name");
  TableRow findInterhw = myData.findRow("interHalWos", "name");
  float sumHalWos = findWos.getInt("value") + findHal.getInt("value") - findInterhw.getInt("value");  
  wos = findWos.getInt("value") * 100 / sumHalWos;
  hal = findHal.getInt("value") * 100 / sumHalWos;
  interHalWos = findInterhw.getInt("value") * 100 /sumHalWos; 

  println("wos % : "+ wos +" hal % : "+hal+" inter % : "+interHalWos);
}

void circle(String name, float x, float y, color couleur, float radius) {
  noFill();
  stroke(couleur);
  strokeWeight(3);
  ellipse(x, y, 2*radius, 2*radius);
  textAlign(CENTER);
  fill(couleur);
  text(name, x, y-radius-10);
}

color bgColor = color(0); // black
color drawColor = color(255, 255, 255, 255); // white
float t = 0;
float n = noise(t);
float x = map (n, 0,1,0,width);
float y = map (n, 0,1,0,height);

void setup() {
  size(900, 650);
  background(bgColor);
}

void draw () {

  ellipse (x, 31,14,14);

  t += 0.01;
}

  class Walker {
    float x,y;

    float tx,ty;

    Walker() {
      tx = 0;
      ty = 10000;
    }

    void step() {
      x = map(noise(tx), 0, 1, 0, width);
      y = map(noise(tx), 0, 1, 0, height);

      tx += 0.01;
      ty += 0.01;
    }
  }

int[] data;

void setup() {
size(900,900);
String[] text = loadStrings("averages.txt");
println(text);
data = int(split(text[0], ","));
}

void draw() {
background(255);
fill(0);
stroke(255);

for(int i = 0; i < data.length; i++) {
int multiplier = 2;
float rectWidth = width / data.length;
float ypos = height - (data[i] * multiplier);
rect((rectWidth * i), ypos, rectWidth, (data[i] * multiplier));
}
}

colorMode(RGB,1); for (var x = 0; x < nX; x++) { for (var y = 0; y < nY; y++) { var id = getIdx(x,y); var v = vArray[id]; //range=[0,1] var c = color(v, 0, 1-v); set(x, y, c); } } updatePixels();

It is very straightforward; i get a value from an array vArray which is in the range [0,1]. A color c is is calculated using color() and pixel [x,y] is set to c. Unfortunately, this has very bad performance compared to the rest of my code; color() takes approximately 60% of the CPU time. It is a huge bottleneck compared to the rest of the code which should be the bottleneck considering it is doing heavy work. If i move color() out of the loop the code runs efficiently again.

Does anyone know why color() is so inefficient? How can I avoid this inefficiency, either by modifying the use of color() or perhaps by setting the pixel color in some other way?