Skip to content

Instantly share code, notes, and snippets.

@fitosegrera

fitosegrera/index.html

Last active August 29, 2015 14:04
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save fitosegrera/5b0515495a8930c61df4 to your computer and use it in GitHub Desktop.
Save fitosegrera/5b0515495a8930c61df4 to your computer and use it in GitHub Desktop.
Download ZIP
example_8 Generative Drawing in javascript (SUPER ADVANCED!!!!)
Raw
index.html
<!--
///////////////////////////////////////
// example_8 web class bootcamp 2014 //
///////////////////////////////////////
//////////// Parsons MFADT ////////////
///////////////////////////////////////
//Created by: fito_segrera
//fii.to
GENERATIVE DRAWING
-->
<!DOCTYPE html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Press+Start+2P' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body id = "theBody">
<div>
<canvas id="myCanvas" width="200" height="100"></canvas>
<li id = "myList"></li>
<script src="script.js"> </script>
</div>
</body>
</html>
Raw
script.js
///////////////////////////////////////
// example_8 web class bootcamp 2014 //
///////////////////////////////////////
//////////// Parsons MFADT ////////////
///////////////////////////////////////
//Created by: fito_segrera
//fii.to
//------------------------------------
//------------------------------------
var canvas = document.getElementById("myCanvas");
var mouseRect = canvas.getContext("2d");
var circle = canvas.getContext("2d");
var list = document.getElementById("myList");
var body = document.getElementById("theBody");
var message;
var counter = 0;
var counterTotal = 0;
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
function circlesClass(number){
this.numberOfCircles = number;
this.circleColor = [ Math.floor(Math.random()*255) , Math.floor(Math.random()*255) , Math.floor(Math.random()*255) ];
this.draw =function(){
var posX = new Array();
var posY = new Array();
body.style.backgroundColor = "rgb("+Math.floor(Math.random()*255)+","+Math.floor(Math.random()*255)+","+Math.floor(Math.random()*255)+")";
console.log("Number of Circles: "+circlesInstance1.numberOfCircles);
console.log("Color of Circles: "+circlesInstance1.circleColor);
for(var i = 0; i < circlesInstance1.numberOfCircles; i++){
posX[circlesInstance1.numberOfCircles] = Math.random()*window.innerWidth;
posY[circlesInstance1.numberOfCircles] = Math.random()*window.innerHeight;
list.innerHTML = "Position X: "+posX[circlesInstance1.numberOfCircles]+" /"+" Position Y: "+posX[circlesInstance1.numberOfCircles]+" /"+" Number of circles: "+counterTotal*circlesInstance1.numberOfCircles+" /"+" Color (R,G,B): "+circlesInstance1.circleColor+" / "+message+" / "+"MOUSE CLICK ANYWHERE TO RESTART THE DRAWING";
// console.log("Pos X of circle "+i+" : "+posX[circlesInstance1.numberOfCircles]);
// console.log("Pos Y of circle "+i+" : "+posY[circlesInstance1.numberOfCircles]);
circle.fillStyle = 'rgb('+circlesInstance1.circleColor+')';
circle.arc(posX[circlesInstance1.numberOfCircles], posY[circlesInstance1.numberOfCircles], Math.random()*(100-Math.random()*100), 0, Math.PI*2, false);
circle.fill();
circle.stroke();
circle.closePath();
}
counter++;
counterTotal++;
console.log("Counter: "+counter);
if(counter>1){
circlesInstance1.circleColor=[ Math.floor(Math.random()*255) , Math.floor(Math.random()*255) , Math.floor(Math.random()*255) ];
counter=0;
}
canvas.addEventListener ('mousemove',function(mouse){
var mousePos = { x: mouse.clientX, y: mouse.clientY };
console.log (mouse.clientX, mouse.clientY);
message = "Mouse Coordinates X: "+mouse.clientX + " Y: " + mouse.clientY;
},false);
canvas.addEventListener ('click',function(mouse){
location.reload();
},false);
}
}
var circlesInstance1 = new circlesClass(5); //Change this number to modify the numbers of circles drawn in each loop
circlesInstance1.draw;
setInterval(circlesInstance1.draw,100);
Raw
style.css
/*
///////////////////////////////////////
// example_8 web class bootcamp 2014 //
///////////////////////////////////////
//////////// Parsons MFADT ////////////
///////////////////////////////////////
//Created by: fito_segrera
//fii.to
*/
body {
width: 100%;
height: 100%;
margin: 0px;
}
li{
background-color: black;
text-align: center;
color: white;
font-family: 'Press Start 2P', cursive;
font-size: 10px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment