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");
    }
}

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]);
  }
}