Quick question from a complete noob; resizing a canvas

1

Hi guys,

first of all I apologize for being a complete noob, but I have no place else to go to.

I have a small video background project, http://codepen.io/mark_dj/pen/bBJqmQ, that I wish to run fullscreen. Well, not the entire project, but just the animation. As you can see it now runs in a canvas. The code isn’t originally mine, I adjusted it for myself, but I can’t for the life of me figure out how to resize it so that the animation runs in its entirety.

Any ideas?

Here is ‘my’ code:


<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-5710c30fb566082d9fcb6e7d97ee7e3f2a326128c9f334a4231b6fd752b29965.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-d5e4bf42585b8da8c18f7d963dbfc17cd66a79aa586c9448c4de8d6952ee9d97.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-25d1423d5d6fb975e7d61832d2c061422a94963ca446583b965dfc5569147311.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="http://codepen.io/mark_dj/pen/KNYWzG" />
<body bgcolor="black">

<style class="cp-pen-styles"></style></head><body>
<div id="container"></div>
<script id="vertexShader" type="x-shader/x-vertex">

  void main() {
    gl_Position = vec4( position, 1.0 );
  }

</script>

<script id="fragmentShader" type="x-shader/x-fragment">
  uniform vec2 iResolution;
  uniform float iGlobalTime;
      //CBS
//Parallax scrolling fractal galaxy.
//Inspired by JoshP's Simplicity shader: https://www.shadertoy.com/view/lslGWr

// http://www.fractalforums.com/new-theories-and-research/very-simple-formula-for-fractal-patterns/

/* this is my version of the Steam logo
 * no infringement intended :p
 *
 * Célestin Marot (yakoudbz)
 *
 *********************/

// parameters (can be modified easily ! )
const float r0=0.5;   // radius of big circle
const float sr0=r0*0.6+0.06;
const float vsr0=r0*0.5;
const float L0=1.0;   // lenght of the crank
const float r1=0.33;   // radius of satelite
const float sr1=r1*0.6+0.06;
const float vsr1=r1*0.5;
const float L1=2.0;   // length of the rod
const float r2=0.33;   // radius of translating circle
const float sr2=r2*0.6+0.06;
const float vsr2=r2*0.5;
const vec2 c0=vec2(1.0,0.0); // coordinate of the big circle
const float zoom=0.5;
float blur=8.0;      // blur = smooth edge

float st=L0*sin(iGlobalTime);
float ct=L0*cos(iGlobalTime);
vec2 pix; // the position of the current pixel

// to draw concentrics circles (r=radius, sr=small_radius,vsr=very small radius)
float circles(vec2 center, float r, float sr, float vsr){
    float dist=distance(center,pix);

    return smoothstep(dist-blur,dist,r) * smoothstep(sr-blur,sr,dist) + smoothstep(dist-blur,dist,vsr);
}


// to draw a triangle
// got to pass vertex in the clockwise order, the diagonal must be bc for a rectangle
float triangle(vec2 a, vec2 b, vec2 c){
    vec2 v0=c-a;
    vec2 v1=b-a;
    vec2 p=pix-a;

    float area=v0.x*v1.y - v0.y*v1.x;

    float alpha = (v0.x*p.y - v0.y*p.x)/area;
    float beta = (v1.y*p.x - v1.x*p.y)/area;
    float gamma = 1.0 - alpha - beta;

    return smoothstep(-2.0*blur,blur,alpha) * smoothstep(-2.0*blur,blur,beta) * step(0.0,gamma);
}


