User:Lbattich/grad project test codes
list/vocabulary of "shapes"
html
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="content-type">
<meta name="author" content="Lucas Battich">
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="paper-full.js"></script>
</head>
<body>
<canvas id="canvas" resize></canvas>
</body>
</html>
css styling
html,
body {
margin: 0;
overflow: hidden;
height: 100%;
background-color: Gainsboro;
}
canvas[resize] {
width: 100vw;
height: 100vh;
}
javascript
var vocabulary = 0;
// background colour
var move = false;
var back = new Path.Rectangle({
size: [view.size.width, view.size.height],
fillColor: "Gainsboro"
});
back.position = view.center;
function drawCluster() {
var count = 2 + Math.floor(4 * Math.random());
var angle = 360 * Math.random();
// var centerRect = Point.random() * view.size; // use this for random placement
var centerRect = view.center; // use for centred placement
for (var i = 0; i < count; i++) {
var rectSize = Size.random() * new Size(view.size.width/4, view.size.height);
var rect = new Path.Rectangle(centerRect-(rectSize/2), rectSize);
rect.fillColor = grey();
rect.shadowColor = grey();
rect.shadowBlur = 1;
rect.shadowOffset = new Point(5, 5);
// rect.fillColor = "black";
// rect.opacity = Math.random();
rect.rotate(angle);
}
}
function drawClusterPolygon() {
var count = 2 + Math.floor(4 * Math.random());
var angle = 360 * Math.random();
// var centerRect = Point.random() * view.size; // use this for random placement
var centerRect = view.center; // use for centred placement
for (var i = 0; i < count; i++) {
var rectSize = Size.random() * new Size(view.size.width/4, view.size.height);
var rect = new Path.RegularPolygon(100, 4, 100);
rect.fillColor = grey();
rect.shadowColor = grey();
rect.shadowBlur = 1;
rect.shadowOffset = new Point(5, 5);
// rect.fillColor = "black";
// rect.opacity = Math.random();
rect.rotate(angle);
}
}
function drawCircle() {
// var centerC = Point.random() * view.size; // use this for random placement
var centerC = view.center + ((Point.random() * 30) - (Point.random() * 15)); // use for centred placement
var radius = Math.random() * (view.size.height / 6);
// var radius = view.size.height / 50;
var circle = new Path.Circle(centerC, radius);
circle.fillColor = 'red';
circle.fillColor.hue = Math.random() * 360;
circle.opacity = Math.random() / 2;
}
// circle.scale(Math.random() / 2);
function drawArc() {
// var centerC = Point.random() * view.size; // use this for random placement
var centerArc = view.center + ((Point.random() * 30) - (Point.random() * 15)); // use for centred placement
var offset = view.size.height / 6;
var from = new Point(centerArc.x-offset, centerArc.y-offset);
var through = new Point(centerArc.x+(offset*0.6666), centerArc.y-(offset*0.6666));
var to = new Point(centerArc.x+offset, centerArc.y+offset);
var arcSeg = Path.Arc(from, through, to);
arcSeg.strokeColor = 'red';
arcSeg.strokeColor.hue = Math.random() * 360;
arcSeg.opacity = Math.random();
arcSeg.scale(Math.random()+1, centerArc);
arcSeg.strokeWidth = Math.floor(Math.random() * (view.size.height / 6));
arcSeg.rotate(Math.random() * 360, centerArc);
}
function drawCurve() {
// var centerC = Point.random() * view.size; // use this for random placement
var stickHue = Math.random() * 360;
var centerCurve = view.center + ((Point.random() * 30) - (Point.random() * 15)); // use for centred placement
var offset = view.size.height / 6;
var from = new Point(centerCurve.x-offset, centerCurve.y-offset);
var through = new Point(centerCurve.x+(offset*0.5), centerCurve.y-(offset*0.5));
var to = new Point(centerCurve.x+offset, centerCurve.y+offset);
var curve = Path.Arc(from, through, to);
var stick= (Math.random() * view.size.height * 2);
var line = new Path;
line.add(to);
line.add(new Point(to.x, to.y+stick));
line.rotate(5, to);
var groupC = new Group(curve, line);
// curve.add(new Point(500, 500);
// curve.closed = true;
groupC.strokeColor = 'red';
// groupC.strokeColor.hue = stickHue;
var opacity = Math.random();
groupC.opacity = opacity;
groupC.scale(Math.random(), centerCurve);
groupC.strokeWidth = Math.floor(Math.random() * (view.size.height / 30));
// curve.rotate(Math.random() * 360, to);
}
function drawHexagon() {
// var centerH = Point.random() * view.size; // use this for random placement
var centerH = view.center + ((Math.random() * 30) - 15); // use for centred placement
var hexagon = new Path.RegularPolygon({
center: centerH,
sides: 6,
radius: view.size.height / 4,
fillColor: 'black'
});
var triangle = new Path();
triangle.add(hexagon.segments[0].point);
triangle.add(hexagon.segments[1].point);
triangle.add(centerH);
triangle.add(hexagon.segments[5].point);
triangle.closed = true;
triangle.fillColor = 'white';
var copy = triangle.clone();
copy.opacity = 0.5;
copy.rotate(-120, centerH);
// console.log(Math.random() * (view.size.height / 4));
var groupH = new Group(hexagon, triangle, copy);
groupH.rotate(Math.random() * 360, centerH);
groupH.scale(Math.random(), centerH);
}
function drawGrid() {
// var centerG = Point.random() * view.size; // use this for random placement
var centerG = view.center; // use for centred placement
var cells = 20;
var cellWidth = view.size.height / 40;
var grid = new Path.Rectangle(centerG, new Size(cellWidth * cells, cellWidth * cells));
var pLine = new Path.Line(topPoint, bottomPoint);
var groupG = new Group(grid, pLine);
for (var i = 0; i <= cells; i++) {
var xPos = grid.bounds.left + (i * cellWidth);
var topPoint = new Point(xPos, grid.bounds.top);
var bottomPoint = new Point(xPos, grid.bounds.bottom - (i * cellWidth));
var vLine = new Path.Line(topPoint, bottomPoint);
groupG.addChild(vLine);
var yPos = grid.bounds.top + i * cellWidth;
var leftPoint = new Point(grid.bounds.left, yPos);
var rightPoint = new Point(grid.bounds.right - (i * cellWidth), yPos);
var hLine = new Path.Line(leftPoint, rightPoint);
groupG.addChild(hLine);
}
grid.removeSegment(3);
groupG.strokeColor = 'red';
groupG.skew(-30, -30);
groupG.rotate(225, centerG);
groupG.scale(Math.random()+0.1, centerG);
}
function onMouseUp(event) {
vocabulary += 1;
if (vocabulary == 1){drawCluster();}
else if (vocabulary == 2){drawCircle();}
else if (vocabulary == 3){drawHexagon();}
else if (vocabulary == 4){drawGrid();}
else if (vocabulary == 5){drawArc();}
else if (vocabulary == 6){drawCurve();}
else if (vocabulary >= 7){vocabulary = 0;}
// drawGrid();
// drawCluster();
// drawCluster();
// drawCircle();
// drawHexagon();
// kids = project.activeLayer.children;
// for (var i = 0; i < kids.length; i++) {
// var distance = view.center - kids[i].position;
// console.log(distance.length/80000);
// }
// var angle = 360 * Math.random();
// project.activeLayer.lastChild.rotate(angle);
}
function onMouseDown(event) {
move = false;
project.activeLayer.removeChildren();
}
function onFrame(event) {
var angle = 360 * Math.random();
if (move) {
kids = project.activeLayer.children;
for (var i = 0; i < kids.length; i++) {
var distance = kids[i].position - view.center;
// console.log(distance);
kids[i].position += distance / 100;
if (distance.length < (view.size.height)){
kids[i].scale(1+distance.length/50000);
}
else{
kids[i].scale(1+distance.length/9000000);
}
// console.log( view.size.height - distance.length);
}
var selector = Math.floor(Math.random()*50);
if (selector == 0){drawGrid();}
else if (selector == 1){drawCircle();}
else if (selector == 2){drawCluster();}
else if (selector == 3){drawHexagon();}
else if (selector >= 4){}
}
}
view.onResize = function(event) {
project.activeLayer.position = view.center;
project.activeLayer.bounds = view.size;
}
function grey() {
var a = Math.floor(256*Math.random());
var colour = "rgb("+a+","+a+","+a+")";
return colour;
}