Posts

Showing posts from January, 2021

0005-JS-P5E-CreateGraphics

Image
  let  pg; /* Use this class if you need to draw into an off-screen graphics buffer.  The two parameters define the width and height in pixels. */ function  setup() {   createCanvas( 710 ,  400 );   pg = createGraphics( 400 ,  250 ); } function  draw() {   fill( 0 ,  12 );   rect( 0 ,  0 , width, height);   fill( 255 );   noStroke();   ellipse(mouseX, mouseY,  60 ,  60 );   pg.background( 51 );   pg.noFill();   pg.stroke( 255 );   pg.ellipse(mouseX -  150 , mouseY -  75 ,  60 ,  60 );    //Draw the offscreen buffer to the screen with image()   image(pg,  150 ,  75 ); }

0004-JS-P5E-Recursion

Image
  function  setup() {   createCanvas( 720 ,  560 );   noStroke();   noLoop(); } function  draw() {   inputParamsEllipse( 360 ,  280 ,  6 ); } function  inputParamsEllipse(xPos, radius, level) {    const  tt = ( 126  * level) /  4.0 ;   fill(tt);   ellipse(xPos, height /  2 , radius *  2 , radius *  2 );    if  (level >  1 ) {     level = level -  1 ;     inputParamsEllipse(xPos - radius /  2 , radius /  2 , level);     inputParamsEllipse(xPos + radius /  2 , radius /  2 , level);      // xPos = 360; radius = 280;level=6    ...

0003-JS-P5E-Function

Image
  function  setup() {   createCanvas( 720 ,  400 );   background( 51 );   noStroke();   noLoop(); } function  draw() {    // ellipse(x, y, w, [h])    /*     Parameters     x Number: x-coordinate of the center of ellipse.     y Number: y-coordinate of the center of ellipse.     w Number: width of the ellipse.     h Number: height of the ellipse. (Optional)   */   drawTarget(width *  0.25 , height *  0.4 ,  200 ,  4 );  // Draw 4 Ellipses,width 50   drawTarget(width *  0.5 , height *  0.5 ,  300 ,  10 );  // Draw 10 E...

0002-JS-P5E-SetupDraw

Image
  Animation of Line let  y =  0 ; // The statements in the setup() function // execute once when the program begins function  setup() {    // createCanvas must be the first statement   createCanvas( 720 ,  400 );   stroke( 255 );  // Set line drawing color to white    // Specifies the number of frames to be displayed every second.     //For example, the function call frameRate(30) will attempt     //to refresh 30 times a second.    frameRate( 30 ); } // The statements in draw() are executed until the // program is stopped. Each statement is executed in //...

0001-JS-P5E-WidthHeight

Image
  function  setup() {   createCanvas( 720 ,  400 ); } function  draw() {   background( 127 );   noStroke();    for  ( let  i =  0 ; i < height; i +=  20 ) {     fill( 129 ,  206 ,  15 );     rect( 0 , i, width,  10 );     fill( 255 );     rect(i,  0 ,  10 , height);   } }

0000-JS-P5E-Coordinates

Image
function  setup() {    // Sets the screen to be 720 pixels wide and 400 pixels high   createCanvas( 720 ,  400 ); } function  draw() {    // Set the background to black and turn off the fill color   background( 0 );   noFill();    // The two parameters of the point() method each specify    // coordinates.    // The first parameter is the x-coordinate and the second is the Y   stroke( 255 );   point(width *  0.5 , height *  0.5 );   point(width *  0.5 , height *  0.25 );    // Coordinates are used for drawing all shapes, not just...