https://demsp.github.io/cubeP3D_dragged.html

1<!DOCTYPE html>
2<html>
3<head>
4<title>Processing.js Test</title>

5<script src="https://cdnjs.cloudflare.com/ajax/libs/processing.js/1.4.8/processing.min.js"></script>

5

6<script type="application/processing" data-processing-target="pjs">
7float rotx = PI/4;
8float roty = PI/4;
9 void setup() {
10  size(500, 500,P3D);
11}
12
13 void draw() {
14//lights();
15 background(100);
16 // noStroke();
17 noFill();
18 //strokeWeight(0.1);
19  
20  
21  translate(width/2.0, height/2.0, 0);
22 
23 
24 //  rotateX(0.2);
25 // rotateX(rotx);//
26 
27 //rotateY(0.5);
28  rotateX(rotx);
29 
30 // scale(90);
31box(200);
32 
33strokeWeight(5);
34//noStroke();
35//fill(150);
36//noFill();
37//translate(100, 100, 0);
38//rotateZ(PI/2);
39sphere(100);
40
41strokeWeight(5);
42rotateX(PI/2);
43beginShape();
44
45vertex(   0,    0,  100);//top
46vertex(0, -94.3, -33.3);//left back
47vertex( -81.6, 47.1, -33.3);
48
49vertex(   0,    0,  100);//top
50vertex( 0, -94.3, -33.3); //right back
51vertex( 81.6,  47.1, -33.3);
52
53
54vertex(   0,   0,  100);//top
55vertex( -81.6, 47.1 , -33.3); //front
56vertex(81.6, 47.1, -33.3);
57
58
59
60endShape();
61 
62}
63
64void mouseDragged() {
65  float rate = 0.01;
66  rotx += (pmouseY-mouseY) * rate;
67  roty += (mouseX-pmouseX) * rate;
68}
69
70
71</script>

71
72</head>
73<body>
74<h1>Processing.js Test</h1>
75<p>Demonstrates the syntax for creating a two-dimensional (2D) array.</p>
76<canvas id="pjs"></canvas>
77</body>
78</html>
79
80