Voici quelques exemples qui s'inspirent du travail réalisé par Serge Bouchardon : Déprise (vous trouverez une présentation de cette oeuvre dans ce document.)
Les exemples ci-dessous sont des "démonstrations techniques" de ce qu'il serait possible de faire avec des élèves de première ou de terminale dans le cadre de l'option ICN, à condition que les élèves aient déjà des connaissances en matière de programmation et plus particulièrement une assez bonne maitrise de la bibliothèque JavaScript p5js (pour les débutants, vous trouverez des activités consacrées aux bases de la programmation ici . De la même manière, vous trouverez des activités consacrées à la prise en main de p5js).
Au risque de me répéter, je voudrais préciser que les exemples ci-dessous n'ont aucun "caractère artistique", ce sont des exemples "techniques" de ce qu'il est possible de réaliser avec une maitrise moyenne de la bibliothèque p5js.
var tabSpan=[];
var texte;
var mots;
function setup() {
texte="Aux âmes bien nées, La valeur n’attend point le nombre des années.";
createP(texte);
mots = texte.split(' ');
for (var j=0; j<mots.length; j++) {
var obj={span:createSpan(mots[j]),coordX:random(600),coordY:random(200)}
tabSpan.push(obj);
}
}
function draw() {
for (i=0;i<tabSpan.length;i++){
tabSpan[i].coordX=tabSpan[i].coordX+random(-2,2);
tabSpan[i].coordY=tabSpan[i].coordY+random(-2,2);
tabSpan[i].span.position(tabSpan[i].coordX,tabSpan[i].coordY);
}
}
Survolez le texte avec le curseur de la souris et cliquez dans la fenêtre avec le bouton gauche de cette même souris.
var compt=0;
var over=false;
var transTexte=false;
var chronoTransTexte=0;
tabTexte=["Dis-moi donc, je te prie, une seconde fois","Ce qui te fait juger qu’il approuve mon choix :","Apprends-moi de nouveau quel espoir j’en dois prendre ;","Un si charmant discours ne se peut trop entendre ;","Tu ne peux trop promettre aux feux de notre amour","La douce liberté de se montrer au jour.","Que t’a-t-il répondu sur la secrète brigue","Que font auprès de toi don Sanche et don Rodrigue ?","N’as-tu point trop fait voir quelle inégalité","Entre ces deux amants me penche d’un côté ?"]
tabEllipse=[];
function setup(){
can=createCanvas(470,250);
can.position(0,0);
noStroke();
texte=createP(tabTexte[0]).style("color","white");
texte.mouseOver(changeText);
texte.mouseOut(function(){over=false});texte.position(10,100);
}
function draw(){
background(0);
affichageTexte();
affichageEllipse();
}
function changeText(){
if (over==false){
transTexte=true;
compt=compt+1;
if (compt>=tabTexte.length){
compt=0;
}
over=true;
}
}
function affichageTexte(){
if (transTexte==false){
texte.html(tabTexte[compt])
}
else {
var transTex="";
for (i=0;i<tabTexte[compt].length;i++){
transTex=transTex+tabTexte[compt].charAt(random(tabTexte[compt].length));
}
texte.html(transTex);
chronoTransTexte=chronoTransTexte+1;
}
if (chronoTransTexte>10){
transTexte=false;
chronoTransTexte=0;
}
}
function mousePressed(){
son = new p5.Oscillator();
son.setType('sine');
son.freq(random(100*(compt+1),150*(compt+1)));
son.amp(1,0.1);
son.amp(0,1.5,0.1);
son.start();
obj={x:mouseX,y:mouseY,trans:255,r:random(255),v:random(255),b:random(255)};
tabEllipse.push(obj);
}
function affichageEllipse(){
if (tabEllipse.length>10){
tabEllipse.splice(0,5)
}
for(i=0;i<tabEllipse.length;i++){
fill(tabEllipse[i].r,tabEllipse[i].v,tabEllipse[i].b,tabEllipse[i].trans)
ellipse(tabEllipse[i].x,tabEllipse[i].y,50,50);
tabEllipse[i].trans=tabEllipse[i].trans-5
}
}
Survolez le texte avec le curseur de la souris et cliquez dans la fenêtre avec le bouton gauche de cette même souris.
var compt=0;
var over=false;
var transTexte=false;
var chronoTransTexte=0;
var translEll=false;
var comptTranslation=0;
tabTexte=["Dis-moi donc, je te prie, une seconde fois","Ce qui te fait juger qu’il approuve mon choix :","Apprends-moi de nouveau quel espoir j’en dois prendre ;","Un si charmant discours ne se peut trop entendre ;","Tu ne peux trop promettre aux feux de notre amour","La douce liberté de se montrer au jour.","Que t’a-t-il répondu sur la secrète brigue","Que font auprès de toi don Sanche et don Rodrigue ?","N’as-tu point trop fait voir quelle inégalité","Entre ces deux amants me penche d’un côté ?"]
tabObj=[];
function setup(){
can=createCanvas(470,250);
can.position(0,0);
noStroke();
texte=createP(tabTexte[0]).style("color","white");
texte.mouseOver(changeText);
texte.mouseOut(function(){over=false});
texte.position(10,100);
}
function draw(){
background(0);
affichageTexte();
affichageObj();
if (translEll){
translation();
}
}
function changeText(){
if (over==false){
transTexte=true;
compt=compt+1;
if (random(0,100)>60){
translEll=true;
}
if (compt>=tabTexte.length){
compt=0;
}
over=true;
}
}
function affichageTexte(){
if (transTexte==false){
texte.html(tabTexte[compt])
}
else {
var transTex="";
for (i=0;i<tabTexte[compt].length;i++){
transTex=transTex+tabTexte[compt].charAt(random(tabTexte[compt].length));
}
texte.html(transTex);
chronoTransTexte=chronoTransTexte+1;
}
if (chronoTransTexte>10){
transTexte=false;
chronoTransTexte=0;
}
}
function mousePressed(){
son = new p5.Oscillator();
son.setType('sine');
son.freq(random(100*(compt+1),150*(compt+1)));
son.amp(1,0.1);
son.amp(0,1.5,0.1);
son.start();
var tir=random(-100,100);
if (tir>0){
obj={x:mouseX,y:mouseY,type:"rect",c:random(20,50),r:random(255),v:random(255),b:random(255)};
}
else{
obj={x:mouseX,y:mouseY,type:"ellipse",ray:random(20,50),r:random(255),v:random(255),b:random(255)};
}
tabObj.push(obj);
}
function affichageObj(){
if (tabObj.length>10){
tabObj.splice(0,1)
}
for(i=0;i<tabObj.length;i++){
fill(tabObj[i].r,tabObj[i].v,tabObj[i].b);
if (tabObj[i].type=="ellipse"){
ellipse(tabObj[i].x,tabObj[i].y,tabObj[i].ray,tabObj[i].ray);
}
else{
rect(tabObj[i].x,tabObj[i].y,tabObj[i].c,tabObj[i].c);
}
}
}
function translation(){
comptTranslation=comptTranslation+1;
for (i=0;i<tabObj.length;i++){
tabObj[i].x=tabObj[i].x-20;
}
if (comptTranslation>50){
tabObj=[];
translEll=false;
comptTranslation=0;
}
}
Survolez le texte avec le curseur de la souris et cliquez dans la fenêtre avec le bouton gauche de cette même souris (cliquez une première fois dans la fenêtre pour commencer). Pour arrêter le son complètement, recharger la page en appuyant sur la touche F5.
var compt=0;
var over=false;
var transTexte=false;
var chronoTransTexte=0;
tabTexte=["Dis-moi donc, je te prie, une seconde fois","Ce qui te fait juger qu’il approuve mon choix :","Apprends-moi de nouveau quel espoir j’en dois prendre ;","Un si charmant discours ne se peut trop entendre ;","Tu ne peux trop promettre aux feux de notre amour","La douce liberté de se montrer au jour.","Que t’a-t-il répondu sur la secrète brigue","Que font auprès de toi don Sanche et don Rodrigue ?","N’as-tu point trop fait voir quelle inégalité","Entre ces deux amants me penche d’un côté ?"];
var img;
function preload() {
img=loadImage("man.jpg");
son_foule=loadSound("foule.ogg");
piano=loadSound("piano.ogg");
}
function setup(){
can=createCanvas(640,550);
can.position(0,0);
noStroke();
texte=createP(tabTexte[0]).style("color","white");
texte.mouseOver(changeText);
texte.mouseOut(function(){over=false});
texte.position(100,480);
image(img,0,0);
loadPixels();
son_foule.play();
son_foule.loop();
background(0);
}
function draw(){
affichageTexte();
for (i=0;i<100;i++){
affichePixels();
}
}
function changeText(){
if (over==false){
transTexte=true;
compt=compt+1;
if (compt>=tabTexte.length){
compt=0;
}
over=true;
}
}
function affichageTexte(){
if (transTexte==false){
texte.html(tabTexte[compt])
}
else {
var transTex="";
for (i=0;i<tabTexte[compt].length;i++){
transTex=transTex+tabTexte[compt].charAt(random(tabTexte[compt].length));
}
texte.html(transTex);
chronoTransTexte=chronoTransTexte+1;
}
if (chronoTransTexte>10){
transTexte=false;
chronoTransTexte=0;
}
}
function affichePixels(){
var x=floor(random(0,640));
var y=floor(random(0,462));
var i=(x+y*640)*4;
var ro=pixels[i];
var ve=pixels[i+1];
var bl=pixels[i+2];
stroke(ro,ve,bl);
point(x,y);
}
function mousePressed() {
if (piano.isPlaying()==false){
son_foule.amp(0.2,2);
piano.play();
piano.amp(1,2)
}
else{
piano.amp(0,2)
piano.stop(3);
son_foule.amp(1,2);
piano.stop();
}
}
texte="Verba volant, scripta manent.";
tabCara=[];
var compt=0;
function setup(){
can=createCanvas(350,250);
fill(255);
textSize(20);
var x=20;
for (i=0;i<texte.length;i++){
obj={x_home:x,y_home:30,posX:x,posY:30,vit:random(1,2),cara:texte.charAt(i),dep:true};
tabCara.push(obj);
x=x+textWidth(texte.charAt(i));
}
}
function draw(){
background(0);
for (i=0;i<tabCara.length;i++){
text(tabCara[i].cara,tabCara[i].posX,tabCara[i].posY);
if (tabCara[i].dep==true){
tabCara[i].posY=tabCara[i].posY+tabCara[i].vit;
}
if (tabCara[i].posY>221){
tabCara[i].dep=false;
tabCara[i].posY=220;
tabCara[i].vit=-tabCara[i].vit
compt=compt+1;
}
if (tabCara[i].posY<30){
tabCara[i].dep=false;
tabCara[i].posY=30;
tabCara[i].vit=-tabCara[i].vit
compt=compt+1;
}
if (compt==tabCara.length){
compt=0;
for (j=0;j<tabCara.length;j++){
tabCara[j].dep=true
}
}
}
}
Cliquez une première fois avec le bouton gauche de la souris dans la fenêtre ci-dessous. Attendez un peu, puis cliquez de nouveau.
texte="Verba volant, scripta manent.";
tabCara=[];
var clic=false;
function setup(){
can=createCanvas(800,600);
fill(255);
textSize(40);
var x=100;
for (var i=0;i<texte.length;i++){
obj={x_home:x,y_home:height/2,posX:x,posY:height/2,vitX:random(-2,2),vitY:random(-2,2),cara:texte.charAt(i)};
tabCara.push(obj);
x=x+textWidth(texte.charAt(i));
}
}
function draw(){
background(0);
for (var i=0;i<tabCara.length;i++){
if (clic){
tabCara[i].posX=tabCara[i].posX+tabCara[i].vitX;
tabCara[i].posY=tabCara[i].posY+tabCara[i].vitY;
}
else{
if (abs(tabCara[i].posX-tabCara[i].x_home)>2){
tabCara[i].posX=tabCara[i].posX-tabCara[i].vitX;
}
else{
tabCara[i].posX=tabCara[i].x_home
}
if (abs(tabCara[i].posY-tabCara[i].y_home)>2){
tabCara[i].posY=tabCara[i].posY-tabCara[i].vitY;
}
else{
tabCara[i].posY=tabCara[i].y_home
}
}
text(tabCara[i].cara,tabCara[i].posX,tabCara[i].posY)
}
}
function mousePressed() {
if (clic==false){
clic=true;
}
else{
clic=false;
}
}
Cliquez une première fois avec le bouton gauche de la souris dans la fenêtre ci-dessous. Attendez un peu, puis cliquez de nouveau.
texte="L’imagination est plus importante que le savoir.";
tabCara=[];
var stop=true;
function setup(){
can=createCanvas(650,200);
fill(255);
var x=50;
background(0)
for (var i=0;i<texte.length;i++){
vit=random(-0.1,0.1);
while (abs(vit)<0.01){
vit=random(-0.1,0.1);
}
obj={posX:x,posY:height/2,theta:0,vitRot:vit,cara:texte.charAt(i)};
tabCara.push(obj);
x=x+textWidth(texte.charAt(i))+5;
}
}
function draw(){
background(0);
textSize(20);
for (var i=0;i<texte.length;i++){
if (stop && abs(tabCara[i].theta%TWO_PI)<0.2){
tabCara[i].theta=0;
}
else {
tabCara[i].theta=tabCara[i].theta+tabCara[i].vitRot
}
rotation(tabCara[i].posX,tabCara[i].posY,tabCara[i].theta,tabCara[i].cara);
}
textSize(12);
text("Albert Einstein",550,150);
}
function rotation(x,y,theta,lettre) {
textAlign(CENTER);
push();
translate(x,y);
rotate(theta);
text(lettre,0,0);
pop();
}
function mousePressed() {
if (stop){
stop=false;
}
else {
stop=true;
}
}
Visiblement, pour une raison que j'ignore, le son fonctionne uniquement avec Firefox.
Cliquez avec le bouton gauche de la souris dans la fenêtre ci-dessous. Appuyez sur la touche P pour écouter le discours d'Einstein, de nouveau sur la touche P pour mettre en pause, et sur n'importe quelle autre touche pour arrêter.
var pause=true;
function preload(){
img=loadImage("einstein.jpg");
son=loadSound("einstein.ogg");
}
function setup(){
can=createCanvas(650,500);
fill(255);
background(0)
push();
translate(100,200);
rotate(radians(30));
image(img,0,0);
pop();
push();
translate(400,100);
rotate(radians(-20));
textAlign(CENTER);
textSize(50);
text("E = mc",0,0);
textSize(25);
text("2",95,-40);
pop();
}
function draw(){
}
function keyPressed() {
if (keyCode==80){
if (pause==true){
pause=false;
son.play();
}
else {
pause=true;
son.pause();
}
}
else {
pause=true;
son.stop();
}
}
var maVideo;
function preload(){
img=loadImage("photo.jpg");
}
function setup() {
createCanvas(800,600);
maVideo=createVideo("vid.webm");
maVideo.loop();
maVideo.hide();
}
function draw() {
background(0);
push();
translate(200,150);
rotate(radians(-30));
image(maVideo,0,0,400,230);
pop();
push();
translate(100,300);
rotate(radians(20));
image(img,0,0,400,230);
pop();
}