P5.js skecze

---

windowWidth, windowHeight, easing

var x = 0;
var y = 0;
var px = 0;
var py = 0;
var easing = 0.05;

function setup() {
  createCanvas(windowWidth, windowHeight);
  stroke(0, 102);
}

function draw() {
  var targetX = mouseX;
  x += (targetX - x) * easing;
  var targetY = mouseY;
  y += (targetY - y) * easing;
  var weight = dist(x, y, px, py);
  strokeWeight(weight);
  line(x, y, px, py);
  py = y;
  px = x;
}

---

keyCode, LEFT_ARROW…

var x = 215;
var y = 215;

function setup() {
  createCanvas(480, 480);
}

function draw() {
  if (keyIsPressed) {
    if (keyCode == LEFT_ARROW) {
      x--;
    }
    if (keyCode == RIGHT_ARROW) {
      x++;
    }
    if (keyCode == UP_ARROW) {
      y--;
    }
    if (keyCode == DOWN_ARROW) {
      y++;
    }
  }
  rect(x, y, 30, 30);
}

---

wave = new p5.Oscillator()…

// Daniel Shiffman
// http://codingtra.in
// http://patreon.com/codingtrain
// Code for: https://youtu.be/Bk8rLzzSink

var wave;

var button;
var slider;
var playing = false;

function setup() {
  createCanvas(100, 100);
  wave = new p5.Oscillator();
  slider = createSlider(100, 1200, 440);

  wave.setType('sine');
  wave.start();
  wave.freq(120);
  wave.amp(0.3);


  button = createButton('play/pause');
  button.mousePressed(toggle);
}

function draw() {
  wave.freq(slider.value());
  if (playing) {
    background(255, 0, 255);
  } else {
    background(51);
  }
}

function toggle() {
  if (!playing) {
    wave.amp(0.5, 1);
    playing = true;
  } else {
    wave.amp(0, 1);
    playing = false;
  }


}

---

p5.Noise

http://yarogniew.net/programming/p5js_testowy/

var osc;
var playing = false;
var x = 215;
var y = 215;

function setup() {
  createCanvas(480, 480);
  osc1 = new p5.Noise('white');
  osc2 = new p5.Noise('pink');
  osc1.amp(0, 0);
  osc1.start();
  osc2.amp(0, 0);
  osc2.start();
}

function draw() {
  if (keyIsPressed) {

    if (keyCode == LEFT_ARROW) {
      x--;
      osc1.amp(0.5, 0);
    }
    if (keyCode == RIGHT_ARROW) {
      x++;
      osc1.amp(0.5, 0);
    }
    if (keyCode == UP_ARROW) {
      y--;
      osc2.amp(0.8, 0);
    }
    if (keyCode == DOWN_ARROW) {
      y++;
      osc2.amp(0.8, 0);
    }
  }
  rect(x, y, 30, 30);

  osc1.amp(0.0, 0.1);
  osc2.amp(0.0, 0.1);
}

---

c = get(mouseX, mouseY);

https://yarogniew.github.io/RGB-czytanie-koloru-p5js/

/* P5JS CODE */
var img;
var c;
var d;

function preload()
{
    img = loadImage("pencils.jpg");
}

function setup() {
    createCanvas(380, 480);
    c = color('white');
    d = -50;
}

function draw() {
    image(img, 0, 0);

    strokeWeight(1);
    noStroke();
    fill(c);
    rect(width/4, 2, width/2, 20);
    var rgbV = c[0] + "," + c[1] + "," + c[2];
    fill(c[0]+d, c[1]+d, c[2]+d);
    textAlign(CENTER);
    if (c[0]<255)
      {
        text(rgbV , width/2, 32);
      }
}

function mousePressed()
{
    c = get(mouseX, mouseY);


    // var particle = new Particle();
    //particle.callFunction({
       //deviceId: 'YOURDEVICEID',
       //name: 'led',
       //argument: rgbValue,
       //auth: 'YOURAUTHVALUE'
    //});
}

math-noise1d

var xoff = 0.0;
var xincrement = 0.003;

function setup() {
createCanvas(710, 400);
background(0);
noStroke();
}

function draw() {
// Create an alpha blended background
fill(0, 10);
rect(0,0,width,height);

// Get a noise value based on xoff and scale 
// it according to the window's width
var n = noise(xoff)*width;

// With each cycle, increment xoff
xoff += xincrement;

// Draw the ellipse at the value produced by perlin noise
fill(200);
ellipse(n,height/2, 64, 64);
//text(n,30,30);
}

---

Noise Drum Envelope

 
var noise, env, analyzer;

function setup() {
  createCanvas(710, 200);
  noise = new p5.Noise('pink'); // other types include 'brown' and 'pink'
  noise.start();

  // multiply noise volume by 0
  // (keep it quiet until we're ready to make noise!)
  noise.amp(0);

  env = new p5.Env();
  // set attackTime, decayTime, sustainRatio, releaseTime
  env.setADSR(0.001, 0.3, 0.5, 1.5);
  // set attackLevel, releaseLevel
  env.setRange(1, 0);

  // p5.Amplitude will analyze all sound in the sketch
  // unless the setInput() method is used to specify an input.
  analyzer = new p5.Amplitude();
}

function draw() {
  background('black');

  // get volume reading from the p5.Amplitude analyzer
  var level = analyzer.getLevel();

  // use level to draw a green rectangle
  var levelHeight = map(level, 0, .4, 0, height);
  fill('red');
  rect(width/2, height, 5, - levelHeight);
}

function mousePressed() {
  env.play(noise);
} 

---

 
... 

---

 
...