void mainImage( out vec4 fragColor, in vec2 fragCoord ) {
    blur/=iResolution.y;
    pix=(2.0*fragCoord.xy-iResolution.xy)/(zoom*iResolution.y)-c0;
    
    // main circle
    float shade=circles(vec2(0.0,0.0),r0,sr0,vsr0);

    // satelite circle
    vec2 c1=vec2(ct,st);
    shade+=circles(c1,r1,sr1,vsr1);

    // translate circle
    vec2 c2=vec2(ct-sqrt(L1*L1-st*st),0.0);
    shade+=circles(c2,r2,sr2,vsr2);

    vec2 diff=c1/L0; // is normalized that way
    diff=vec2(-diff.y,diff.x);

    shade+=2.0*triangle(-sr0*diff,sr0*diff,c1-sr1*diff) * step(r0,length(pix)) * step(r1,distance(pix,c1));
    shade+=2.0*triangle(c1+sr1*diff,c1-sr1*diff,sr0*diff)* step(r0,length(pix)) * step(r1,distance(pix,c1));

    // diff=r*||c2->c1||  (r is the radius of the interior disk c1 & c2 )
    diff=(c1-c2)/L1;
    
    // we change c1 & c2's position just to make sure the blur won't go further than the circle
    c1=c1-blur*diff;
    c2=c2+blur*diff;

    diff=vec2(-diff.y,diff.x); // vec perpendicular to c2->c1

    shade+=triangle(c2-vsr2*diff,c2+vsr2*diff,c1-vsr1*diff);
    shade+=triangle(c1+vsr1*diff,c1-vsr1*diff,c2+vsr2*diff);
    
    fragColor = vec4(shade,shade,shade, 1.0 );

}
  
  void main(void) {
      //uv is between 0 and 1
      vec2 uv = gl_FragCoord.xy / iResolution.xy;
      vec2 delta = 1.0 / iResolution.xy;

   //   gl_FragColor = vec4(sin(iGlobalTime), uv.x, uv.y ,1.0);
  
  mainImage(gl_FragColor,gl_FragCoord.xy);
  }

</script>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-58d22c749295bca52f487966e382a94a495ac103faca9206cbd160bdf8aedf2a.js'></script><script src='http://threejs.org/build/three.min.js'></script>
<script>var container;
var camera, scene, renderer;
var uniforms;
var startTime;

init();
animate();

function init() {

  container = document.getElementById( 'container' );

  startTime = Date.now();
  camera = new THREE.Camera();
  camera.position.z = 1;

  scene = new THREE.Scene();

  var geometry = new THREE.PlaneBufferGeometry( 2, 1 );

  uniforms = {
    iGlobalTime: { type: "f", value: 1.0 },
    iResolution: { type: "v2", value: new THREE.Vector2() }
  };

  var material = new THREE.ShaderMaterial( {

    uniforms: uniforms,
    vertexShader: document.getElementById( 'vertexShader' ).textContent,
    fragmentShader: document.getElementById( 'fragmentShader' ).textContent

  } );

  var mesh = new THREE.Mesh( geometry, material );
  scene.add( mesh );

  renderer = new THREE.WebGLRenderer();
  container.appendChild( renderer.domElement );

  onWindowResize();

  window.addEventListener( 'resize', onWindowResize, false );

}

function onWindowResize( event ) {

  uniforms.iResolution.value.x = window.innerWidth;
  uniforms.iResolution.value.y = window.innerHeight;

  renderer.setSize( window.innerWidth, window.innerHeight );

}

function animate() {

  requestAnimationFrame( animate );
  render();

}

function render() {

  var currentTime = Date.now();
  uniforms.iGlobalTime.value = (currentTime - startTime) * 0.001;
  renderer.render( scene, camera );

}
//# sourceURL=pen.js
</script>
</body></html>
3

Here 's the link to post code on the forums :slight_smile:

4

Thank you so much for your friendly assistance :slight_smile:
Also, I get it to run fullscreen, but the animation gets cut off from the top and bottom.

5

Yes,now I see. And I don’t know but someone else will.

6

Managed to fix it :slight_smile:

Had to change new THREE.PlaneBufferGeometry( 2, 1 ); to new THREE.PlaneBufferGeometry( 2, 2 );

Problem solved :slight_smile:

1 Like