ERIKA HARVEY
UX Design & Research
foodbank-sketches.jpg

Blog

Every day I try out something new whether it be javascript, css3 or html5 . Actually, i've been known to try and learn unity 3d and other gaming platforms , but those take a bit longer and i'm still learning them. Bac to the point. I am obsessed with this thing called front end development and I'm like a kid in a candy store, greedily gobbling up all the tutorial goodies out there.

Paint the Screen in Random Colors: Psychedelic Elipses

So, funny thing happend to me on the way to studying. I was looking online for some resources to go over DOM manipulation and I stumbled up on a new javascript (or at least new to me ) library called p5.js. here they are trying to make HTML5canvas/graphics more accessible to designers and artists.

All that is being done basically is enabling a canvas element. This is an element that is already available in HTML5 and all that is required to use it , is to call upon it.

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

function draw() {
if (mouseIsPressed) {
fill(0);
} else {
fill(255);
}
ellipse(mouseX, mouseY, 80, 80);
}
 
 

This is how I got the random colors. I just split up the r, g, b color values and applied the random function with 255 being its argument.

function draw() {
if (mouseIsPressed) {
r = random(255);
b = random(255);
g = random(255);

 

fill(r,g,b);
 } else {
 fill(0);
 }
 

There are other out of this world fun things to do with p5.js.

Here is the audio from me pinging on the graphic keyboard that lights up when you click on it.Sorry for the feedback, i’m still trying to figure out this whole screen and audio capture thing.

Audio Player

00:00

00:00

Use Up/Down Arrow keys to increase or decrease volume.

 [codepen_embed height="257" theme_id="12468" slug_hash="rVMgXJ" default_tab="result" user="erikasf"]See the Pen BigMusicMadeByYou by erika (@erikasf) on CodePen.[/codepen_embed]
 
 // The midi notes of a scale
Code Here
var notes = [ 60, 62, 64, 65, 67, 69, 71];

 

// For automatically playing the song
 var index = 0;
 var song = [
 { note: 4, duration: 400, display: "D" },
 { note: 0, duration: 200, display: "G" },
 { note: 1, duration: 200, display: "A" },
 { note: 2, duration: 200, display: "B" },
 { note: 3, duration: 200, display: "C" },
 { note: 4, duration: 400, display: "D" },
 { note: 0, duration: 400, display: "G" },
 { note: 0, duration: 400, display: "G" }
 ];
 var trigger = 0;
 var autoplay = false;
 var osc;
function setup() {
 createCanvas(720, 400);
 var div = createDiv("Click to play notes or ")
 div.id("instructions");
 var button = createA("#","play song automatically.");
 button.parent("instructions");
 // Trigger automatically playing
 button.mousePressed(function() {
 if (!autoplay) {
 index = 0;
 autoplay = true;
 }
 });
// A triangle oscillator
 osc = new p5.TriOsc();
 // Start silent
 osc.start();
 osc.amp(0);
 }
// A function to play a note
 function playNote(no

 

te, duration) {
 osc.freq(midiToFreq(note));
 // Fade it in
 osc.fade(0.5,0.2);
// If we set a duration, fade it out
 if (duration) {
 setTimeout(function() {
 osc.fade(0,0.2);
 }, duration-50);
 }
 }
function draw() {
// If we are autoplaying and it's time for the next note
 if (autoplay && millis() > trigger){
 playNote(notes[song[index].note], song[index].duration);
 trigger = millis() + song[index].duration;
 // Move to the next note
 index ++;
 // We're at the end, stop autoplaying.
 } else if (index >= song.length) {
 autoplay = false;
 }
// Draw a keyboard
// The width for each key
 var w = width / notes.length;
 for (var i = 0; i < notes.length; i++) { var x = i * w; // If the mouse is over the key if (mouseX > x && mouseX < x + w && mouseY < height) {
 // If we're clicking
 if (mouseIsPressed) {
 fill(100,255,200);
 // Or just rolling over
 } else {
 fill(127);
 }
 } else {
 fill(200);
 }
// Oh if we're playing the song, let's highlight it too
 if (autoplay && i === song[index-1].note) {
 fill(100,255,200);
 }
// Draw the key
 rect(x, 0, w-1, height-1);
 }
}
// When we click
 function mousePressed() {
 // Map mouse to the key index
 var key = floor(map(mouseX, 0, width, 0, notes.length));
 playNote(notes[key]);
 }
// Fade it out when we release
 function mouseReleased() {
 osc.fade(0,0.5);
 }