MuyZan/1.markdown

## 1.markdown

      
    Raw
  

              1.markdown
            
          
    1

A Pen by Zan on CodePen.
License.

  
## index.html
<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.1/p5.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.1/addons/p5.dom.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.1/addons/p5.sound.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
        <script src="sketch.js"></script>

  </head>
  <body>
    <div id="sketch-container"></div>
    <div class="signature">
      <p> Zan - p5.js - #1 </p>
    </div>

  </body>
</html>

## script.typescript
const bgColor_blue: string = '#022535';
const bgColor_red: string = '#920535';
let isDrawing: boolean = true;


function setup(): void {

	let cnv =  createCanvas(500,500);

	/*attack to html element*/
	cnv.parent('sketch-container');

	frameRate(25);
}

function draw() {

	let bgColor = mouseIsPressed ? bgColor_red : bgColor_blue;

	background(bgColor);

	for(i=0; i < 5; i++){
		fill(255,30*i);
    	stroke(random(30,550), 204, 0, 30*i);
    	strokeWeight(i*frameCount);
    	rect(i*-25, i*-mouseY, 200, 200);
   	rect(i*mouseY,i*mouseY, 200,200);
	}

  	for(i=0; i < 6; i++){
    	//fill(40);
		noFill();
    	stroke(random(4,20),random(4,40),40);
    	strokeWeight(3);
    	rect(i*50,i*50, random(3,frameCount),random(3,frameCount));
    	rect(i*150,i*150, 10, mouseY);
    	rect(i*150,i*250, mouseY, 10);
	}

}


/* AT SETUP FUNCTION /*

/*METHOD2: responsive center canvas without css:*/
// centerCanvas();

/*METHOD3: create Canvas width/height = browser window and block  scrollbars*/
//let cnv = createCanvas(windowWidth, windowHeight);
//cnv.style('display', 'block'); // fix scrollbars

/*_____*/

/*METHOD2: set canvas in the middle of windows without CSS*/
/*
  function centerCanvas() {
  var x = (windowWidth - width) / 2;
  var y = (windowHeight - height) / 2;
  cnv.position(x, y);
}

function windowResized() {
  centerCanvas();
*/

/*METHOD3: resizeCanvas with same window browser size
function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}


*/

## style.css
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  cursor: none;
}

body {
  display: flex;
  flex-direction: column;

  /* This centers our p5js sketch horizontally. */
  justify-content: center;

  /* This centers our p5js sketch vertically. */
  align-items: center;

  background-color: #f98;
}

#sketch-container {
  margin-top:50px;
  border:5px solid #fff;
  height:500px;
}

.signature {
  color: white;
  font-family: verdana;
}
	<html>
	<head>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.1/p5.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.1/addons/p5.dom.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.1/addons/p5.sound.min.js"></script>
	<link rel="stylesheet" type="text/css" href="style.css">
	<script src="sketch.js"></script>

	</head>
	<body>
	<div id="sketch-container"></div>
	<div class="signature">
	<p> Zan - p5.js - #1 </p>
	</div>

	</body>
	</html>
	const bgColor_blue: string = '#022535';
	const bgColor_red: string = '#920535';
	let isDrawing: boolean = true;


	function setup(): void {

	let cnv = createCanvas(500,500);

	/attack to html element/
	cnv.parent('sketch-container');

	frameRate(25);
	}

	function draw() {

	let bgColor = mouseIsPressed ? bgColor_red : bgColor_blue;

	background(bgColor);

	for(i=0; i < 5; i++){
	fill(255,30*i);
	stroke(random(30,550), 204, 0, 30*i);
	strokeWeight(i*frameCount);
	rect(i-25, i-mouseY, 200, 200);
	rect(imouseY,imouseY, 200,200);
	}

	for(i=0; i < 6; i++){
	//fill(40);
	noFill();
	stroke(random(4,20),random(4,40),40);
	strokeWeight(3);
	rect(i50,i50, random(3,frameCount),random(3,frameCount));
	rect(i150,i150, 10, mouseY);
	rect(i150,i250, mouseY, 10);
	}

	}



	/* AT SETUP FUNCTION /*

	/METHOD2: responsive center canvas without css:/
	// centerCanvas();

	/METHOD3: create Canvas width/height = browser window and block scrollbars/
	//let cnv = createCanvas(windowWidth, windowHeight);
	//cnv.style('display', 'block'); // fix scrollbars

	/_____/

	/METHOD2: set canvas in the middle of windows without CSS/
	/*
	function centerCanvas() {
	var x = (windowWidth - width) / 2;
	var y = (windowHeight - height) / 2;
	cnv.position(x, y);
	}

	function windowResized() {
	centerCanvas();
	*/

	/*METHOD3: resizeCanvas with same window browser size
	function windowResized() {
	resizeCanvas(windowWidth, windowHeight);
	}


	*/
	html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	cursor: none;
	}

	body {
	display: flex;
	flex-direction: column;

	/* This centers our p5js sketch horizontally. */
	justify-content: center;

	/* This centers our p5js sketch vertically. */
	align-items: center;

	background-color: #f98;
	}

	#sketch-container {
	margin-top:50px;
	border:5px solid #fff;
	height:500px;
	}

	.signature {
	color: white;
	font-family: verdana;
	}