tseijp/processing.jsテンプレート

## processing.jsテンプレート
<html>


<head>


    <!--processing.jsを読み込む-->
    <script src="js/processing.js"></script>


    <!--#wrapperのサイズを取得してcanvasの幅と高さに指定しcanvasを全画面に-->
    <!--JSを、canvasを画面いっぱいにするため記述-->
    <script type="text/javascript">
        $(function () {
            sizing();
            $(window).resize(function () {
                sizing();
            });
        });

        function sizing() {
            $("#main").attr({ height: $("#wrapper").height() });
            $("#main").attr({ width: $("#wrapper").width() });
        }
    </script>


    <!--CSSを、canvasを画面いっぱいにするために記述-->
    <style type="text/css">
        body {
            margin: 0px;
            padding: 0px;
            position: relative;
        }

            body #wrapper {
                width: 100%;
                height: 100%;
                position: fixed;
            }

        .centered {
            position: fixed;
            top: 45%;
            left: 40%;
            margin-top: -50px;
            margin-left: -100px;
            text-align: center;
            color: white;
            font-size: xx-large;
        }


        /*クリックした時に表示される枠をCSSで消す*/
        *:focus {
            outline: none;
        }
    </style>


    <!--Processingのコードを記述-->
    <script type="application/processing" data-processing-target="pjs">
        Circle[] circle = new Circle[50];

        int boxS = 30;

        void setup() {
        /*画面のサイズを合わせる*/
        size(innerWidth,innerHeight);
        colorMode(HSB, 360, 100, 100);
        //background(0);
        smooth();

        for (int i = 0 ; i < circle.length;i++) {
        circle[i] = new Circle();
        }

        rectMode(CENTER);
        }

        void draw() {
        size(innerWidth,innerHeight);
        /*画面のサイズを合わせる*/
        //background(0);
        externals.context.clearRect(0,0,width,height);


        for (int i = 0 ; i < circle.length;i++) {
        circle[i].move();
        circle[i].display();
        }

        colorBox();
        }

        void colorBox() {
        stroke(360);
        strokeWeight(1);
        for (int i = -3; i < 4;i++) {
        fill(360/7 * (i+3), 80, 31);
        rect(width/2 + i*(boxS+10), height * 3/5, boxS, boxS);

        if (mousePressed == true &&
        mouseX > width/2 + i*(boxS+10) - boxS/2 &&
        mouseX < width/2 + i*(boxS+10) + boxS/2 &&
        mouseY > height * 3/5 - boxS/2 &&
        mouseY < height * 3/5 + boxS/2 ) {

        for (int j = 0 ; j < circle.length;j++) {
        circle[j].c = 360/7 * (i+3);
        }
        }
        }
        }

        class Circle {
        float x;
        float y;
        float r;
        float spd;
        float lineW;
        int sign;
        float c;

        Circle() {
        r = random(20, 100);

        x = random(width);
        y = random(r/2, height - r/2);

        spd = r/100;

        lineW = random(1, 20);

        sign = -1;

        c = 158;
        }

        void move() {
        y += sign * spd;

        if ( y < -r/2 ) {
        x = random(width);
        y =  height + r/2;
        }
        }

        void display() {
        fill(c, 80, 100, 80);
        noStroke();
        ellipse(x, y, r, r);
        }
        }
    </script>
</head>


<body bgcolor="black">

    <!--canvasを設置-->
    <div id="wrapper"<!--wrapper:フルcanvas-->>
        <canvas id="pjs" /><br />
    </div<!--この記述の後にコンテンツ(文章等)を設置すれば、
                               canvasの上に表示される-->>


    <div class="centered">
        Hello World
    </div>


</body>


</html>
	<html>



	<head>


	<!--processing.jsを読み込む-->
	<script src="js/processing.js"></script>


	<!--#wrapperのサイズを取得してcanvasの幅と高さに指定しcanvasを全画面に-->
	<!--JSを、canvasを画面いっぱいにするため記述-->
	<script type="text/javascript">
	$(function () {
	sizing();
	$(window).resize(function () {
	sizing();
	});
	});

	function sizing() {
	$("#main").attr({ height: $("#wrapper").height() });
	$("#main").attr({ width: $("#wrapper").width() });
	}
	</script>


	<!--CSSを、canvasを画面いっぱいにするために記述-->
	<style type="text/css">
	body {
	margin: 0px;
	padding: 0px;
	position: relative;
	}

	body #wrapper {
	width: 100%;
	height: 100%;
	position: fixed;
	}

	.centered {
	position: fixed;
	top: 45%;
	left: 40%;
	margin-top: -50px;
	margin-left: -100px;
	text-align: center;
	color: white;
	font-size: xx-large;
	}


	/クリックした時に表示される枠をCSSで消す/
	*:focus {
	outline: none;
	}
	</style>



	<!--Processingのコードを記述-->
	<script type="application/processing" data-processing-target="pjs">
	Circle[] circle = new Circle[50];

	int boxS = 30;

	void setup() {
	/画面のサイズを合わせる/
	size(innerWidth,innerHeight);
	colorMode(HSB, 360, 100, 100);
	//background(0);
	smooth();

	for (int i = 0 ; i < circle.length;i++) {
	circle[i] = new Circle();
	}

	rectMode(CENTER);
	}

	void draw() {
	size(innerWidth,innerHeight);
	/画面のサイズを合わせる/
	//background(0);
	externals.context.clearRect(0,0,width,height);


	for (int i = 0 ; i < circle.length;i++) {
	circle[i].move();
	circle[i].display();
	}

	colorBox();
	}

	void colorBox() {
	stroke(360);
	strokeWeight(1);
	for (int i = -3; i < 4;i++) {
	fill(360/7 * (i+3), 80, 31);
	rect(width/2 + i(boxS+10), height 3/5, boxS, boxS);

	if (mousePressed == true &&
	mouseX > width/2 + i*(boxS+10) - boxS/2 &&
	mouseX < width/2 + i*(boxS+10) + boxS/2 &&
	mouseY > height * 3/5 - boxS/2 &&
	mouseY < height * 3/5 + boxS/2 ) {

	for (int j = 0 ; j < circle.length;j++) {
	circle[j].c = 360/7 * (i+3);
	}
	}
	}
	}

	class Circle {
	float x;
	float y;
	float r;
	float spd;
	float lineW;
	int sign;
	float c;

	Circle() {
	r = random(20, 100);

	x = random(width);
	y = random(r/2, height - r/2);

	spd = r/100;

	lineW = random(1, 20);

	sign = -1;

	c = 158;
	}

	void move() {
	y += sign * spd;

	if ( y < -r/2 ) {
	x = random(width);
	y = height + r/2;
	}
	}

	void display() {
	fill(c, 80, 100, 80);
	noStroke();
	ellipse(x, y, r, r);
	}
	}
	</script>
	</head>




	<body bgcolor="black">

	<!--canvasを設置-->
	<div id="wrapper"<!--wrapper:フルcanvas-->>
	<canvas id="pjs" /><br />
	</div<!--この記述の後にコンテンツ(文章等)を設置すれば、
	canvasの上に表示される-->>


	<div class="centered">
	Hello World
	</div>


	</body>





	</html>
No results found