Month: June 2019

Exercise 55

Drawing Arcs with Rotation

// Radial Pattern 4
var num=10;
var sw=8;
var fc;
var r = 0;
var rs;
var isLooping;

function setup() {
    createCanvas(windowWidth, windowHeight);
    background(0);
    noFill();
    rs = random(100);
    strokeWeight(sw);
    strokeCap(SQUARE);
}

function draw() {
    randomSeed(rs);
    background('#14133B');
    for (i=0; i < 3; i++) {
      arcs(width/2, height/2);
    }
}

function togglePlay() {
    if (isLooping === false) {
        loop();
        isLooping=true;
        console.log("Start Loop");
    } else {
        noLoop();
        isLooping=false;
        console.log("Stop Loop");
    }
}

function mousePressed() {
    togglePlay();
}

function arcs(x, y) {
  push();
  translate(x, y);
  rotate(r);
  for (i=0; i < num; i++) {
    //stroke(360.0/num*i, 100, 100, 120);
    lerpAmount = 1.0/num*i;
    // color col = lerpColor('#9E023B', '#FFC675', lerpAmount);
    // stroke(200, 220);
    stroke(360.0/num*i, 100, 100, 120);
    start = random(TWO_PI);
    console.log();
    end = start + random(PI/5, PI/3);
    scal = map(sin(r+TWO_PI/num*i), -1, 1, .5, 1.5);
    arc(0, 0, height*.7-i*4*sw, height*.7-i*4*sw, start, end*scal);
  }
  r += .0523/2;
  pop();
}

Exercise 56

Changing Image size with Sound (Mic Input)

Download image here

var mic;
var button;
var smoothMicLevel=0;

function preload() {
  canImage = loadImage('../images/cola_can.svg');
}

function setup() {
	createCanvas(windowWidth, windowHeight-100);
    background(0);
	button = createButton("Listen");
    button.mousePressed(toggleListen);
	mic = new p5.AudioIn()
    mic.start();
	// image(canImage, 0, 0);
}

function draw(){
	background(255);
    micLevel = mic.getLevel();

	// console.log(micLevel);

	//Lerp smooths out jumpy values
	smoothMicLevel = lerp(smoothMicLevel, micLevel,0.4);
	noStroke();
	fill(255,0,0);
	imageMode(CENTER);
	// ellipse(width/2, height/2, 300, 2000*smoothMicLevel);
	image(canImage, width/2, height/2,2000*smoothMicLevel, 2000*smoothMicLevel);
}

function toggleListen() {
	if (getAudioContext().state !== 'running') {
    	getAudioContext().resume();
		text('listening to audio', width/2, height/2);
		button.html("Stop");
	} else {
        text('click Play button to start', width/2, height/2);

        button.html("Listen");
    }
}

Algorithmic Composition

This course explores Algorithmic Composition, an active field of research which marries the fields of computer science and music composition to design computer systems that compose music.

The applications of algorithmic music are wide-ranging, and as you will see throughout the examples in this tutorial, having a computer that composes music doesn’t mean that humans are left out of the process! Instead, by keeping our eyes, ears and minds open as we tumble from one experiment to the next, we discover new ways to appreciate music, new ways of interacting with music, and new ways to be creative.

I chose to work on algorithmic music composition with the p5.sound library. P5.sound is an add-on library that equips p5.js with the ability to do all manner of audio-related tasks, from playing a sound file to applying audio effects directly on the browser.

Lesson-Piechart

let angles = [ 30, 10, 45, 35, 60, 38, 75, 67 ];

function setup() {
  createCanvas(windowWidth, windowHeight);
  noStroke();
  noLoop();
  colorMode(HSB); // Run once and stop
}

function draw() {
  background(0);
  pieChart(300, angles);
}

function pieChart(diameter, data) {
  var lastAngle = 0;
  for (i = 0; i < data.length; i++) {
    var color = map(i, 0, data.length, 0, 255);
    fill(color,150,255);
    arc(width/2, height/2, diameter, diameter, lastAngle, lastAngle+radians(data[i]));
    lastAngle += radians(data[i]);
  }
}