sin-cos

//sin cos test
function setup() {
var myCanvas = createCanvas(300, 300);
myCanvas.parent('myContainer');
stroke(255, 0, 0);

function draw() {
background(235);
translate(width/2, height/2);
var x = 90*cos(frameCount*0.05);
var y = 90*sin(frameCount*0.05);
var c = color('hsla(0, 100%, 50%, 0.9)');
fill(c);
noStroke();
// xを表す点を描画してみる
ellipse(x, y, 60, 60);
}

preview

////////////////////////
//rasen move

var x = 0;
var y = 0;
var deg = 0;
var r = 0;
function setup() {
var myCanvas = createCanvas(300, 300);
myCanvas.parent('myContainer');
}

function draw() {
background(230);

fill(255,0,0);
noStroke();
x = width / 2 + r*cos(radians(deg));
y = height / 2 + r*sin(radians(deg));
ellipse(x, y, 30, 30);
deg = deg + 2;
r = r + 0.1;
if(x<=0+15 || y<=0+15){
deg =0;
r = 0;
}
}

preview

/////////////////////////
//cos

function setup() {
var myCanvas = createCanvas(300, 300);
myCanvas.parent('myContainer');
stroke(255, 0, 0);
// strokeWeight(20);
}

function draw() {
background(235);
// 原点を画面中心に移動
translate(width/2, height/2);

// cos()が返した値をxに代入
var x = 100 * cos(frameCount*0.05);
var c = color('hsla(0, 100%, 50%, 0.9)');
fill(c);
noStroke();
// xを表す点を描画してみる
ellipse(x, 0,40,40);
}

preview

/////////////////////////////
//sin
function setup() {
var myCanvas = createCanvas(300, 300);
myCanvas.parent('myContainer');
stroke(0, 255, 0);
// strokeWeight(20);
}

function draw() {
background(235);
// 原点を画面中心に移動
translate(width/2, height/2);

// sin()が返した値をyに代入
var y = 100 * sin(frameCount*0.05);
var x = 100 * cos(frameCount*0.05);
var c = color('hsla(0, 100%, 50%, 0.9)');
fill(c);
noStroke();
// xを表す点を描画してみる
ellipse(0, y,50,50);
}

preview

///////////////////////////
//sin cos

function setup() {
var myCanvas = createCanvas(300, 300);
myCanvas.parent('myContainer');
noStroke();
fill(0);
}

function draw() {
background(235);

for(var x = 0; x <= width; x += 20) {
var y = height/2 + 100 * sin(frameCount*0.04 + x*0.02);
var c = color('hsla(0, 100%, 50%, 0.9)');
fill(c);
noStroke();
ellipse(x, y, 19, 19);
}
}

preview