자바스크립트 코드 모음 - 칸아카데미 - 프로그래밍, 자바스크립트, 칸아카데미, 당구, 3쿠션, 4구, 좋은글, 유머
작성일자 2018년 4월 27일 2018년 5월 8일 글쓴이 geo
증가코드(x = x + 1) 단축
<script type="text/processing" data-processing-target="mycanvas"> size(400, 400); noStroke(); var x = 200; var y = 350; var ballWidth = 300; var ballHeight = 200; draw = function() { background(255, 206, 71); fill(191, 0, 255); ellipse(x, y, ballWidth, ballHeight); x += 1; y -= 2; ballWidth *= 99/100; ballHeight *= 99/100; }; </script> <canvas id="mycanvas"></canvas>
var ballWidth = 300;
var ballHeight = 200;
background(255, 206, 71);
fill(191, 0, 255);
ellipse(x, y, ballWidth, ballHeight);
ballWidth *= 99/100;
ballHeight *= 99/100;
증가코드(+=) 더 단축
<script type="text/processing" data-processing-target="mycanvas"> size(400, 400); noStroke(); var eyeSize = 40; var x = 200; draw = function() { // face fill(255, 255, 0); ellipse(x, 208, 300, 300); // eyes fill(46, 46, 41); ellipse(x - 50, 151, eyeSize, eyeSize); ellipse(x + 100, 142, eyeSize, eyeSize); // mouth fill(252, 65, 65); ellipse(x + 50, 240, 120, 136); eyeSize++; // Winston++!! // Intelligence++! }; </script> <canvas id="mycanvas"></canvas>
eyeSize++;
// Winston++!!
// Intelligence++!
마우스 상호작용(interaction)
<script type="text/processing" data-processing-target="mycanvas"> size(400, 400); // mouseX and mouseY strokeWeight(3); stroke(57, 0, 214); fill(0, 210, 247); draw = function() { background(255, 206, 7); ellipse(mouseX, mouseY, 30, 30); }; </script> <canvas id="mycanvas"></canvas>
// mouseX and mouseY
stroke(57, 0, 214);
fill(0, 210, 247);
background(255, 206, 7);
변수를 포함하는 식으로 크기 조정
<script type="text/processing" data-processing-target="mycanvas"> size(400, 400); noStroke(); var faceSize = 300; var mouthSize = 1/2 * faceSize; var eyeSize = 2/15 * faceSize; // 40/300ths -> 4/30 -> 2/15 // https://www.khanacademy.org/math/arithmetic/fractions var x = 200; var y = 200; // face fill(255, 255, 0); ellipse(x, y, faceSize, faceSize); // eyes fill(46, 46, 41); ellipse(x - 1/6 * faceSize, y - 1/6 * faceSize, eyeSize, eyeSize); ellipse(x + 1/3 * faceSize, y - 1/5 * faceSize, eyeSize, eyeSize); // mouth fill(252, 65, 65); ellipse(x + 1/6 * faceSize, y + 2/15 * faceSize, mouthSize, mouthSize); </script> <canvas id="mycanvas"></canvas
var faceSize = 300;
var eyeSize = 2/15 * faceSize; // 40/300ths -> 4/30 -> 2/15
// https://www.khanacademy.org/math/arithmetic/fractions
<canvas id="mycanvas"></canvas
<script type="text/processing" data-processing-target="mycanvas"> size(400, 400); fill(0, 13, 255); textSize(38); text("Sophia", 99, 96); fill(174, 99, 235); textSize(17); text("I like puppies and guitars and coding", 99, 155); </script> <canvas id="mycanvas"></canvas>
text("Sophia", 99, 96);
fill(174, 99, 235);
text("I like puppies and guitars and coding", 99, 155);
<script type="text/processing" data-processing-target="mycanvas"> size(400, 400); var drawWinston = function() { var faceX = random(50, 350); var faceY = random(50,350); fill(255, 255, 0); ellipse(faceX, faceY, 300, 300); // face fill(46, 46, 41); ellipse(faceX - 45, faceY - 57, 40, 40); // eyes ellipse(faceX + 102, faceY - 66, 40, 40); fill(252, 65, 65); ellipse(faceX + 55, faceY + 32, 120, 136); // mouth }; drawWinston(); drawWinston(); drawWinston(); </script> <canvas id="mycanvas"></canvas>
var drawWinston = function() {
var faceX = random(50, 350);
var faceY = random(50,350);
ellipse(faceX, faceY, 300, 300); // face
ellipse(faceX - 45, faceY - 57, 40, 40); // eyes
ellipse(faceX + 102, faceY - 66, 40, 40);
ellipse(faceX + 55, faceY + 32, 120, 136); // mouth
drawWinston();
<script type="text/processing" data-processing-target="mycanvas"> size(400, 400); var drawWinston = function(faceX, faceY) { fill(255, 255, 0); ellipse(faceX, faceY, 160, 160); // face fill(46, 46, 41); ellipse(faceX - 30, faceY - 50, 30, 30); // eyes ellipse(faceX + 30, faceY - 55, 30, 30); fill(252, 65, 65); ellipse(faceX + 19, faceY + 32, 82, 81); // mouth }; fill(255, 0, 0); text("Toddler Winston:", 10, 20); text("Teenage Winston:", 200, 20); text("Twenty-Something Winston:", 10, 220); text("Adult Winston:", 200, 220); drawWinston(99, 117); drawWinston(288, 117); drawWinston(99, 310); drawWinston(288, 310); </script> <canvas id="mycanvas"></canvas>
var drawWinston = function(faceX, faceY) {
ellipse(faceX, faceY, 160, 160); // face
ellipse(faceX + 30, faceY - 55, 30, 30);
text("Toddler Winston:", 10, 20);
text("Teenage Winston:", 200, 20);
text("Twenty-Something Winston:", 10, 220);
text("Adult Winston:", 200, 220);
drawWinston(99, 117);
drawWinston(288, 117);
drawWinston(99, 310);
drawWinston(288, 310);
<script type="text/processing" data-processing-target="mycanvas"> size(400, 400); var drawWinston = function(faceX, faceY) { fill(255, 255, 0); ellipse(faceX, faceY, 180, 180); // face fill(46, 46, 41); ellipse(faceX - 30, faceY - 50, 30, 30); // eyes ellipse(faceX + 44, faceY - 55, 30, 30); fill(252, 65, 65); ellipse(faceX + 19, faceY + 32, 82, 81); // mouth }; var calcTotalDonuts = function(numYears) { return 3 * 365 * numYears; }; fill(255, 0, 0); text("2-year-old Winston:", 10, 20); text(calcTotalDonuts(2), 10, 40); text("14-year-old Winston:", 200, 20); text(calcTotalDonuts(14), 200, 40); text("25-year-old Winston:", 10, 220); text(calcTotalDonuts(25), 10, 240); text("65-year-old Winston:", 200, 220); text(calcTotalDonuts(65), 200, 240); drawWinston(99, 117); drawWinston(294, 117); drawWinston(101, 316); drawWinston(294, 316); </script> <canvas id="mycanvas"></canvas>
var calcTotalDonuts = function(numYears) {
return 3 * 365 * numYears;
text("2-year-old Winston:", 10, 20);
text(calcTotalDonuts(2), 10, 40);
text("14-year-old Winston:", 200, 20);
text(calcTotalDonuts(14), 200, 40);
text("25-year-old Winston:", 10, 220);
text(calcTotalDonuts(25), 10, 240);
text("65-year-old Winston:", 200, 220);
text(calcTotalDonuts(65), 200, 240);
drawWinston(294, 117);
drawWinston(101, 316);
drawWinston(294, 316);
<script type="text/processing" data-processing-target="mycanvas"> size(400, 400); var lifeInches = 20; var calcInches = function(startAge, endAge, inchesPerYear) { var totalInches = inchesPerYear * (endAge - startAge); lifeInches += totalInches; return totalInches; }; fill(255, 0, 0); text("From 0-8 years:", 10, 20); text(calcInches(0, 8, 2.5), 10, 40); text("From 8-16 years:", 10, 100); text(calcInches(8, 16, 2), 10, 120); text("Total grown over life:", 10, 168); text(lifeInches, 10, 200); </script> <canvas id="mycanvas"></canvas>
var lifeInches = 20;
var calcInches = function(startAge, endAge, inchesPerYear) {
var totalInches = inchesPerYear * (endAge - startAge);
<script type="text/processing" data-processing-target="mycanvas"> size(400, 400); noStroke(); var x = 11; // position of the car /* var draw = function() { }; */ var drawCar = function() { background(252, 255, 214); // draw the car body fill(255, 0, 115); rect(x, 200, 100, 20); rect(x + 15, 178, 70, 40); // draw the wheels fill(77, 66, 66); ellipse(x + 25, 221, 24, 24); ellipse(x + 75, 221, 24, 24); x = x + 3; }; mouseMoved = function() { fill(mouseX, mouseY, mouseY); ellipse(mouseX, mouseY, 10, 10); }; </script> <canvas id="mycanvas"></canvas>
var x = 11; // position of the car
<script type="text/processing" data-processing-target="mycanvas"> size(400, 400); // position of the ball var x = 20; // how far the ball moves every time var speed = 5; draw = function() { background(202, 255, 97); fill(66, 66, 66); ellipse(x, 200, 50, 50); if (x > 375) { speed = -5; } if (x < 25) { speed = 5; } // move the ball x = x + speed; }; </script>
if (x > 375) {
더 많은 마우스 상호작용
<script type="text/processing" data-processing-target="mycanvas"> size(400, 400); var position = 20; var speed = 3; draw = function() { background(202, 255, 97); fill(66, 66, 66); position = position + speed; // mouseX and mouseY // mouseIsPressed ellipse(position, mouseY, 50, 50); if (mousePressed) { ellipse(mouseX, position, 50, 50); } if (position > 375) { speed = -5; } if (position < 25) { speed = 5; } }; </script> <canvas id="mycanvas"></canvas>
// mouseIsPressed
ellipse(position, mouseY, 50, 50);
ellipse(mouseX, position, 50, 50);
if (position > 375) {
if (position < 25) {
<script type="text/processing" data-processing-target="mycanvas"> size(400, 400); var number = 48; if (number <= 48) { // top left fill(255, 255, 0); ellipse(100, 100, 100, 100); } if (number >= 48) { // top right fill(0, 225, 255); ellipse(300, 100, 100, 100); } if (number === 48) { // bottom left fill(255, 25, 117); ellipse(100, 300, 100, 100); } if (number !== 48) { // bottom right fill(0, 255, 68); ellipse(300, 300, 100, 100); } </script> <canvas id="mycanvas"></canvas>
var number = 48;
if (number <= 48) {
if (number >= 48) {
fill(0, 225, 255);
if (number === 48) {
fill(255, 25, 117);
if (number !== 48) {
fill(0, 255, 68);
<script type="text/processing" data-processing-target="mycanvas"> size(400, 400); // let's play 4 square! draw = function() { fill(204, 204, 204); rect(0, 0, 200, 200); // top left rect(200, 0, 200, 200); // top right rect(0, 200, 200, 200); // bottom left rect(200, 200, 200, 200); // bottom right if (mouseX < 200 && mouseY < 200) { fill(255, 255, 255); rect(0, 0, 200, 200); } if (mouseX > 200 && mouseY < 200) { fill(255, 255, 255); rect(200, 0, 200, 200); } if (mouseX === 200 || mouseY === 200 || mouseX < 3 || mouseX > 397) { fill(255, 0, 0); text("EDGE BALL!!!!", 200, 200); } fill(0, 0, 0); ellipse(mouseX, mouseY, 30, 30); }; </script> <canvas id="mycanvas"></canvas>
// let's play 4 square!
fill(204, 204, 204);
rect(0, 0, 200, 200); // top left
rect(200, 0, 200, 200); // top right
rect(0, 200, 200, 200); // bottom left
rect(200, 200, 200, 200); // bottom right
if (mouseX < 200 && mouseY < 200) {
if (mouseX > 200 && mouseY < 200) {
if (mouseX === 200 || mouseY === 200 || mouseX < 3 || mouseX > 397) {
text("EDGE BALL!!!!", 200, 200);
<script type="text/processing" data-processing-target="mycanvas"> size(400, 400); background(255, 145, 0); text("Click inside the rectangle:", 100, 95); rect(100, 100, 150, 150); mouseClicked = function() { //println("clicked!"); println(mouseX); println(mouseY); println(mouseX > 100 && mouseX < 250); println(mouseY > 100 && mouseY < 250); if (mouseX > 100 && mouseX < 250 && mouseY > 100 && mouseY < 250) { println("inside the if! wooo!"); rect(mouseX, mouseY, 5, 5); } }; </script> <canvas id="mycanvas"></canvas>
background(255, 145, 0);
text("Click inside the rectangle:", 100, 95);
//println("clicked!");
println(mouseX > 100 && mouseX < 250);
println(mouseY > 100 && mouseY < 250);
if (mouseX > 100 && mouseX < 250 && mouseY > 100 && mouseY < 250) {
println("inside the if! wooo!");
<script type="text/processing" data-processing-target="mycanvas"> size(400, 400); fill(120, 9, 148); var message = "y is now "; var y = 40; while(y < 400) { text(message + y, 30, y); y += 20; // Go back to the start of the loop! } /* The Three Loop Questions: 1. What do I want to repeat? -> The text function with the message! 2. What do I want to change each time? -> The y position, increasing by 20 each time. 3. How long should we repeat? -> As long as y is less than 400, all the way down. */ </script> <canvas id="mycanvas"></canvas>
fill(120, 9, 148);
var message = "y is now ";
while(y < 400) {
text(message + y, 30, y);
// Go back to the start of the loop!
/* The Three Loop Questions:
1. What do I want to repeat?
-> The text function with the message!
2. What do I want to change each time?
-> The y position, increasing by 20 each time.
3. How long should we repeat?
-> As long as y is less than 400, all the way down.
While 루프 2: 풍선호퍼
<script type="text/processing" data-processing-target="mycanvas"> size(400, 400); background(99, 200, 255); stroke(116, 57, 204); fill(221, 0, 255); var x = 100; while (x < 329) { line(x, 94, 224, 300); ellipse(x, 94, 49, 68); x += 60; } /* The Three Loop Questions: 1. What do I want to repeat? 2. What do I want to change each time? 3. How long should we repeat? */ image(getImage("creatures/Hopper-Jumping"), 223, 232); </script> <canvas id="mycanvas"></canvas>
background(99, 200, 255);
stroke(116, 57, 204);
fill(221, 0, 255);
while (x < 329) {
line(x, 94, 224, 300);
ellipse(x, 94, 49, 68);
image(getImage("creatures/Hopper-Jumping"), 223, 232);
<script type="text/processing" data-processing-target="mycanvas"> size(400, 400); // For Loops! fill(120, 9, 148); var y = 63; while (y < 313) { text("Pineapple pizza is the best!", 69, y); y += 41; } /* // for (start; how long; change) for (var y = 63; y < 313; y += 41) { text("Pineapple pizza is the best!", 69, y); } */ </script> <canvas id="mycanvas"></canvas>
// For Loops!
while (y < 313) {
text("Pineapple pizza is the best!", 69, y);
// for (start; how long; change)
for (var y = 63; y < 313; y += 41) {
<script type="text/processing" data-processing-target="mycanvas"> size(400, 400); for (var j = 0; j < 13; j++) { fill(255, 0, 0); text(j, 13, j*30+30); for (var i = 0; i < 12; i++) { fill(130, 56, 56); text(i, i*36, j*30+30); //image(getImage("cute/GemOrange"), i*36, j*30, 40, 60); } for (var col = 0; col < 10; col++) { for (var row = 0; row < 15; row++) { rect(col*20, row*20, 20, 20); } } </script> <canvas id="mycanvas"></canvas>
text(j, 13, j*30+30);
fill(130, 56, 56);
text(i, i*36, j*30+30);
//image(getImage("cute/GemOrange"), i*36, j*30, 40, 60);
<script type="text/processing" data-processing-target="mycanvas"> size(400, 400); /* This program simulates a ball bouncing, by repeatedly drawing the ball at the calculated new position, according to the arc of a parabola. */ noStroke(); // Time, starting at 0 var t = 0; // The height of the ball, where 0 is on the ground var y = 0; draw = function() { // Clear previous drawings and fill in a sky color background(214, 254, 255); // Draw the ground fill(255, 255, 255); rect(0, 250, 400, 150); // Calculate y according to the path of a parabola with respect to "t": // y = (velocity)*t - (acceleration)*t^2; // We can tweak the velocity and acceleration constants for our fake world y = -0.02*t*t + 5.0*t; // We make the shadow lighter as we increase y var grey = 0.1 * y + 200; // We grow the shadow bigger as we increase y var shadowSize = 0.2 * y + 50; // Draw the shadow fill(grey, grey, grey); ellipse(200, 300, shadowSize, 10); // Since y is a positive height, we need to flip it // to look right on the inverted coordinate plane var correctedY = 250 - y; // Draw the ball fill(71, 117, 255); ellipse(200, correctedY, 50, 50); // If y becomes negative, the ball has hit the ground if (y < 0) { // Now we reset t to make it "bounce" up again t = 0; } t += 5; }; </script> <canvas id="mycanvas"></canvas>
This program simulates a ball bouncing,
by repeatedly drawing the ball at the calculated
new position, according to the arc of a parabola.
// Time, starting at 0
// The height of the ball, where 0 is on the ground
// Clear previous drawings and fill in a sky color
background(214, 254, 255);
// Calculate y according to the path of a parabola with respect to "t":
// y = (velocity)*t - (acceleration)*t^2;
// We can tweak the velocity and acceleration constants for our fake world
y = -0.02*t*t + 5.0*t;
// We make the shadow lighter as we increase y
var grey = 0.1 * y + 200;
// We grow the shadow bigger as we increase y
var shadowSize = 0.2 * y + 50;
fill(grey, grey, grey);
ellipse(200, 300, shadowSize, 10);
// Since y is a positive height, we need to flip it
// to look right on the inverted coordinate plane
var correctedY = 250 - y;
fill(71, 117, 255);
ellipse(200, correctedY, 50, 50);
// If y becomes negative, the ball has hit the ground
// Now we reset t to make it "bounce" up again
<script type="text/processing" data-processing-target="mycanvas"> size(400, 400); // Arrays! var myFriend = "Sophia"; var myFriends = ["Sophia", "John", "Leif", "Winston", "OhNoes Guy!!"]; // myFriends[1] fill(255, 0, 0); text( myFriends[0], 10, 30); text( myFriends[1], 10, 80); text( myFriends[2], 10, 130); text("I have " + myFriends.length + " friends!!!", 10, 150); </script> <canvas id="mycanvas"></canvas>
객체 상속성(Object Inheritance)
이전 글이전 객체 상속성 (Object Inheritance)
다음 글다음 대만 자유여행 – 2박3일