nature/10-three-processing.html at master · dlobser/nature · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<!DOCTYPE HTML>
<html>
  <head>

<script src="js/libs/processing.js"></script>
<script src="js/three/build/three.js"></script>
<style>

body{
background-color:black;
color:grey;
text-align:center;
font-size:16;
font-family:sans-serif;
}

#move {
   text-align:center;
}

canvas {
   display: inline;
}

</style>
</head>
<body>
<p>

This script combines threejs and processingjs

</p>
</body>
<script>

var points = [];

var sc = 100;
var cc = 1;

draw();

function draw(){

	//reinit points so it doesn't fil up
	points= [];

	var geo = new THREE.SphereGeometry(300,cc,cc);

	sc+=1;

	if(cc<16)
		cc+=.02;

	var mesh = new THREE.Mesh( geo );

	mesh.rotation.y = sc/100;
	mesh.rotation.x = sc/130;
	mesh.rotation.z = sc/150;

	//freeze transforms on the object to grab worldspace positions of the vertices
	mesh.updateMatrixWorld();

	for(var i = 0 ; i < mesh.geometry.vertices.length ; i++){

		var vector = mesh.geometry.vertices[i].clone();
		mesh.matrixWorld.multiplyVector3( vector );

		points.push(vector);
	}
	requestAnimationFrame( draw );
}

</script>

<script type="text/processing" data-processing-target="processing-canvas">

void setup() {

  size(1024, 768);
  background(0);
  noStroke();

  for(int i = 0 ; i<points.length; i++){
	//println(points[i].x);
  }
}

void draw(){

	fill(0,10);
	rect(0,0,width,height);
	fill(255);

	for(var i = 0; i<points.length ; i++){
		ellipse(points[i].x+512,points[i].y+390,6+(points[i].z/100),6+(points[i].z/100));
	}
}

</script>

<div id="move">
<canvas id="processing-canvas"> </canvas>
</div>
<p style="color:#333">
<strong>you:</strong> what?<br>
<strong>me:</strong> it's just a rotating sphere<br>
i stick all the vertices in an array-
that's in threejs<br>
in processing - i draw ellipses at the x and y locations<br>
so - x/y worldspace locations of vertices<br>
sadly - freezing transforms every frame is probably too slow to be able to rely on this for heavier stuff<br>
i'm now adding the z component to the radius so it looks more 3d<br>
 i was kind of surprised that worked<br>
you can just throw variables back and forth between different scripts<br>

</p>
</html>