User:Lbattich/grad project test codes

From XPUB & Lens-Based wiki

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;
}
Retrieved from "https://pzwiki.wdka.nl/mw-mediadesign/index.php?title=User:Lbattich/grad_project_test_codes&oldid=94318"