Skip to content

Commit e54d48d

Browse files
GeorgeGallyGeorgeGally
committed
medium article lesson 3
1 parent b330e2e commit e54d48d

9 files changed

+573
-25
lines changed

‎js/creative_coding.js

+4-1
Original file line numberDiff line numberDiff line change
@@ -912,6 +912,7 @@ var mouseX = 0,
912912
frameRate = 60,
913913
frameCount = frameNumber = 0,
914914
lastUpdate = Date.now(),
915+
mouseMoved = false,
915916
mouseDown = false;
916917

917918
function cjsloop() {
@@ -928,7 +929,8 @@ function cjsloop() {
928929
mouseSpeedY = mouseX - oldMouseX;
929930
lastMouseX = oldMouseX = mouseX;
930931
lastMouseY = oldMouseY = mouseY;
931-
mouseReleased = 0;
932+
mouseReleased = 0;
933+
mouseMoved = 0;
932934
}
933935
requestAnimationFrame(cjsloop);
934936

@@ -974,6 +976,7 @@ function init() {
974976
window.addEventListener('mousemove', function(e) {
975977
mouseX = e.clientX;
976978
mouseY = e.clientY;
979+
mouseMoved = true;
977980
});
978981

979982
window.addEventListener('mousedown', function(e){mouseDown =true; if(typeof onMouseDown == 'function') onMouseDown() ;});

‎lesson02.html

+59
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<title>Creative Coding Yea!</title>
4+
<head>
5+
<meta charset="utf-8">
6+
<!-- <script src='http://connect.soundcloud.com/sdk.js'></script> -->
7+
<script language="javascript" src="js/creative_coding.js"></script>
8+
<script language="javascript" src="js/canvas.js"></script>
9+
10+
<link rel="stylesheet" href="css/reset.css" type="text/css" media="screen" />
11+
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
12+
<!-- <link rel="stylesheet" href="css/audio.css" type="text/css" media="screen" /> -->
13+
14+
</head>
15+
<body>
16+
17+
<script>
18+
19+
// BALL BOUNCES
20+
//BUT GOES OVER EDGES. FIX IT
21+
22+
var ctx = createCanvas("canvas1");
23+
var block_size = 20;
24+
var x = width/2;
25+
var y = height/2;
26+
var speed_x = random(-5, 5);
27+
var speed_y = random(-5, 5);
28+
29+
// much like processing this is the drawing loop that plays repeatedly
30+
// the actual syntax is a shortcut for requestAnimationFrame
31+
32+
function draw(){
33+
34+
// shortcut for clearing the screen,
35+
// takes a rgb value 255,255,255 or a grey value of 0-255
36+
ctx.background(250);
37+
38+
x = x + speed_x;
39+
y = y + speed_y;
40+
41+
if (x > width || x < 0 ) {
42+
speed_x = speed_x *-1;
43+
}
44+
45+
if (y > height || y < 0 ) {
46+
speed_y = speed_y *-1;
47+
}
48+
49+
ctx.fillStyle = "#00aeef";
50+
ctx.fillRect(x, y, block_size, block_size);
51+
52+
} // end draw
53+
54+
55+
</script>
56+
<!-- <script language="javascript" src="js/soundcloud.js"></script> -->
57+
</body>
58+
59+
</html>

‎lesson2.html

+33-24
Original file line numberDiff line numberDiff line change
@@ -16,44 +16,53 @@
1616

1717
<script>
1818

19-
// BALL BOUNCES
20-
//BUT GOES OVER EDGES. FIX IT
19+
// this is a function (from canvas.js) that sets you the canvas
20+
// so you don't need to do any of the heavy lifting and can
21+
// start playing straight away
22+
// the function also lets you access the screen width as "width" or "w"
23+
// and the screen height as "height" or "h"
2124

2225
var ctx = createCanvas("canvas1");
23-
var block_size = 20;
24-
var x = width/2;
25-
var y = height/2;
26-
var speed_x = random(-5, 5);
27-
var speed_y = random(-5, 5);
28-
29-
// much like processing this is the drawing loop that plays repeatedly
30-
// the actual syntax is a shortcut for requestAnimationFrame
26+
var ball_size = 20;
27+
var ball_x = width/2;
28+
var ball_y = height/2;
29+
var speed_x = randomInt(-15, 15);
30+
var speed_y = randomInt(-15, 15);
31+
ctx.fillStyle = rgb(randomInt(255),randomInt(255),0);
3132

3233
function draw(){
3334

34-
// shortcut for clearing the screen,
35-
// takes a rgb value 255,255,255 or a grey value of 0-255
36-
ctx.background(250);
35+
//ctx.background(255, 0.2);
36+
//ctx.fillStyle = rgb(255,0,0);
37+
moveBall();
38+
drawBall();
39+
}
3740

38-
x = x + speed_x;
39-
y = y + speed_y;
4041

41-
if (x > width || x < 0 ) {
42-
speed_x = speed_x *-1;
43-
}
42+
function moveBall(){
43+
ball_x = ball_x + speed_x;
44+
ball_y = ball_y + speed_y;
4445

45-
if (y > height || y < 0 ) {
46-
speed_y = speed_y *-1;
46+
if (bounce(ball_x, 0, w, ball_size)) {
47+
speed_x *=-1;
48+
ball_size = random(10, 50);
49+
ctx.fillStyle = rgb(randomInt(255),randomInt(255),0);
4750
}
4851

49-
ctx.fillStyle = "#00aeef";
50-
ctx.fillRect(x, y, block_size, block_size);
52+
if (bounce(ball_y, 0 ,h, ball_size)) {
53+
speed_y *=-1;
54+
ball_size = random(10, 50);
55+
ctx.fillStyle = rgb(0, randomInt(255),randomInt(255));
56+
}
57+
}
5158

52-
} // end draw
59+
function drawBall(){
60+
ctx.fillEllipse(ball_x, ball_y, ball_size, ball_size);
61+
}
5362

5463

5564
</script>
56-
<!-- <script language="javascript" src="js/soundcloud.js"></script> -->
65+
5766
</body>
5867

5968
</html>

‎lesson2b.html

+67
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<title>Creative Coding Yea!</title>
4+
<head>
5+
<meta charset="utf-8">
6+
<!-- <script src='http://connect.soundcloud.com/sdk.js'></script> -->
7+
<script language="javascript" src="js/creative_coding.js"></script>
8+
<script language="javascript" src="js/canvas.js"></script>
9+
10+
<link rel="stylesheet" href="css/reset.css" type="text/css" media="screen" />
11+
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
12+
<!-- <link rel="stylesheet" href="css/audio.css" type="text/css" media="screen" /> -->
13+
14+
</head>
15+
<body>
16+
17+
<script>
18+
19+
var ctx = createCanvas("canvas1");
20+
21+
var ball = {
22+
x: width/2,
23+
y: height/2,
24+
speed_x: random(-5, 5),
25+
speed_y: random(-5, 5),
26+
size: 20,
27+
colour: rgb(0)
28+
}
29+
30+
31+
function draw(){
32+
33+
//ctx.background(255, 0.2);
34+
//ctx.fillStyle = rgb(255,0,0);
35+
moveBall();
36+
drawBall();
37+
}
38+
39+
40+
function moveBall(){
41+
42+
if (bounce(ball.x, 0, w, ball.size)) {
43+
ball.speed_x *=-1;
44+
ctx.fillStyle = rgb(randomInt(255),randomInt(255),0);
45+
}
46+
47+
if (bounce(ball.y, 0 ,h, ball.size)) {
48+
ball.speed_y *=-1;
49+
ctx.fillStyle = rgb(0, randomInt(255),randomInt(255));
50+
}
51+
52+
ball.x = ball.x + ball.speed_x;
53+
ball.y = ball.y + ball.speed_y;
54+
55+
}
56+
57+
58+
function drawBall(){
59+
ctx.fillEllipse(ball.x, ball.y, ball.size, ball.size);
60+
}
61+
62+
63+
</script>
64+
65+
</body>
66+
67+
</html>

‎lesson2c.html

+81
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<title>Creative Coding Yea!</title>
4+
<head>
5+
<meta charset="utf-8">
6+
<!-- <script src='http://connect.soundcloud.com/sdk.js'></script> -->
7+
<script language="javascript" src="js/creative_coding.js"></script>
8+
<script language="javascript" src="js/canvas.js"></script>
9+
10+
<link rel="stylesheet" href="css/reset.css" type="text/css" media="screen" />
11+
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
12+
<!-- <link rel="stylesheet" href="css/audio.css" type="text/css" media="screen" /> -->
13+
14+
</head>
15+
<body>
16+
17+
<script>
18+
19+
var ctx = createCanvas("canvas1");
20+
var number_of_balls = 10;
21+
var balls = [];
22+
23+
24+
// push a ball and it's values into the array
25+
for (var i = 0; i < number_of_balls; i++) {
26+
var ball = {
27+
x: width/2,
28+
y: height/2,
29+
speed_x: random(-5, 5),
30+
speed_y: random(-5, 5),
31+
size: 20,
32+
colour: rgb(0)
33+
}
34+
balls.push(ball);
35+
}
36+
37+
38+
function draw(){
39+
40+
//ctx.background(255, 0.2);
41+
//ctx.fillStyle = rgb(255,0,0);
42+
moveBall();
43+
drawBall();
44+
}
45+
46+
47+
function moveBall(){
48+
49+
for (var i = 0; i < balls.length; i++) {
50+
51+
balls[i].x = balls[i].x + balls[i].speed_x;
52+
balls[i].y = balls[i].y + balls[i].speed_y;
53+
54+
if (bounce(balls[i].x, 0, w, balls[i].size)) {
55+
balls[i].speed_x *=-1;
56+
balls[i].colour = rgb(randomInt(55),randomInt(255),0);
57+
}
58+
59+
if (bounce(balls[i].y, 0 ,h, balls[i].size)) {
60+
balls[i].speed_y *=-1;
61+
balls[i].colour = rgb(0, randomInt(255),randomInt(55));
62+
}
63+
64+
}
65+
66+
}
67+
68+
69+
function drawBall(){
70+
for (var i = 0; i < balls.length; i++) {
71+
ctx.fillStyle = balls[i].colour;
72+
ctx.fillEllipse(balls[i].x, balls[i].y, balls[i].size, balls[i].size);
73+
}
74+
}
75+
76+
77+
</script>
78+
79+
</body>
80+
81+
</html>

‎lesson2d.html

+81
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<title>Creative Coding Yea!</title>
4+
<head>
5+
<meta charset="utf-8">
6+
<!-- <script src='http://connect.soundcloud.com/sdk.js'></script> -->
7+
<script language="javascript" src="js/creative_coding.js"></script>
8+
<script language="javascript" src="js/canvas.js"></script>
9+
10+
<link rel="stylesheet" href="css/reset.css" type="text/css" media="screen" />
11+
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
12+
<!-- <link rel="stylesheet" href="css/audio.css" type="text/css" media="screen" /> -->
13+
14+
</head>
15+
<body>
16+
17+
<script>
18+
19+
var ctx = createCanvas("canvas1");
20+
var number_of_balls = 10;
21+
var balls = [];
22+
23+
24+
// push a ball and it's values into the array
25+
for (var i = 0; i < number_of_balls; i++) {
26+
var ball = {
27+
x: width/2,
28+
y: height/2,
29+
speed_x: random(-5, 5),
30+
speed_y: random(-5, 5),
31+
size: 20,
32+
colour: rgb(0)
33+
}
34+
balls.push(ball);
35+
}
36+
37+
38+
function draw(){
39+
40+
//ctx.background(255, 0.2);
41+
moveBall();
42+
drawBall();
43+
}
44+
45+
46+
function moveBall(){
47+
48+
for (var i = 0; i < balls.length; i++) {
49+
var b = balls[i];
50+
b.x = b.x + b.speed_x;
51+
b.y = b.y + b.speed_y;
52+
53+
if (bounce(b.x, 0, w, b.size)) {
54+
b.speed_x *=-1;
55+
b.colour = rgb(randomInt(55),randomInt(255),0);
56+
}
57+
58+
if (bounce(b.y, 0 ,h, b.size)) {
59+
b.speed_y *=-1;
60+
b.colour = rgb(0, randomInt(255),randomInt(55));
61+
}
62+
63+
}
64+
65+
}
66+
67+
68+
function drawBall(){
69+
for (var i = 0; i < balls.length; i++) {
70+
var b = balls[i];
71+
ctx.fillStyle = b.colour;
72+
ctx.fillEllipse(b.x, b.y, b.size, b.size);
73+
}
74+
}
75+
76+
77+
</script>
78+
79+
</body>
80+
81+
</html>

0 commit comments

Comments
 (0)