2024 NCKU Illusion Programing

Goal: Create simple illusions and modify them

Agenda

0. Goal

1. Build the environment.

2. Learn the basics of drawing.

3. Create and modify illusions.

4. Learn the basics of programming.

0. Goal

Learning programming through creating illusion.

Discovering the joy of programming.

Learning about optical illusions.

Developing the ability to create new illusions.

Works by RU students (2024 Spring semester after 15 weeks x 90 min)

1. Build the environment. (20 min)

Task

Create Account

Sign-up > enter information > log-in

You can save and share the works

Open editor

Run sample sketch

Copy and paste the code below

Run the code

You can find hearts in the right side.

code:js

function setup() {

createCanvas(800, 500);

background('#191970');

}

function draw() {

noStroke();

let size = 25;

let space =40;

for (x = 0; x <= width; x += space) {

for (y = 0; y <= height; y += space) {

fill('#B6FF01');

heart(x, y, size);

}

}

}

function heart(x, y, size) {

beginShape();

vertex(x, y);

bezierVertex(x - size / 2, y - size / 2, x - size, y + size / 3, x, y + size);

bezierVertex(x + size, y + size / 3, x + size / 2, y - size / 2, x, y);

endShape(CLOSE);

}

Task

Set name, save, and share

Change the name of the sketch

Save the sketch

Duplicate the sketch

View the sketch list

Share the linke of sketch

2. Learn the basics of drawing. (40 min)

Draw line, circle, rectangle, etc.

Task

Create a new sketch: File > New

Rename the sketch

Adjust appearance

Color

Blightness (0: black - 255: white)

RGB (Red, Green, Blue)

e.g., (255, 0, 0) -> Red

set color by name (e.g., "yellow")

Line color and fill color

code:js

fill(255); // set fill color as white

fill(255, 0, 0); // set fill color as red

noFill(); // do not fill

stroke(255); // set stroke (line) color as white

stroke(0, 255, 255); // set line color as yellow

noStroke(); // do not draw line

Weight

code: js

strokeWeight(1); // thin

strokeWeight(10); // thick

Task

Create a new sketch: File > New

Rename the sketch

Adjust color and weight as you like.

Position

How to use drawing command

code:js

line(70, 20, 125, 75); // position of edges (x1, y1, x2, y2)

circle(250, 50, 80); // position of center (x, y) and radius

triangle(70, 175, 100, 120, 120, 200); // position of 3 vertex (x1, y1, x2, y2, x3, y3)

rect(230, 150, 55, 90); // position of left-top vertex (x, y), width, height

ellipse(100, 300, 100, 50); // position of center (x, y), width, height

arc(300, 320, 80, 80, 0, PI + HALF_PI); // center (x, y), width, height, start and stop angle

Task

Adjust the position and size of the shapes as you like

3. Create and modify illusions. (60 min)

Web site introducing various illusions

Task

Create some illusions.

Groupwork (2-3 students) is recommended.

brightness contrast

https://scrapbox.io/files/66dfbcf3f69cd4001d7a3efe.png

Jastrow illusion

Müller-Lyer illusion

Ebbinghaus illusion

Ehrenstein illusion

Jastrow illusion

Poggendorff illusion

Zöllner illusion

Hermann grid illusion

Variables, Conditionals, Loops, ...]

jsPsych + Psych Experiments