D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
joeyroo95
Full window
Github gist
test block
anything
<!DOCTYPE html> <head> <meta charset="utf-8"> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.14/p5.js"></script> <style> body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } </style> </head> <body> <script> // Ignore all the stuff above, we'll worry about it later ... /* 1) Find the first text output function (i.e., what *actually* puts 'hello world' on to the screen and 'uncomment' it 2) Find the second interactive 'hello world' function 3) Alter or edit in some way, either just editing the code below or looking at the p5.js examples a couple of useful keyboard shortcuts for this (and other text environments) - CMD/CTL + '/' = comment or uncomment - CMD/CTL + '[' or ']' = adjust the level of indentation */ // basic variables var msg = ["h","e","l","l","o"," ","w","o","r","l","d",]; var index = 0; var textColor; var displayText; // this is what calls P5.js helper functions in the first place function setup(){ // define the space in which everything is going to 'happen' createCanvas(960,500); // making the text pretty textFont('Georgia',50); textStyle(ITALIC) textAlign(CENTER); noStroke(); // putting the message together var out = msg.join(''); // putting it on the screen // text(out,width/2,height/2); } // ignore this for now ... function draw(){ } // a 'listener' for whenever the mouse is moved within the canvas (defined above) function mouseMoved() { // same text prettification as above textFont('Georgia',50); textStyle(ITALIC) textAlign(RIGHT); textAlign(CENTER); noStroke(); // same message concatenation as above var out = msg.join(''); // THE MAGIC! // changes the fill color with every mouse movement fill(random(200),random(200),random(200),150); // put the text onto the canvas // text(out,width/2,height/2); // fill(random(200),random(200),random(200),150); // text(msg[index],mouseX,mouseY); // if(index == msg.length - 1){ index = 0; } // else { index += 1; } // return false; } </script> </body>
https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.14/p5.js