diane au clair de la lune

/*
 * @name Song
 * @frame 720, 430
 * @description Play a song.
 * You will need to include the
 * <a href="http://p5js.org/reference/#/libraries/p5.sound">p5.sound
 * library</a> for this example to work in your own project.
 */
// The midi notes of a scale
var notes = [ 60, 62, 64, 65, 67, 69, 71];

// For automatically playing the song
var index = 0;
var song = [
    { note: 3, duration: 500, display: "C" },
    { note: 3, duration: 500, display: "C" },
    { note: 3, duration:500, display: "C" },
    { note: 4, duration: 500, display: "D" },
    { note: 5, duration: 500, display: "E" },
    { note: 4, duration: 500, display: "D" },
    { note: 3, duration:500, display: "C" },
    { note: 5, duration: 500, display: "E" },
    { note: 4, duration: 500, display: "D" },
    { note: 4, duration: 500, display: "D" },
    { note: 3, duration:500, display: "C" },
    //deuxieme
        { note: 3, duration: 500, display: "C" },
    { note: 3, duration: 500, display: "C" },
    { note: 3, duration:500, display: "C" },
    { note: 4, duration: 500, display: "D" },
    { note: 5, duration: 500, display: "E" },
    { note: 4, duration: 500, display: "D" },
    { note: 3, duration:500, display: "C" },
    { note: 5, duration: 500, display: "E" },
    { note: 4, duration: 500, display: "D" },
    { note: 4, duration: 500, display: "D" },
    { note: 3, duration:500, display: "C" },
   
    { note: 4, duration: 500, display: "D" },
    { note: 4, duration: 500, display: "D" },
    { note: 4, duration: 500, display: "D" },
    { note: 4, duration: 500, display: "D" },
    { note: 3, duration:500, display: "C" },
   
    { note: 4, duration: 500, display: "D" },
  { note: 2, duration: 500, display: "B" },   
    { note: 1, duration: 500, display: "A" },
    { note: 0, duration: 500, display: "G" },
   
    /*
  { note: 4, duration: 300, display: "D" }, //re
  { duration: 100, display: "G" }, //sol
  { note: 1, duration: 100, display: "A" }, //la
  { note: 2, duration: 100, display: "B" },//si
  { note: 3, duration: 100, display: "C" },//do
  { note: 4, duration: 300, display: "D" },//re
  { note: 0, duration: 300, display: "G" },
  { note: 0, duration: 300, 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 = createButton("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(note, duration) {
  osc.freq(midiToFreq(note));
  // Fade it in
  osc.fade(0.5,0.2);

  // If we sest 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);
    }

    // Or 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);
}

Informatique :

Cet article a été écrit par Milandre & Assya.

C’est quoi l’informatique ?

L'informatique est la science du traitement des informations avec des moyens électroniques.

C’est quoi l’informatique pour vous ?

Arthus : "Regarder des vidéos et créer des blogs."

Diane : "Apprendre les touches, se servir d'internet." 

David : Il est informaticien, il aime l'informatique, il gagne sa vie, créé des blogs, invente des voitures. 

Voici un programme que vous pourriez faire : 

var np = 300;

var startcol;




function setup() {

 createCanvas(1366,600);

 background(255);

 noFill();

 noiseSeed(random(100));

 startcol = random(255);

}




function draw() {

//background(51);

beginShape();

 var sx,sy;

 for(var i = 0; i < np; i++) {

 var angle = map(i, 0, np, 0, TWO_PI);

 var cx = frameCount * 2 - 200;

 var cy = height / 2 + 50 * sin(frameCount / 50);

 var xx = 100 * cos(angle + cx / 10);

 var yy = 100 * sin(angle + cx / 10);

 var v = createVector(xx, yy);

 xx = (xx + cx) / 150; yy = (yy + cy) / 150;

 v.mult(1 + 1.5 * noise(xx, yy));

 vertex(cx + v.x, cy + v.y);

 if(i == 0) {

  sx = cx + v.x;

  sy = cy + v.y;

  }

 }

 colorMode(HSB);

 var hue = cx / 10 - startcol;

 if(hue < 0) hue += 255;

 stroke(hue,100, 120);

 strokeWeight(0.1);

 vertex(sx,sy);

 endShape();

 if(frameCount> width + 500) {

  noLoop();

  save("test.png");

 }

}

[ cet exemple est issu du site OpenProcessing :

exemple illustré : https://www.openprocessing.org/sketch/408882

apprendre à coder... par où commencer