繰り返しを使って描いてみよう

線を引く

code:B01.js

function setup() {

createCanvas(400, 400);

}

function draw() {

background(220);

stroke(255,255,50);

strokeWeight(10);

line(200, 40, 200, 360);

}

function keyPressed(){

if (key == 's') {

saveCanvas('isd_practiceB', 'png');

}

}

繰り返し線を引く

code: B02.js

function setup() {

createCanvas(400, 400);

}

function draw() {

background(220);

stroke(255,255,50);

strokeWeight(10);

for(i = 20; i <= 380; i = i+60){

line(i, 40, i, 360);

}

}

function keyPressed(){

if (key == 's') {

saveCanvas('isd_practiceB', 'png');

}

}

始点と終点を束ねる

code:B03.js

function setup() {

createCanvas(400, 400);

}

function draw() {

background(220);

stroke(255,255,50);

strokeWeight(10);

for(i = 20; i <= 380; i = i+60){

line(200, 40, i, 200);

line(i, 200, 200, 360);

}

}

function keyPressed(){

if (key == 's') {

saveCanvas('isd_practiceB', 'png');

}

}

マウスで線を動かす

code:B04.js

function setup() {

createCanvas(400, 400);

}

function draw() {

background(220);

stroke(255,255,50);

strokeWeight(2);

for(i = 20; i <= 380; i = i + 10){

line(200, 40, mouseX+i-200, mouseY);

line(mouseX+i-200, mouseY, 200, 360);

}

}

function keyPressed(){

if (key == 's') {

saveCanvas('isd_practiceB', 'png');

}

}

サインカーブを描く

code:B05.js

function setup() {

createCanvas(400, 400);

}

function draw() {

background(220);

stroke(255,255,50);

strokeWeight(2);

angleMode(DEGREES);

let angle = 0;

for(i = 20; i <= 380; i = i + 5){

line(i, 200, i, 200+sin(angle)*150);

angle = angle + 5;

}

}

function keyPressed(){

if (key == 's') {

saveCanvas('isd_practiceB', 'png');

}

}

マウスでサインカーブを動かす

code:B06.js

function setup() {

createCanvas(400, 400);

}

function draw() {

background(220);

stroke(255,255,50);

strokeWeight(2);

angleMode(DEGREES);

let angle = mouseX;

for(i = 20; i <= 380; i = i + 5){

line(i, 200, i, 200+sin(angle)*mouseY*0.5);

angle = angle + 5;

}

}

function keyPressed(){

if (key == 's') {

saveCanvas('isd_practiceB', 'png');

}

}

サインカーブをアニメーションする

code:B07.js

let i = 20;

let angle = 5;

let c = 0;

let g = 0;

function setup() {

createCanvas(400, 400);

background(220);

frameRate(60);

}

function draw() {

stroke(c,200);

strokeWeight(1);

angleMode(DEGREES);

line(i, 200, i, 200 + sin(angle) * 180);

i = i + 1;

angle = angle + 1;

g = g + 1;

if(i>=380){

i = 20;

angle = angle - 30;

}

if(g>512){

g = 0;

}else if(g>255){

c = c - 1;

}else{

c = c + 1;

}

}

function keyPressed(){

if (key == 's') {

saveCanvas('isd_practiceB', 'png');

}

}

サインカーブをアニメーションする改

code:B07x.js

let i = 20;

let angle = 5;

let c = 0;

let g = 0;

let lx;

let ly;

function setup() {

createCanvas(400, 400);

background(220);

frameRate(60);

}

function draw() {

stroke(255,c,255-c);

strokeWeight(3);

angleMode(DEGREES);

line(i, 200 + sin(angle) * 150, lx, ly);

lx = i;

ly = 200 + sin(angle) * 150;

i = i + 1;

angle = angle + 5;

g = g + 5;

if(i>=380){

i = 20;

angle = angle - 150;

lx = i;

ly = 200 + sin(angle) * 150;

}

if(g>512){

g = 0;

}else if(g>255){

c = c - 5;

}else{

c = c + 5;

}

}

function keyPressed(){

if (key == 's') {

saveCanvas('isd_practiceB', 'png');

}

}

https://gyazo.com/14ece0fc0ebf6a989d7d532aad7bb479