codevember#8

In this example below you will see how to do a codevember#8 with some HTML / CSS and Javascript

p5.js sketch

Thumbnail
This awesome code was written by renatorena, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright renatorena ©
  • HTML
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>codevember#8</title>
  
  
  
  
  
</head>

<body>

  <html>
  <head>
    <meta charset="UTF-8">
    <title>codevember2</title>
    <script src="libraries/p5.js" type="text/javascript"></script>

    <script src="libraries/p5.dom.js" type="text/javascript"></script>
    <script src="libraries/p5.sound.js" type="text/javascript"></script>

    <script src="sketch.js" type="text/javascript"></script>

    <style> body {padding: 0; margin: 0;} canvas {vertical-align: top;} </style>
  </head>
  <body>
  </body>
</html>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/p5.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/addons/p5.dom.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/renatorena/codevember8-aBbXBy */
var h;
var w;
var c;

function setup() {
  createCanvas(windowWidth, windowHeight);
  background('#202020');
  frameRate(24);
}  

function draw() {
    for (var i = 0; i < 600; i++) {
      h=random(height);
      w=random(width);
      s=random(20,40);
      st=random(1,10);
      var colorList = [ "#DC3522", "#D9CB9E", "#374140", "#2A2C2B", "#1E1E20"]; //color list
      var c = round(random(4));  // select random color
      var c2 = round(random(4));  // select random color
      strokeWeight(st);
      stroke(colorList[c2]);
      fill(colorList[c]); //set fill color
      rect(w, h, s, s, 5);
      smooth();
    }
}
function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}

Comments